MotionPager

Pagini glisabile din date: onboarding, carusele și panouri de file.

WebReact NativeSelecție și paginare

Încercați

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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

Cea mai scurtă utilizare

Onboarding.jsx

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

Ce rezolvă în locul dumneavoastră

Paginile urmează glisările și tragerile cu mouse-ul, opun rezistență după capete și se așază cu viteza eliberării.
O mișcare bruscă întoarce întotdeauna o pagină, iar un gest nu întoarce niciodată mai mult de una.
Și derularea orizontală pe trackpad întoarce pagini, iar coada ei de inerție este ignorată.
Tastele săgeți, Home și End funcționează când pagerul are focus, iar derularea verticală continuă să meargă.
Paginile în afara celei active sunt inerte.

Folosiți-o pentru

Un flux de onboarding.
Un carusel de fotografii.
Panouri de file glisabile, în pereche cu MotionHighlight.

Props

Prop	Tip	Implicit	Descriere
`items`	`readonly T[]`	`—`obligatoriu	Tabloul cu datele dumneavoastră.
`index`	`number`		Pagina afișată. Omiteți-o ca pagerul să și-o gestioneze singur.
`defaultIndex`	`number`	`0`	Pagina de start când `index` nu este controlat.
`onIndexChange`	`(index, item) => void`		Rulează cu indexul și elementul imediat ce se așază o glisare, o tastă sau un gest de rotiță.
`getKey`	`(item) => string \| number`	`item.id`	Returnează un key unic și stabil pentru un element. Implicit `item.id` sau elementul însuși pentru șiruri și numere.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Desenează o pagină; primește indexul și dacă este activă.
`gap`	`number`	`0`	Spațiul dintre pagini, în pixeli.
`itemClassName`	`string`		Clasă pentru fiecare element din listă; `itemStyle` îi setează stilul inline.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.

Celelalte props merg la elementul randat, așa că className, style și handlerele de evenimente funcționează ca de obicei.

Web și React Native

index poate fi controlat (onIndexChange(index, item) raportează fiecare așezare) sau lăsat pagerului cu defaultIndex.

Aceeași componentă și aceleași props funcționează în React Native.

Folosită în aceste exemple

Flux de fotografiiGlisați printre fotografii, săriți cu miniaturi, deschideți orice fotografie pe tot ecranul și trageți în sus detaliile.MotionPagerMotionHighlightMotionZoomMotionSheet