MotionHighlight

Välilehdet, segmentoidut säätimet tai navigointi datasta, ja yksi korostus siirtyy valintaan.

WebReact NativeValinta ja sivutus

Kokeile

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

Lyhin käyttö

Tabs.jsx

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

Mitä se hoitaa puolestasi

Yksi korostus liikkuu ja muuttaa kokoaan kohteiden välillä; muotoile se highlightClassName-arvolla.
Kohteet tulevat items-arvosta, keyt getKey-funktiosta ja nimikkeet renderItem-funktiosta.
hover saa sen seuraamaan osoitinta ja palaamaan valintaan.
Kohteet voivat rivittyä useille riveille, ja korostus seuraa niitä.
Fonttien lataus ja asettelumuutokset mitataan uudelleen automaattisesti.

Käytä sitä

Sivun välilehdet.
Suodatinpalkki.
Segmentoitu säädin asetuslomakkeessa.

Props

Prop	Tyyppi	Oletus	Kuvaus
`items`	`readonly T[]`	`—`pakollinen	Datataulukkosi.
`value`	`key \| null`	`—`pakollinen	Korostetun kohteen key; `null` piilottaa korostuksen.
`onValueChange`	`(key, item) => void`		Suoritetaan keyn ja kohteen kanssa, kun kohdetta painetaan.
`getKey`	`(item) => string \| number`	`item.id`	Palauttaa kohteelle yksilöllisen, vakaan keyn. Oletuksena `item.id`, merkkijonoille ja luvuille kohde itse.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Piirtää kohteen; saa tiedon, onko se valittu.
`hover`	`boolean`	`false`	Seuraa osoitinta kohteiden yllä ja palaa poistuttaessa `value`-arvoon (web).
`itemAs`	`element`	`'button'`	Kunkin kohteen elementti.
`itemClassName`	`string`		Luokka kullekin kohde-elementille; `itemStyle` asettaa sen inline-tyylin.
`highlightClassName`	`string`		Luokka korostukselle; `highlightStyle` asettaa sen inline-tyylin.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.

Muut props-arvot menevät renderöidylle elementille, joten className, style ja tapahtumankäsittelijät toimivat tavalliseen tapaan.

Web ja React Native

Jokainen kohde renderöidään oletuksena button-elementtinä (itemAs muuttaa sen); sen painaminen kutsuu onValueChange(key, item).

React Nativessa kohteet ovat Pressable-elementtejä; sijainti kulkee natiivilla driverilla ja koko JavaScriptin ohjaamalla sisäkkäisellä näkymällä.