MotionPager

Strani s potegom iz podatkov: uvajanje, vrtiljaki in plošče zavihkov.

SpletReact NativeIzbira in listanje

Preizkusite

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Najkrajša uporaba

Onboarding.jsx

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

Kaj uredi namesto vas

Strani sledijo potegom in vlečenju z miško, se upirajo za koncema in se umirijo s hitrostjo vašega spusta.
Hiter poteg vedno obrne stran, ena gesta pa nikoli ne obrne več kot ene.
Vodoravno drsenje po sledilni ploščici prav tako obrača strani, njegov zagonski rep pa se prezre.
Puščične tipke, Home in End delujejo, ko je listanje v fokusu, navpično drsenje pa deluje naprej.
Strani razen aktivne so inertne.

Uporabite jo za

Potek uvajanja.
Vrtiljak fotografij.
Plošče zavihkov s potegom v paru z MotionHighlight.

Props

Prop	Tip	Privzeto	Opis
`items`	`readonly T[]`	`—`obvezno	Vaše polje podatkov.
`index`	`number`		Prikazana stran. Izpustite, da listanje vodi svojo.
`defaultIndex`	`number`	`0`	Začetna stran, ko `index` ni nadzorovan.
`onIndexChange`	`(index, item) => void`		Se izvede z indeksom in elementom, takoj ko se poteg, tipka ali gesta s kolescem umiri.
`getKey`	`(item) => string \| number`	`item.id`	Vrne enoličen, stabilen ključ za element. Privzeto `item.id` ali sam element za nize in števila.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Nariše stran; prejme njen indeks in ali je aktivna.
`gap`	`number`	`0`	Razmik med stranmi v pikslih.
`itemClassName`	`string`		Razred za vsak element; `itemStyle` nastavi njegov vrstični slog.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.

Druge props gredo upodobljenemu elementu, zato className, style in obravnave dogodkov delujejo kot običajno.

Splet in React Native

index je lahko nadzorovan (onIndexChange(index, item) javi vsako umiritev) ali prepuščen listanju z defaultIndex.

Ista komponenta in props delujejo v React Nativu.

Uporabljeno v teh primerih

Vir fotografijListajte po fotografijah s potegom, skačite s sličicami, odprite katero koli fotografijo na celoten zaslon in povlecite navzgor njene podrobnosti.MotionPagerMotionHighlightMotionZoomMotionSheet