MotionHighlight

Faner, segmenterede kontroller eller navigation fra data, med én markering, der flytter til valget.

WebReact NativeValg og sider

Prøv det

Forbereder eksemplet…

JavaScript er slået fra. Koden nedenfor er hele eksemplet.

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 brug

Tabs.jsx

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

Det klarer den for dig

Én markering flytter og ændrer størrelse mellem elementer; style den med highlightClassName.
Elementer kommer fra items, nøgler fra getKey og etiketter fra renderItem.
hover får den til at følge markøren og vende tilbage til valget.
Elementer kan ombrydes over flere rækker, og markeringen følger dem.
Indlæsning af skrifttyper og layoutændringer måles automatisk igen.

Brug den til

Sidefaner.
En filterlinje.
En segmenteret kontrol i en indstillingsformular.

Props

Prop	Type	Standard	Beskrivelse
`items`	`readonly T[]`	`—`påkrævet	Dit data-array.
`value`	`key \| null`	`—`påkrævet	Nøglen for det markerede element; `null` skjuler markeringen.
`onValueChange`	`(key, item) => void`		Kører med nøglen og elementet, når et element trykkes.
`getKey`	`(item) => string \| number`	`item.id`	Returnerer en unik, stabil nøgle for et element. Standard er `item.id`, eller selve elementet for strenge og tal.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Tegner et element; får at vide, om det er valgt.
`hover`	`boolean`	`false`	Følg markøren hen over elementer, og vend tilbage til `value`, når den forlader (web).
`itemAs`	`element`	`'button'`	Elementet for hvert punkt.
`itemClassName`	`string`		Klasse for hvert punkts element; `itemStyle` sætter dets inline-style.
`highlightClassName`	`string`		Klasse til markeringen; `highlightStyle` sætter dens inline-style.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.

Andre props går til det renderede element, så className, style og event handlers virker som normalt.

Web og React Native

Hvert element renderes som standard som button (itemAs ændrer det); et tryk kalder onValueChange(key, item).

I React Native er elementerne Pressable; positionen kører på native driver og størrelsen på et indlejret view, der styres af JavaScript.