MotionHighlight

לשוניות, בקרים מפולחים או ניווט מנתונים, עם הדגשה אחת שנודדת לבחירה.

אינטרנטReact 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, מפתחות מ־getKey ותוויות מ־renderItem.
hover גורם לה לעקוב אחרי הסמן ולחזור לבחירה.
פריטים יכולים להישבר לכמה שורות וההדגשה עוקבת אחריהם.
טעינת גופנים ושינויי פריסה נמדדים מחדש אוטומטית.

מתאים ל־

לשוניות של עמוד.
סרגל מסננים.
בקר מפולח בטופס הגדרות.

Props

Prop	טיפוס	ברירת מחדל	תיאור
`items`	`readonly T[]`	`—`חובה	מערך הנתונים שלכם.
`value`	`key \| null`	`—`חובה	המפתח של הפריט המודגש; `null` מסתיר את ההדגשה.
`onValueChange`	`(key, item) => void`		רץ עם המפתח והפריט כשלוחצים על פריט.
`getKey`	`(item) => string \| number`	`item.id`	מחזיר מפתח ייחודי ויציב לפריט. ברירת המחדל היא `item.id`, או הפריט עצמו למחרוזות ולמספרים.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	מצייר פריט; מקבל אם הוא נבחר.
`hover`	`boolean`	`false`	לעקוב אחרי הסמן מעל הפריטים ולחזור ל־`value` ביציאה (אינטרנט).
`itemAs`	`element`	`'button'`	האלמנט לכל פריט.
`itemClassName`	`string`		class לאלמנט של כל פריט; `itemStyle` מגדיר את הסגנון המוטבע שלו.
`highlightClassName`	`string`		class להדגשה; `highlightStyle` מגדיר את הסגנון המוטבע שלה.
`transition`	`Transition`	`spring`	עקומת timing `{ duration, easing }` או קפיץ `{ tempo: 'spring', spring }`. קפיצים שומרים על התנופה שלהם כשמפריעים להם.

props אחרים עוברים לאלמנט המרונדר, כך ש־className, style ומטפלי אירועים עובדים כרגיל.

אינטרנט ו־React Native

כל פריט מרונדר כ־button כברירת מחדל (itemAs משנה את זה); לחיצה עליו קוראת ל־onValueChange(key, item).

ב־React Native הפריטים הם Pressable; המיקום רץ על ה־driver הנייטיב והגודל על view מקונן שמונע ב־JavaScript.