MotionPager

Sveipbare sider fra data: introduksjon, karuseller og fanepaneler.

WebReact NativeUtvalg og sider

Prøv det

Forbereder eksempelet …

JavaScript er slått av. Koden nedenfor er hele eksempelet.

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 bruk

Onboarding.jsx

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

Dette tar den seg av

Sidene følger sveip og musedrag, gjør motstand forbi endene og lander med slipphastigheten din.
Et raskt snert bytter alltid side, og én bevegelse bytter aldri mer enn én.
Vannrett rulling med styreplate bytter også side, og momentumhalen ignoreres.
Piltaster, Home og End fungerer når pageren har fokus, og loddrett rulling fungerer fortsatt.
Andre sider enn den aktive er inerte.

Bruk den til

En introduksjonsflyt.
En bildekarusell.
Sveipbare fanepaneler sammen med MotionHighlight.

Props

Prop	Type	Standard	Beskrivelse
`items`	`readonly T[]`	`—`påkrevd	Data-arrayen din.
`index`	`number`		Siden som vises. Utelat den for å la pageren holde styr på sin egen.
`defaultIndex`	`number`	`0`	Startside når `index` ikke er kontrollert.
`onIndexChange`	`(index, item) => void`		Kjører med indeks og element så snart et sveip, en tast eller en hjulbevegelse lander.
`getKey`	`(item) => string \| number`	`item.id`	Returnerer en unik, stabil nøkkel for et element. Standard er `item.id`, eller selve elementet for strenger og tall.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Tegner en side; får indeksen og om den er aktiv.
`gap`	`number`	`0`	Avstand mellom sider i piksler.
`itemClassName`	`string`		Klasse for hvert punkts element; `itemStyle` setter inline-stilen.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.

Andre props går til det renderte elementet, så className, style og hendelseshåndterere fungerer som vanlig.

Web og React Native

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

Den samme komponenten og de samme props fungerer i React Native.

Brukt i disse eksemplene

BildefeedSveip gjennom bilder, hopp med miniatyrer, åpne et hvilket som helst bilde i fullskjerm og dra opp detaljene.MotionPagerMotionHighlightMotionZoomMotionSheet