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 से, 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` पर लौटें (वेब)।
`itemAs`	`element`	`'button'`	हर आइटम का एलिमेंट।
`itemClassName`	`string`		हर आइटम एलिमेंट की class; `itemStyle` उसकी inline स्टाइल तय करता है।
`highlightClassName`	`string`		हाइलाइट की class; `highlightStyle` उसकी inline स्टाइल तय करता है।
`transition`	`Transition`	`spring`	timing वक्र `{ duration, easing }` या स्प्रिंग `{ tempo: 'spring', spring }`। रुकने पर स्प्रिंग अपनी गति बनाए रखते हैं।

बाक़ी props रेंडर होने वाले एलिमेंट को जाते हैं, इसलिए className, style और इवेंट हैंडलर सामान्य रूप से काम करते हैं।

वेब और React Native

हर आइटम डिफ़ॉल्ट रूप से button के रूप में रेंडर होता है (itemAs इसे बदलता है); दबाने पर onValueChange(key, item) कॉल होता है।

React Native में आइटम Pressable हैं; स्थिति नेटिव driver पर चलती है और आकार JavaScript से चलने वाले भीतरी व्यू पर।