MotionHighlight

Tab, điều khiển phân đoạn hoặc điều hướng từ dữ liệu, với một điểm nhấn di chuyển đến lựa chọn.

WebReact NativeLựa chọn và phân trang

Thử ngay

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

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

Cách dùng ngắn nhất

Tabs.jsx

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

Những gì nó xử lý giúp bạn

Một điểm nhấn di chuyển và đổi kích thước giữa các mục; tạo kiểu bằng highlightClassName.
Mục đến từ items, key từ getKey và nhãn từ renderItem.
hover khiến nó bám theo con trỏ và quay về lựa chọn.
Các mục có thể xuống nhiều hàng và điểm nhấn đi theo.
Việc tải phông chữ và thay đổi bố cục được tự động đo lại.

Dùng cho

Tab trang.
Thanh bộ lọc.
Điều khiển phân đoạn trong biểu mẫu cài đặt.

Props

Prop	Kiểu	Mặc định	Mô tả
`items`	`readonly T[]`	`—`bắt buộc	Mảng dữ liệu của bạn.
`value`	`key \| null`	`—`bắt buộc	Key của mục được nhấn mạnh; `null` ẩn điểm nhấn.
`onValueChange`	`(key, item) => void`		Chạy với key và mục khi một mục được nhấn.
`getKey`	`(item) => string \| number`	`item.id`	Trả về key duy nhất, ổn định cho một mục. Mặc định là `item.id`, hoặc chính mục đó với chuỗi và số.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Vẽ một mục; nhận thông tin mục đó có được chọn hay không.
`hover`	`boolean`	`false`	Bám theo con trỏ trên các mục và quay về `value` khi rời đi (web).
`itemAs`	`element`	`'button'`	Phần tử cho từng mục.
`itemClassName`	`string`		Class cho từng phần tử mục; `itemStyle` đặt style nội tuyến của nó.
`highlightClassName`	`string`		Class cho điểm nhấn; `highlightStyle` đặt style nội tuyến của nó.
`transition`	`Transition`	`spring`	Đường cong timing `{ duration, easing }` hoặc lò xo `{ tempo: 'spring', spring }`. Lò xo giữ đà khi bị ngắt.

Các props khác được chuyển tới phần tử được render, nên className, style và trình xử lý sự kiện hoạt động như bình thường.

Web và React Native

Mỗi mục mặc định được render thành button (itemAs để đổi); nhấn vào sẽ gọi onValueChange(key, item).

Trên React Native, các mục là Pressable; vị trí chạy bằng native driver và kích thước trên một view lồng do JavaScript điều khiển.