MotionPager

Pyyhkäistävät sivut datasta: perehdytys, karusellit ja välilehtipaneelit.

WebReact NativeValinta ja sivutus

Kokeile

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

Lyhin käyttö

Onboarding.jsx

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

Mitä se hoitaa puolestasi

Sivut seuraavat pyyhkäisyjä ja hiiren vetoja, vastustavat päiden yli ja asettuvat irrotusnopeutesi mukaan.
Näpäytys kääntää aina sivun, eikä yksi ele koskaan käännä enempää kuin yhtä.
Vaakasuuntainen kosketuslevyvieritys kääntää myös sivuja, ja sen liikemäärän häntä ohitetaan.
Nuolinäppäimet, Home ja End toimivat, kun sivuttaja on kohdistettu, ja pystyvieritys toimii edelleen.
Muut kuin aktiivinen sivu ovat passiivisia.

Käytä sitä

Perehdytyskulku.
Valokuvakaruselli.
Pyyhkäistävät välilehtipaneelit yhdessä MotionHighlight-komponentin kanssa.

Props

Prop	Tyyppi	Oletus	Kuvaus
`items`	`readonly T[]`	`—`pakollinen	Datataulukkosi.
`index`	`number`		Näytettävä sivu. Jätä pois, jotta sivuttaja pitää omansa.
`defaultIndex`	`number`	`0`	Aloitussivu, kun `index` ei ole ohjattu.
`onIndexChange`	`(index, item) => void`		Suoritetaan indeksin ja kohteen kanssa heti, kun pyyhkäisy, näppäin tai rullaele asettuu.
`getKey`	`(item) => string \| number`	`item.id`	Palauttaa kohteelle yksilöllisen, vakaan keyn. Oletuksena `item.id`, merkkijonoille ja luvuille kohde itse.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Piirtää sivun; saa sen indeksin ja tiedon, onko se aktiivinen.
`gap`	`number`	`0`	Sivujen välinen tila pikseleinä.
`itemClassName`	`string`		Luokka kullekin kohde-elementille; `itemStyle` asettaa sen inline-tyylin.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.

Muut props-arvot menevät renderöidylle elementille, joten className, style ja tapahtumankäsittelijät toimivat tavalliseen tapaan.

Web ja React Native

index voi olla ohjattu (onIndexChange(index, item) raportoi jokaisen asettumisen) tai jätetty sivuttajalle defaultIndex-arvolla.

Sama komponentti ja samat props-arvot toimivat React Nativessa.

Käytetty näissä esimerkeissä

KuvasyötePyyhkäise kuvien läpi, hyppää pikkukuvilla, avaa mikä tahansa kuva koko näytölle ja vedä sen tiedot ylös.MotionPagerMotionHighlightMotionZoomMotionSheet