MotionPager

Σελίδες με σάρωση από δεδομένα: εισαγωγή, καρουζέλ και πάνελ καρτελών.

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

Δοκιμάστε το

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

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

App.jsx

import { useState } from 'react';
import { MotionHighlight, MotionPager, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const slides = [
  { id: 'welcome', title: 'Welcome', text: 'Swipe, drag or use the arrow keys.', tone: 'deep' },
  { id: 'data', title: 'Your data', text: 'Pages come from an array.', tone: 'forest' },
  { id: 'flick', title: 'Flick', text: 'A quick flick always turns one page.', tone: 'mint' },
  { id: 'done', title: 'Done', text: 'The index is yours to control.', tone: 'light' },
];

export default function App({ gap = 16, spring = 'default' }) {
  const [page, setPage] = useState(0);
  // "default" is not a preset: undefined keeps the component's own motion.
  const transition = motionTokens.spring[spring];

  return (
    <div className="stage">
      <MotionPager
        className="pager"
        items={slides}
        index={page}
        onIndexChange={setPage}
        gap={gap}
        transition={transition}
        renderItem={(slide) => (
          <article className={`slide ${slide.tone}`}>
            <h2>{slide.title}</h2>
            <p>{slide.text}</p>
          </article>
        )}
      />
      <div className="controls">
        <button onClick={() => setPage(Math.max(0, page - 1))} disabled={page === 0}>
          Back
        </button>
        <MotionHighlight
          className="dots"
          itemClassName="dot"
          highlightClassName="dot-active"
          items={slides}
          value={slides[page].id}
          transition={transition}
          onValueChange={(key) => setPage(slides.findIndex((slide) => slide.id === key))}
          renderItem={(slide, { index }) => <span className="dot-number">{index + 1}</span>}
        />
        <button
          onClick={() => setPage(Math.min(slides.length - 1, page + 1))}
          disabled={page === slides.length - 1}
        >
          Next
        </button>
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 20px;
}

.pager {
  border-radius: 20px;
}

.slide {
  display: grid;
  align-content: end;
  gap: 6px;
  height: 240px;
  padding: 24px;
  border-radius: 20px;
  user-select: none;
}

.slide h2 {
  margin: 0;
  font:
    800 30px/1.1 system-ui,
    sans-serif;
}

.slide p {
  margin: 0;
}

.deep {
  background: #0e2e24;
  color: #fff;
}

.forest {
  background: #176b52;
  color: #fff;
}

.mint {
  background: #43c58f;
  color: #0e2e24;
}

.light {
  background: #eaf6f0;
  color: #0e2e24;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.controls > button {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 15px system-ui,
    sans-serif;
  cursor: pointer;
}

.controls > button:disabled {
  opacity: 0.4;
}

.dots {
  display: flex;
  min-width: 0;
  gap: 4px;
}

/* On a narrow phone the page dots shrink (never below 28px); Back and Next keep their size. */
.dot {
  flex: 0 1 36px;
  min-width: 28px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.dot-number {
  font:
    600 13px system-ui,
    sans-serif;
  color: #5b616b;
}

.dot-active {
  border-radius: 50%;
  background: #eaf6f0;
  box-shadow: inset 0 0 0 2px #176b52;
}

@media (max-width: 340px) {
  .controls {
    gap: 8px;
  }

  .controls > button {
    padding: 0 14px;
  }
}

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

Onboarding.jsx

<MotionPager
  items={slides}
  index={page}
  onIndexChange={setPage}
  gap={16}
  renderItem={(slide) => <Slide slide={slide} />}
/>;

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

Οι σελίδες ακολουθούν σαρώσεις και συρσίματα ποντικιού, αντιστέκονται πέρα από τα άκρα και σταθεροποιούνται με την ταχύτητα απελευθέρωσης.
Ένα γρήγορο τίναγμα γυρίζει πάντα σελίδα, και μία χειρονομία δεν γυρίζει ποτέ περισσότερες από μία.
Η οριζόντια κύλιση στο trackpad γυρίζει επίσης σελίδες, και η ουρά της ορμής της αγνοείται.
Τα πλήκτρα βέλους, Home και End λειτουργούν όταν ο pager έχει εστίαση, και η κάθετη κύλιση συνεχίζει να λειτουργεί.
Οι σελίδες εκτός της ενεργής είναι ανενεργές.

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

Μια ροή εισαγωγής.
Ένα καρουζέλ φωτογραφιών.
Πάνελ καρτελών με σάρωση σε συνδυασμό με MotionHighlight.

Props

Prop	Τύπος	Προεπιλογή	Περιγραφή
`items`	`readonly T[]`	`—`υποχρεωτικό	Ο πίνακας δεδομένων σας.
`index`	`number`		Η σελίδα που εμφανίζεται. Παραλείψτε το για να τη διαχειρίζεται ο pager.
`defaultIndex`	`number`	`0`	Σελίδα εκκίνησης όταν το `index` δεν ελέγχεται.
`onIndexChange`	`(index, item) => void`		Εκτελείται με το index και το στοιχείο μόλις σταθεροποιηθεί μια σάρωση, πλήκτρο ή χειρονομία τροχού.
`getKey`	`(item) => string \| number`	`item.id`	Επιστρέφει μοναδικό, σταθερό key για ένα στοιχείο. Από προεπιλογή `item.id`, ή το ίδιο το στοιχείο για συμβολοσειρές και αριθμούς.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Σχεδιάζει μια σελίδα· λαμβάνει το index της και αν είναι ενεργή.
`gap`	`number`	`0`	Κενό ανάμεσα στις σελίδες σε pixels.
`itemClassName`	`string`		Κλάση για κάθε στοιχείο λίστας· το `itemStyle` ορίζει το inline στυλ του.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.

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

Web και React Native

Το index μπορεί να ελέγχεται (το onIndexChange(index, item) αναφέρει κάθε σταθεροποίηση) ή να αφήνεται στον pager με defaultIndex.

Το ίδιο component και τα ίδια props λειτουργούν στο React Native.

Χρησιμοποιείται σε αυτά τα παραδείγματα

Ροή φωτογραφιώνΣαρώστε φωτογραφίες, πηδήξτε με μικρογραφίες, ανοίξτε οποιαδήποτε φωτογραφία σε πλήρη οθόνη και τραβήξτε προς τα πάνω τις λεπτομέρειές της.MotionPagerMotionHighlightMotionZoomMotionSheet