MotionHighlight

由資料產生的分頁標籤、分段控制項或導覽，一個醒目標示會移到選取的項目。

WebReact Native選擇與翻頁

動手試試

正在準備範例…

JavaScript 已關閉。下方的程式碼就是完整的範例。

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

最簡用法

Tabs.jsx

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

它替你處理的事

一個醒目標示在各項目之間移動並改變尺寸；以 highlightClassName 設定樣式。
項目來自 items，key 來自 getKey，標籤來自 renderItem。
hover 會讓它跟隨指標，離開後回到選取的項目。
項目可以換成多行，醒目標示也會跟著移動。
字型載入與版面變化會自動重新測量。

適用情境

頁面分頁標籤。
篩選列。
設定表單中的分段控制項。

Props

Prop	型別	預設值	說明
`items`	`readonly T[]`	`—`必填	你的資料陣列。
`value`	`key \| null`	`—`必填	醒目標示項目的 key；`null` 會隱藏醒目標示。
`onValueChange`	`(key, item) => void`		項目被按下時，帶著 key 與該項目執行。
`getKey`	`(item) => string \| number`	`item.id`	為項目回傳唯一且穩定的 key。預設為 `item.id`，字串與數字則為它本身。
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	繪製一個項目；會收到它是否被選取。
`hover`	`boolean`	`false`	在項目上跟隨指標，離開時回到 `value`（Web）。
`itemAs`	`element`	`'button'`	每個項目使用的元素。
`itemClassName`	`string`		每個項目元素的 class；`itemStyle` 設定其行內樣式。
`highlightClassName`	`string`		醒目標示的 class；`highlightStyle` 設定其行內樣式。
`transition`	`Transition`	`spring`	時間曲線 `{ duration, easing }` 或彈簧 `{ tempo: 'spring', spring }`。彈簧被中斷時會保留動量。

其他 props 會傳給渲染的元素，所以 className、style 與事件處理函式照常可用。

Web 與 React Native

每個項目預設渲染為 button（以 itemAs 修改），按下時呼叫 onValueChange(key, item)。

在 React Native 上項目是 Pressable；位置由原生驅動，尺寸由一個以 JavaScript 驅動的巢狀檢視控制。