MotionPager

Svepbara sidor från data: introduktion, karuseller och flikpaneler.

WebbReact NativeUrval och sidor

Prova

Förbereder exemplet…

JavaScript är avstängt. Koden nedan är hela exemplet.

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

Kortaste användning

Onboarding.jsx

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

Det här sköter den åt dig

Sidorna följer svep och musdragningar, gör motstånd förbi ändarna och landar med din släpphastighet.
En snabb snärt byter alltid sida, och en gest byter aldrig mer än en.
Horisontell scrollning med styrplatta byter också sida, och dess momentumsvans ignoreras.
Piltangenter, Home och End fungerar när pagern har fokus, och vertikal scrollning fungerar fortfarande.
Andra sidor än den aktiva är inerta.

Använd den för

Ett introduktionsflöde.
En fotokarusell.
Svepbara flikpaneler ihop med MotionHighlight.

Props

Prop	Typ	Standard	Beskrivning
`items`	`readonly T[]`	`—`krävs	Din dataarray.
`index`	`number`		Sidan som visas. Utelämna den för att låta pagern hålla reda på sin egen.
`defaultIndex`	`number`	`0`	Startsida när `index` inte är kontrollerat.
`onIndexChange`	`(index, item) => void`		Körs med index och objekt så fort ett svep, en tangent eller en hjulgest landar.
`getKey`	`(item) => string \| number`	`item.id`	Returnerar en unik, stabil nyckel för ett objekt. Standard är `item.id`, eller själva objektet för strängar och tal.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Ritar en sida; får dess index och om den är aktiv.
`gap`	`number`	`0`	Avstånd mellan sidor i pixlar.
`itemClassName`	`string`		Klass för varje objektelement; `itemStyle` sätter dess inline-style.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.

Andra props går till det renderade elementet, så className, style och händelsehanterare fungerar som vanligt.

Webb och React Native

index kan vara kontrollerat (onIndexChange(index, item) rapporterar varje landning) eller lämnas till pagern med defaultIndex.

Samma komponent och props fungerar i React Native.

Används i de här exemplen

FotoflödeSvep mellan foton, hoppa med miniatyrer, öppna valfritt foto i helskärm och dra upp dess detaljer.MotionPagerMotionHighlightMotionZoomMotionSheet