MotionHighlight

Flikar, segmenterade kontroller eller navigation från data, med en markering som flyttar till urvalet.

WebbReact NativeUrval och sidor

Prova

Förbereder exemplet…

JavaScript är avstängt. Koden nedan är hela exemplet.

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

Kortaste användning

Tabs.jsx

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

Det här sköter den åt dig

En markering flyttar och ändrar storlek mellan objekt; styla den med highlightClassName.
Objekten kommer från items, nycklarna från getKey och etiketterna från renderItem.
hover får den att följa pekaren och återvända till urvalet.
Objekten kan radbrytas på flera rader och markeringen följer dem.
Inläsning av typsnitt och layoutändringar mäts om automatiskt.

Använd den för

Sidflikar.
Ett filterfält.
En segmenterad kontroll i ett inställningsformulär.

Props

Prop	Typ	Standard	Beskrivning
`items`	`readonly T[]`	`—`krävs	Din dataarray.
`value`	`key \| null`	`—`krävs	Nyckeln för det markerade objektet; `null` döljer markeringen.
`onValueChange`	`(key, item) => void`		Körs med nyckeln och objektet när ett objekt trycks.
`getKey`	`(item) => string \| number`	`item.id`	Returnerar en unik, stabil nyckel för ett objekt. Standard är `item.id`, eller själva objektet för strängar och tal.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Ritar ett objekt; får veta om det är valt.
`hover`	`boolean`	`false`	Följ pekaren över objekt och återgå till `value` när den lämnar (webb).
`itemAs`	`element`	`'button'`	Elementet för varje objekt.
`itemClassName`	`string`		Klass för varje objektelement; `itemStyle` sätter dess inline-style.
`highlightClassName`	`string`		Klass för markeringen; `highlightStyle` sätter dess inline-style.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.

Andra props går till det renderade elementet, så className, style och händelsehanterare fungerar som vanligt.

Webb och React Native

Varje objekt renderas som standard som button (itemAs ändrar det); ett tryck anropar onValueChange(key, item).

I React Native är objekten Pressable; positionen körs på native driver och storleken på en nästlad vy som styrs av JavaScript.