MotionHighlight

डेटामधून टॅब, segmented control किंवा नेव्हिगेशन, निवडीकडे प्रवास करणाऱ्या एका हायलाइटसह.

वेब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 त्याला पॉइंटरचे अनुसरण करून निवडीकडे परत यायला लावते.
वस्तू अनेक ओळींमध्ये गुंडाळल्या जाऊ शकतात आणि हायलाइट त्यांचे अनुसरण करतो.
फॉन्ट लोडिंग आणि लेआउट बदल आपोआप पुन्हा मोजले जातात.

यासाठी वापरा

पान टॅब.
फिल्टर पट्टी.
सेटिंग्ज फॉर्ममधील segmented control.

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 style सेट करते.
`highlightClassName`	`string`		हायलाइटसाठी class; `highlightStyle` त्याची inline style सेट करते.
`transition`	`Transition`	`spring`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', spring }`. spring व्यत्यय आल्यावर त्यांची गती राखतात.

इतर props रेंडर होणाऱ्या एलिमेंटकडे जातात, त्यामुळे className, style आणि इव्हेंट हँडलर नेहमीप्रमाणे चालतात.

वेब आणि React Native

प्रत्येक वस्तू डीफॉल्टनुसार button म्हणून रेंडर होते (itemAs ते बदलते); दाबल्यास onValueChange(key, item) कॉल होते.

React Native वर वस्तू Pressable आहेत; स्थिती नेटिव्ह driver वर आणि आकार JavaScript चालवत असलेल्या आतील view वर चालतो.