MotionHighlight

Veriden sekmeler, bölümlü denetimler ya da gezinme; seçime doğru ilerleyen tek bir vurguyla.

WebReact NativeSeçim ve sayfalama

Deneyin

Örnek hazırlanıyor…

JavaScript kapalı. Aşağıdaki kod örneğin tamamıdır.

App.jsx

import { useState } from 'react';
import { MotionHighlight, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const sections = [
  { id: 'overview', label: 'Overview', body: 'Totals for the last 30 days.' },
  { id: 'activity', label: 'Activity', body: 'Every change, newest first.' },
  { id: 'members', label: 'Members', body: 'Twelve people can edit this workspace.' },
  { id: 'billing', label: 'Billing', body: 'Next invoice on the 1st.' },
  { id: 'settings', label: 'Settings', body: 'Name, region and danger zone.' },
];

export default function App({ shape = 'pill', hover = true, spring = 'default' }) {
  const [tab, setTab] = useState('activity');
  const current = sections.find((section) => section.id === tab);

  return (
    <div className="stage">
      <MotionHighlight
        items={sections}
        value={tab}
        onValueChange={setTab}
        hover={hover}
        transition={motionTokens.spring[spring]}
        className={`tabs ${shape}`}
        itemClassName="tab"
        highlightClassName="highlight"
        renderItem={(section, { selected }) => (
          <span className={selected ? 'label on' : 'label'}>{section.label}</span>
        )}
      />
      <p className="body">
        <strong>{current.label}</strong> {current.body}
      </p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 44px 20px;
}

/* One row like a real tab bar: on a narrow screen it scrolls sideways instead of wrapping. */
.tabs {
  display: flex;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  background: none;
  font:
    650 15px system-ui,
    sans-serif;
  cursor: pointer;
}

.label {
  color: #5b616b;
  transition: color 0.2s;
}

.label.on {
  color: #0e2e24;
}

.pill {
  padding: 4px;
  border-radius: 999px;
  background: #eaf6f0;
}

.pill .highlight {
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px #cfe8dc;
}

.underline {
  border-bottom: 1px solid #cfe8dc;
}

.underline .highlight {
  border-bottom: 3px solid #176b52;
}

.block {
  gap: 6px;
}

.block .highlight {
  border-radius: 10px;
  background: #176b52;
}

.block .label.on {
  color: #fff;
}

.body {
  margin: 0;
  color: #5b616b;
}

.body strong {
  color: #0e2e24;
}

En kısa kullanım

Tabs.jsx

<MotionHighlight
  items={['Overview', 'Activity', 'Settings']}
  value={tab}
  onValueChange={setTab}
  hover
/>;

Sizin yerinize hallettikleri

Tek bir vurgu öğeler arasında hareket eder ve boyut değiştirir; onu highlightClassName ile biçimlendirin.
Öğeler items'tan, key'ler getKey'den, etiketler renderItem'dan gelir.
hover onu işaretçiyi izleyip seçime geri döndürür.
Öğeler birkaç satıra kayabilir ve vurgu onları izler.
Yazı tipi yüklenmesi ve düzen değişiklikleri otomatik olarak yeniden ölçülür.

Şunlar için kullanın

Sayfa sekmeleri.
Bir filtre çubuğu.
Bir ayar formunda bölümlü bir denetim.

Props

Prop	Tip	Varsayılan	Açıklama
`items`	`readonly T[]`	`—`zorunlu	Veri diziniz.
`value`	`key \| null`	`—`zorunlu	Vurgulanan öğenin key'i; `null` vurguyu gizler.
`onValueChange`	`(key, item) => void`		Bir öğeye basıldığında key ve öğeyle çalışır.
`getKey`	`(item) => string \| number`	`item.id`	Bir öğe için benzersiz, kararlı bir key döndürür. Varsayılan `item.id`, dize ve sayılar için öğenin kendisidir.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Bir öğeyi çizer; seçili olup olmadığını alır.
`hover`	`boolean`	`false`	Öğelerin üzerinde işaretçiyi izler ve ayrılınca `value`'ya döner (web).
`itemAs`	`element`	`'button'`	Her öğenin elemanı.
`itemClassName`	`string`		Her öğe elemanı için class; `itemStyle` satır içi stilini ayarlar.
`highlightClassName`	`string`		Vurgu için class; `highlightStyle` satır içi stilini ayarlar.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.

Diğer props render edilen öğeye gider; böylece className, style ve olay işleyiciler her zamanki gibi çalışır.

Web ve React Native

Her öğe varsayılan olarak button olarak render edilir (itemAs bunu değiştirir); basmak onValueChange(key, item) çağırır.

React Native'de öğeler Pressable'dır; konum native driver üzerinde, boyut ise JavaScript'in yönettiği iç içe bir görünümde çalışır.