MotionHighlight

Tab, controlli segmentati o navigazione a partire dai dati, con un’unica evidenziazione che si sposta sulla selezione.

WebReact NativeSelezione e pagine

Provalo

Preparazione dell’esempio…

JavaScript è disattivato. Il codice qui sotto è l’esempio completo.

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

L’uso più breve

Tabs.jsx

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

Di che cosa si occupa al posto tuo

Un’unica evidenziazione si sposta e si ridimensiona tra gli elementi; stilizzala con highlightClassName.
Gli elementi vengono da items, le key da getKey e le etichette da renderItem.
hover le fa seguire il puntatore e tornare alla selezione.
Gli elementi possono andare a capo su più righe e l’evidenziazione li segue.
Il caricamento dei font e i cambi di layout vengono rimisurati in automatico.

Usalo per

Le tab di una pagina.
Una barra di filtri.
Un controllo segmentato in un modulo di impostazioni.

Props

Prop	Tipo	Predefinito	Descrizione
`items`	`readonly T[]`	`—`obbligatoria	Il tuo array di dati.
`value`	`key \| null`	`—`obbligatoria	Key dell’elemento evidenziato; `null` nasconde l’evidenziazione.
`onValueChange`	`(key, item) => void`		Viene eseguito con la key e l’elemento quando un elemento viene premuto.
`getKey`	`(item) => string \| number`	`item.id`	Restituisce una key unica e stabile per un elemento. Di default è `item.id`, oppure l’elemento stesso per stringhe e numeri.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Disegna un elemento; riceve se è selezionato.
`hover`	`boolean`	`false`	Segue il puntatore sugli elementi e torna a `value` quando esce (web).
`itemAs`	`element`	`'button'`	L’elemento per ogni voce.
`itemClassName`	`string`		Classe per l’elemento di ogni voce; `itemStyle` imposta il suo stile inline.
`highlightClassName`	`string`		Classe per l’evidenziazione; `highlightStyle` imposta il suo stile inline.
`transition`	`Transition`	`spring`	Una curva di timing `{ duration, easing }` o una molla `{ tempo: 'spring', spring }`. Le molle conservano lo slancio quando vengono interrotte.

Le altre props vanno all’elemento renderizzato, quindi className, style e gli event handler funzionano come sempre.

Web e React Native

Ogni elemento viene renderizzato come button di default (itemAs lo cambia); premerlo chiama onValueChange(key, item).

Su React Native gli elementi sono Pressable; la posizione gira sul driver nativo e la dimensione su una view annidata guidata da JavaScript.