MotionHighlight

Tabs, segmented controls of navigatie uit data, met één markering die naar de selectie verhuist.

WebReact NativeSelectie en pagina's

Probeer het

Voorbeeld voorbereiden…

JavaScript staat uit. De code hieronder is het volledige voorbeeld.

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

Kortste gebruik

Tabs.jsx

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

Wat het voor je regelt

Eén markering beweegt en verandert van grootte tussen items; geef haar stijl met highlightClassName.
Items komen uit items, keys uit getKey en labels uit renderItem.
hover laat haar de aanwijzer volgen en terugkeren naar de selectie.
Items kunnen over meerdere rijen doorlopen en de markering volgt ze.
Het laden van lettertypen en layoutwijzigingen worden automatisch opnieuw gemeten.

Gebruik het voor

Paginatabs.
Een filterbalk.
Een segmented control in een instellingenformulier.

Props

Prop	Type	Standaard	Beschrijving
`items`	`readonly T[]`	`—`verplicht	Je data-array.
`value`	`key \| null`	`—`verplicht	Key van het gemarkeerde item; `null` verbergt de markering.
`onValueChange`	`(key, item) => void`		Draait met de key en het item als een item wordt ingedrukt.
`getKey`	`(item) => string \| number`	`item.id`	Geeft een unieke, stabiele key voor een item terug. Standaard `item.id`, of het item zelf bij strings en getallen.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Tekent een item; krijgt mee of het geselecteerd is.
`hover`	`boolean`	`false`	Volg de aanwijzer over items en keer bij verlaten terug naar `value` (web).
`itemAs`	`element`	`'button'`	Het element voor elk item.
`itemClassName`	`string`		Class voor elk item-element; `itemStyle` zet de inline style.
`highlightClassName`	`string`		Class voor de markering; `highlightStyle` zet de inline style.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.

Andere props gaan naar het gerenderde element, dus className, style en event handlers werken zoals gewoonlijk.

Web en React Native

Elk item rendert standaard als button (itemAs verandert dat); erop drukken roept onValueChange(key, item) aan.

In React Native zijn items Pressable's; de positie loopt op de native driver en de grootte op een geneste view die door JavaScript wordt aangestuurd.