MotionPager

Braukiami puslapiai iš duomenų: įvadas, karuselės ir skirtukų skydeliai.

ŽiniatinklisReact NativePasirinkimas ir puslapiavimas

Išbandykite

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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

Trumpiausias naudojimas

Onboarding.jsx

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

Ką jis sutvarko už jus

Puslapiai seka braukimus ir pelės vilkimus, priešinasi už galų ir nusistovi pagal jūsų paleidimo greitį.
Brūkštelėjimas visada perverčia puslapį, o vienas gestas niekada neperverčia daugiau nei vieno.
Horizontalus jutiklinio kilimėlio slinkimas taip pat verčia puslapius, o jo inercijos uodega ignoruojama.
Rodyklių klavišai, Home ir End veikia, kai puslapiuotuvas fokusuotas, o vertikalus slinkimas toliau veikia.
Kiti nei aktyvus puslapiai yra neaktyvūs.

Naudokite jį

Įvado eiga.
Nuotraukų karuselė.
Braukiami skirtukų skydeliai kartu su MotionHighlight.

Props

Prop	Tipas	Numatytoji	Aprašymas
`items`	`readonly T[]`	`—`privaloma	Jūsų duomenų masyvas.
`index`	`number`		Rodomas puslapis. Praleiskite, kad puslapiuotuvas jį valdytų pats.
`defaultIndex`	`number`	`0`	Pradinis puslapis, kai `index` nevaldomas.
`onIndexChange`	`(index, item) => void`		Vykdomas su indeksu ir elementu, vos nusistovi braukimas, klavišas ar ratuko gestas.
`getKey`	`(item) => string \| number`	`item.id`	Grąžina unikalų, stabilų elemento key. Pagal numatymą `item.id` arba pats elementas eilutėms ir skaičiams.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Nupiešia puslapį; gauna jo indeksą ir ar jis aktyvus.
`gap`	`number`	`0`	Tarpas tarp puslapių pikseliais.
`itemClassName`	`string`		Klasė kiekvienam elementui; `itemStyle` nustato jo vidinį stilių.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.

Kiti props perduodami atvaizduojamam elementui, todėl className, style ir įvykių apdorojimo funkcijos veikia kaip įprastai.

Žiniatinklis ir React Native

index gali būti valdomas (onIndexChange(index, item) praneša apie kiekvieną nusistovėjimą) arba paliktas puslapiuotuvui su defaultIndex.

Tas pats komponentas ir tie patys props veikia React Native.

Naudojama šiuose pavyzdžiuose

Nuotraukų srautasBraukite per nuotraukas, šokinėkite miniatiūromis, atidarykite bet kurią nuotrauką per visą ekraną ir ištraukite jos informaciją.MotionPagerMotionHighlightMotionZoomMotionSheet