MotionHighlight

Καρτέλες, τμηματικοί έλεγχοι ή πλοήγηση από δεδομένα, με μία επισήμανση που ταξιδεύει στην επιλογή.

WebReact NativeΕπιλογή και σελιδοποίηση

Δοκιμάστε το

Προετοιμασία παραδείγματος…

Η JavaScript είναι απενεργοποιημένη. Ο κώδικας παρακάτω είναι το πλήρες παράδειγμα.

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

Η πιο σύντομη χρήση

Tabs.jsx

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

Τι αναλαμβάνει για εσάς

Μία επισήμανση μετακινείται και αλλάζει μέγεθος ανάμεσα στα στοιχεία· δώστε της στυλ με το highlightClassName.
Τα στοιχεία έρχονται από το items, τα keys από το getKey και οι ετικέτες από το renderItem.
Το hover την κάνει να ακολουθεί τον δείκτη και να επιστρέφει στην επιλογή.
Τα στοιχεία μπορούν να αναδιπλώνονται σε πολλές σειρές και η επισήμανση τα ακολουθεί.
Η φόρτωση γραμματοσειρών και οι αλλαγές διάταξης ξαναμετρώνται αυτόματα.

Χρησιμοποιήστε το για

Καρτέλες σελίδας.
Μια μπάρα φίλτρων.
Ένας τμηματικός έλεγχος σε φόρμα ρυθμίσεων.

Props

Prop	Τύπος	Προεπιλογή	Περιγραφή
`items`	`readonly T[]`	`—`υποχρεωτικό	Ο πίνακας δεδομένων σας.
`value`	`key \| null`	`—`υποχρεωτικό	Key του επισημασμένου στοιχείου· το `null` κρύβει την επισήμανση.
`onValueChange`	`(key, item) => void`		Εκτελείται με το key και το στοιχείο όταν πατηθεί ένα στοιχείο.
`getKey`	`(item) => string \| number`	`item.id`	Επιστρέφει μοναδικό, σταθερό key για ένα στοιχείο. Από προεπιλογή `item.id`, ή το ίδιο το στοιχείο για συμβολοσειρές και αριθμούς.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Σχεδιάζει ένα στοιχείο· λαμβάνει αν είναι επιλεγμένο.
`hover`	`boolean`	`false`	Ακολουθεί τον δείκτη πάνω από τα στοιχεία και επιστρέφει στο `value` όταν φύγει (web).
`itemAs`	`element`	`'button'`	Το στοιχείο για κάθε στοιχείο λίστας.
`itemClassName`	`string`		Κλάση για κάθε στοιχείο λίστας· το `itemStyle` ορίζει το inline στυλ του.
`highlightClassName`	`string`		Κλάση για την επισήμανση· το `highlightStyle` ορίζει το inline στυλ της.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.

Τα υπόλοιπα props πηγαίνουν στο στοιχείο που αποδίδεται, οπότε τα className, style και οι χειριστές συμβάντων λειτουργούν κανονικά.

Web και React Native

Κάθε στοιχείο αποδίδεται από προεπιλογή ως button (το itemAs το αλλάζει)· το πάτημά του καλεί το onValueChange(key, item).

Στο React Native τα στοιχεία είναι Pressable· η θέση τρέχει στον native driver και το μέγεθος σε μια εμφωλευμένη προβολή που οδηγείται από JavaScript.