MotionHighlight

File, controale segmentate sau navigare din date, cu un singur evidențiator care se mută la selecție.

WebReact NativeSelecție și paginare

Încercați

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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

Cea mai scurtă utilizare

Tabs.jsx

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

Ce rezolvă în locul dumneavoastră

Un singur evidențiator se mută și se redimensionează între elemente; stilizați-l cu highlightClassName.
Elementele vin din items, key-urile din getKey, iar etichetele din renderItem.
hover îl face să urmeze cursorul și să revină la selecție.
Elementele se pot încadra pe mai multe rânduri, iar evidențiatorul le urmează.
Încărcarea fonturilor și schimbările de layout sunt măsurate din nou automat.

Folosiți-o pentru

File de pagină.
O bară de filtre.
Un control segmentat într-un formular de setări.

Props

Prop	Tip	Implicit	Descriere
`items`	`readonly T[]`	`—`obligatoriu	Tabloul cu datele dumneavoastră.
`value`	`key \| null`	`—`obligatoriu	Key-ul elementului evidențiat; `null` ascunde evidențiatorul.
`onValueChange`	`(key, item) => void`		Rulează cu key-ul și elementul când un element este apăsat.
`getKey`	`(item) => string \| number`	`item.id`	Returnează un key unic și stabil pentru un element. Implicit `item.id` sau elementul însuși pentru șiruri și numere.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Desenează un element; primește dacă este selectat.
`hover`	`boolean`	`false`	Urmează cursorul peste elemente și revine la `value` la ieșire (web).
`itemAs`	`element`	`'button'`	Elementul pentru fiecare element din listă.
`itemClassName`	`string`		Clasă pentru fiecare element din listă; `itemStyle` îi setează stilul inline.
`highlightClassName`	`string`		Clasă pentru evidențiator; `highlightStyle` îi setează stilul inline.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.

Celelalte props merg la elementul randat, așa că className, style și handlerele de evenimente funcționează ca de obicei.

Web și React Native

Fiecare element se randează implicit ca button (itemAs schimbă asta); apăsarea lui apelează onValueChange(key, item).

În React Native elementele sunt Pressable; poziția rulează pe driverul nativ, iar mărimea pe o vizualizare imbricată condusă de JavaScript.