MotionPager

Halaman yang bisa digeser dari data: onboarding, carousel, dan panel tab.

WebReact NativePilihan dan halaman

Coba

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

Penggunaan terpendek

Onboarding.jsx

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

Yang ditanganinya untuk Anda

Halaman mengikuti geseran dan seretan mouse, menahan di luar ujung, dan berhenti sesuai kecepatan lepasan Anda.
Jentikan selalu membalik satu halaman, dan satu gestur tidak pernah membalik lebih dari satu.
Gulir trackpad horizontal juga membalik halaman, dan ekor momentumnya diabaikan.
Tombol panah, Home, dan End bekerja saat pager difokuskan, dan gulir vertikal tetap berfungsi.
Halaman selain yang aktif bersifat inert.

Gunakan untuk

Alur onboarding.
Carousel foto.
Panel tab yang bisa digeser, dipasangkan dengan MotionHighlight.

Props

Prop	Tipe	Bawaan	Deskripsi
`items`	`readonly T[]`	`—`wajib	Array data Anda.
`index`	`number`		Halaman yang ditampilkan. Kosongkan agar pager mengelolanya sendiri.
`defaultIndex`	`number`	`0`	Halaman awal saat `index` tidak dikendalikan.
`onIndexChange`	`(index, item) => void`		Berjalan dengan index dan item begitu geseran, tombol, atau gestur roda berhenti.
`getKey`	`(item) => string \| number`	`item.id`	Mengembalikan key yang unik dan stabil untuk sebuah item. Bawaannya `item.id`, atau item itu sendiri untuk string dan angka.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Menggambar halaman; menerima index-nya dan apakah halaman itu aktif.
`gap`	`number`	`0`	Jarak antarhalaman dalam piksel.
`itemClassName`	`string`		Class untuk setiap elemen item; `itemStyle` mengatur gaya inline-nya.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.

Semua props lain diteruskan ke elemen yang dirender, jadi className, style, dan event handler bekerja seperti biasa.

Web dan React Native

index bisa dikendalikan (onIndexChange(index, item) melaporkan setiap pemberhentian) atau diserahkan ke pager dengan defaultIndex.

Komponen dan props yang sama bekerja di React Native.

Dipakai di contoh-contoh ini

Feed fotoGeser foto, lompat dengan thumbnail, buka foto mana pun di layar penuh, dan tarik detailnya ke atas.MotionPagerMotionHighlightMotionZoomMotionSheet