MotionPager

Swipebare sider fra data: onboarding, karruseller og fanepaneler.

WebReact NativeValg og sider

Prøv det

Forbereder eksemplet…

JavaScript er slået fra. Koden nedenfor er hele eksemplet.

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

Korteste brug

Onboarding.jsx

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

Det klarer den for dig

Siderne følger swipes og musetræk, yder modstand forbi enderne og lander med din slip-hastighed.
Et hurtigt svirp skifter altid side, og én gestus skifter aldrig mere end én.
Vandret scroll med pegeplade skifter også side, og dens momentumhale ignoreres.
Piletaster, Home og End virker, når pageren har fokus, og lodret scroll virker stadig.
Andre sider end den aktive er inerte.

Brug den til

Et onboarding-flow.
En fotokarrusel.
Swipebare fanepaneler sammen med MotionHighlight.

Props

Prop	Type	Standard	Beskrivelse
`items`	`readonly T[]`	`—`påkrævet	Dit data-array.
`index`	`number`		Den viste side. Udelad den for at lade pageren holde styr på sin egen.
`defaultIndex`	`number`	`0`	Startside, når `index` ikke er kontrolleret.
`onIndexChange`	`(index, item) => void`		Kører med indeks og element, så snart et swipe, en tast eller en hjulgestus lander.
`getKey`	`(item) => string \| number`	`item.id`	Returnerer en unik, stabil nøgle for et element. Standard er `item.id`, eller selve elementet for strenge og tal.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Tegner en side; får dens indeks, og om den er aktiv.
`gap`	`number`	`0`	Afstand mellem sider i pixels.
`itemClassName`	`string`		Klasse for hvert punkts element; `itemStyle` sætter dets inline-style.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.

Andre props går til det renderede element, så className, style og event handlers virker som normalt.

Web og React Native

index kan være kontrolleret (onIndexChange(index, item) melder hver landing) eller overlades til pageren med defaultIndex.

Den samme komponent og de samme props virker i React Native.

Brugt i disse eksempler

FotofeedSwipe gennem fotos, hop med miniaturer, åbn et vilkårligt foto i fuld skærm, og træk dets detaljer op.MotionPagerMotionHighlightMotionZoomMotionSheet