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 மூலம் style கொடுங்கள்.
உருப்படிகள் 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-இலும் இயங்குகின்றன.