MotionHighlight

Skirtukai, segmentiniai valdikliai ar naršymas iš duomenų su vienu paryškinimu, keliaujančiu prie pasirinkimo.

ŽiniatinklisReact NativePasirinkimas ir puslapiavimas

Išbandykite

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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;
}

Trumpiausias naudojimas

Tabs.jsx

<MotionHighlight
  items={['Overview', 'Activity', 'Settings']}
  value={tab}
  onValueChange={setTab}
  hover
/>;

Ką jis sutvarko už jus

Vienas paryškinimas juda ir keičia dydį tarp elementų; stilių jam nustatykite su highlightClassName.
Elementai ateina iš items, key – iš getKey, o etiketės – iš renderItem.
hover priverčia jį sekti žymeklį ir grįžti prie pasirinkimo.
Elementai gali išsidėstyti keliose eilutėse, ir paryškinimas juos seka.
Šriftų įkėlimas ir išdėstymo pokyčiai automatiškai išmatuojami iš naujo.

Naudokite jį

Puslapio skirtukai.
Filtrų juosta.
Segmentinis valdiklis nustatymų formoje.

Props

Prop	Tipas	Numatytoji	Aprašymas
`items`	`readonly T[]`	`—`privaloma	Jūsų duomenų masyvas.
`value`	`key \| null`	`—`privaloma	Paryškinto elemento key; `null` paslepia paryškinimą.
`onValueChange`	`(key, item) => void`		Vykdomas su key ir elementu, kai elementas paspaudžiamas.
`getKey`	`(item) => string \| number`	`item.id`	Grąžina unikalų, stabilų elemento key. Pagal numatymą `item.id` arba pats elementas eilutėms ir skaičiams.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Nupiešia elementą; gauna, ar jis pasirinktas.
`hover`	`boolean`	`false`	Seka žymeklį virš elementų ir išėjus grįžta prie `value` (žiniatinklis).
`itemAs`	`element`	`'button'`	Kiekvieno elemento apvalkalas.
`itemClassName`	`string`		Klasė kiekvienam elementui; `itemStyle` nustato jo vidinį stilių.
`highlightClassName`	`string`		Paryškinimo klasė; `highlightStyle` nustato jo vidinį stilių.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.

Kiti props perduodami atvaizduojamam elementui, todėl className, style ir įvykių apdorojimo funkcijos veikia kaip įprastai.

Žiniatinklis ir React Native

Kiekvienas elementas pagal numatymą atvaizduojamas kaip button (itemAs tai keičia); jį paspaudus iškviečiama onValueChange(key, item).

React Native elementai yra Pressable; padėtis vykdoma su vietiniu driver, o dydis – įdėtame JavaScript valdomame vaizde.