MotionHighlight

Tab, kontrol bersegmen, atau navigasi dari data, dengan satu sorotan yang berpindah ke pilihan.

WebReact NativePilihan dan halaman

Coba

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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;
}

Penggunaan terpendek

Tabs.jsx

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

Yang ditanganinya untuk Anda

Satu sorotan berpindah dan berubah ukuran antar item; beri gaya dengan highlightClassName.
Item berasal dari items, key dari getKey, dan label dari renderItem.
hover membuatnya mengikuti pointer dan kembali ke pilihan.
Item bisa membungkus ke beberapa baris dan sorotan mengikutinya.
Pemuatan font dan perubahan tata letak diukur ulang secara otomatis.

Gunakan untuk

Tab halaman.
Bilah filter.
Kontrol bersegmen di formulir pengaturan.

Props

Prop	Tipe	Bawaan	Deskripsi
`items`	`readonly T[]`	`—`wajib	Array data Anda.
`value`	`key \| null`	`—`wajib	Key item yang disorot; `null` menyembunyikan sorotan.
`onValueChange`	`(key, item) => void`		Berjalan dengan key dan item saat sebuah item ditekan.
`getKey`	`(item) => string \| number`	`item.id`	Mengembalikan key yang unik dan stabil untuk sebuah item. Bawaannya `item.id`, atau item itu sendiri untuk string dan angka.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Menggambar item; menerima apakah item itu terpilih.
`hover`	`boolean`	`false`	Mengikuti pointer di atas item dan kembali ke `value` saat pointer pergi (web).
`itemAs`	`element`	`'button'`	Elemen untuk setiap item.
`itemClassName`	`string`		Class untuk setiap elemen item; `itemStyle` mengatur gaya inline-nya.
`highlightClassName`	`string`		Class untuk sorotan; `highlightStyle` mengatur gaya inline-nya.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.

Semua props lain diteruskan ke elemen yang dirender, jadi className, style, dan event handler bekerja seperti biasa.

Web dan React Native

Setiap item dirender sebagai button secara bawaan (itemAs mengubahnya); menekannya memanggil onValueChange(key, item).

Di React Native, item berupa Pressable; posisi berjalan dengan driver native dan ukuran pada view bersarang yang digerakkan JavaScript.