MotionHighlight

Faner, segmenterte kontroller eller navigasjon fra data, med én markering som flytter til utvalget.

WebReact NativeUtvalg og sider

Prøv det

Forbereder eksempelet …

JavaScript er slått av. Koden nedenfor er hele eksempelet.

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

Korteste bruk

Tabs.jsx

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

Dette tar den seg av

Én markering flytter og endrer størrelse mellom elementer; stil den med highlightClassName.
Elementer kommer fra items, nøkler fra getKey og etiketter fra renderItem.
hover får den til å følge pekeren og gå tilbake til utvalget.
Elementer kan brytes over flere rader, og markeringen følger dem.
Innlasting av skrifttyper og layoutendringer måles automatisk på nytt.

Bruk den til

Sidefaner.
En filterlinje.
En segmentert kontroll i et innstillingsskjema.

Props

Prop	Type	Standard	Beskrivelse
`items`	`readonly T[]`	`—`påkrevd	Data-arrayen din.
`value`	`key \| null`	`—`påkrevd	Nøkkelen for det markerte elementet; `null` skjuler markeringen.
`onValueChange`	`(key, item) => void`		Kjører med nøkkelen og elementet når et element trykkes.
`getKey`	`(item) => string \| number`	`item.id`	Returnerer en unik, stabil nøkkel for et element. Standard er `item.id`, eller selve elementet for strenger og tall.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Tegner et element; får vite om det er valgt.
`hover`	`boolean`	`false`	Følg pekeren over elementer og gå tilbake til `value` når den forlater (web).
`itemAs`	`element`	`'button'`	Elementet for hvert punkt.
`itemClassName`	`string`		Klasse for hvert punkts element; `itemStyle` setter inline-stilen.
`highlightClassName`	`string`		Klasse for markeringen; `highlightStyle` setter inline-stilen.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.

Andre props går til det renderte elementet, så className, style og hendelseshåndterere fungerer som vanlig.

Web og React Native

Hvert element renderes som standard som button (itemAs endrer det); et trykk kaller onValueChange(key, item).

I React Native er elementene Pressable; posisjonen kjører på native driver og størrelsen på en nøstet visning som styres av JavaScript.