MotionHighlight

Tabs, Segmented Controls oder Navigation aus Daten, mit einer Hervorhebung, die zur Auswahl wandert.

WebReact NativeAuswahl und Blättern

Ausprobieren

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

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

Kürzeste Nutzung

Tabs.jsx

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

Was sie dir abnimmt

Eine Hervorhebung bewegt sich zwischen den Elementen und passt ihre Größe an; gestalte sie mit highlightClassName.
Elemente kommen aus items, Keys aus getKey und Beschriftungen aus renderItem.
hover lässt sie dem Zeiger folgen und zur Auswahl zurückkehren.
Elemente können auf mehrere Zeilen umbrechen, und die Hervorhebung folgt ihnen.
Das Laden von Schriften und Layoutänderungen werden automatisch neu gemessen.

Gut für

Seiten-Tabs.
Eine Filterleiste.
Ein Segmented Control in einem Einstellungsformular.

props

Prop	Typ	Standard	Beschreibung
`items`	`readonly T[]`	`—`erforderlich	Dein Daten-Array.
`value`	`key \| null`	`—`erforderlich	Key des hervorgehobenen Elements; `null` blendet die Hervorhebung aus.
`onValueChange`	`(key, item) => void`		Läuft mit Key und Element, wenn ein Element gedrückt wird.
`getKey`	`(item) => string \| number`	`item.id`	Gibt einen eindeutigen, stabilen Key für ein Element zurück. Standard ist `item.id` oder bei Strings und Zahlen das Element selbst.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Zeichnet ein Element; erhält, ob es ausgewählt ist.
`hover`	`boolean`	`false`	Dem Zeiger über Elemente folgen und beim Verlassen zu `value` zurückkehren (Web).
`itemAs`	`element`	`'button'`	Das Element für jeden Eintrag.
`itemClassName`	`string`		Klasse für jedes Eintragselement; `itemStyle` setzt seinen Inline-Style.
`highlightClassName`	`string`		Klasse für die Hervorhebung; `highlightStyle` setzt ihren Inline-Style.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.

Weitere props gehen an das gerenderte Element, also funktionieren className, style und Event-Handler wie gewohnt.

Web und React Native

Jedes Element wird standardmäßig als button gerendert (itemAs ändert das); ein Druck ruft onValueChange(key, item) auf.

Unter React Native sind Elemente Pressables; die Position läuft auf dem nativen Treiber, die Größe auf einer verschachtelten, per JavaScript gesteuerten View.