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`		صنف لعنصر كل بند؛ ويضبط `itemStyle` نمطه المضمّن.
`highlightClassName`	`string`		صنف التمييز؛ ويضبط `highlightStyle` نمطه المضمّن.
`transition`	`Transition`	`spring`	منحنى توقيت `{ duration, easing }` أو نابض `{ tempo: 'spring', spring }`. تحتفظ النوابض بزخمها عند المقاطعة.

تذهب props الأخرى إلى العنصر المعروض، فتعمل className وstyle ومعالجات الأحداث كالمعتاد.

الويب وReact Native

يُعرض كل عنصر افتراضيًا كـ button (ويغيّره itemAs)؛ والضغط عليه يستدعي onValueChange(key, item).

في React Native العناصر من نوع Pressable؛ ويعمل الموضع على المشغّل الأصلي، والحجم على عرض متداخل يقوده JavaScript.