MotionHighlight

Zavihki, segmentirani kontrolniki ali navigacija iz podatkov z enim poudarkom, ki potuje do izbire.

SpletReact NativeIzbira in listanje

Preizkusite

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Najkrajša uporaba

Tabs.jsx

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

Kaj uredi namesto vas

En poudarek se premika in spreminja velikost med elementi; oblikujte ga s highlightClassName.
Elementi pridejo iz items, ključi iz getKey, oznake pa iz renderItem.
hover poskrbi, da sledi kazalcu in se vrne k izbiri.
Elementi se lahko prelomijo v več vrstic in poudarek jim sledi.
Nalaganje pisav in spremembe postavitve se samodejno izmerijo znova.

Uporabite jo za

Zavihki strani.
Vrstica filtrov.
Segmentiran kontrolnik v obrazcu z nastavitvami.

Props

Prop	Tip	Privzeto	Opis
`items`	`readonly T[]`	`—`obvezno	Vaše polje podatkov.
`value`	`key \| null`	`—`obvezno	Ključ poudarjenega elementa; `null` skrije poudarek.
`onValueChange`	`(key, item) => void`		Se izvede s ključem in elementom, ko je element pritisnjen.
`getKey`	`(item) => string \| number`	`item.id`	Vrne enoličen, stabilen ključ za element. Privzeto `item.id` ali sam element za nize in števila.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Nariše element; prejme, ali je izbran.
`hover`	`boolean`	`false`	Sledi kazalcu nad elementi in se ob odhodu vrne k `value` (splet).
`itemAs`	`element`	`'button'`	Element za vsak element seznama.
`itemClassName`	`string`		Razred za vsak element; `itemStyle` nastavi njegov vrstični slog.
`highlightClassName`	`string`		Razred za poudarek; `highlightStyle` nastavi njegov vrstični slog.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.

Druge props gredo upodobljenemu elementu, zato className, style in obravnave dogodkov delujejo kot običajno.

Splet in React Native

Vsak element se privzeto upodobi kot button (itemAs to spremeni); pritisk nanj pokliče onValueChange(key, item).

V React Nativu so elementi Pressable; položaj teče z domorodnim driverjem, velikost pa na gnezdenem pogledu, ki ga poganja JavaScript.