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-চালিত ভেতরের ভিউতে।