MotionPager

Veriden kaydırılabilir sayfalar: tanıtım, karuseller ve sekme panelleri.

WebReact NativeSeçim ve sayfalama

Deneyin

Örnek hazırlanıyor…

JavaScript kapalı. Aşağıdaki kod örneğin tamamıdır.

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

En kısa kullanım

Onboarding.jsx

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

Sizin yerinize hallettikleri

Sayfalar kaydırmaları ve fare sürüklemelerini izler, uçların ötesinde direnir ve bırakma hızınızla yerleşir.
Hızlı bir fiske her zaman bir sayfa çevirir ve tek hareket asla birden fazla çevirmez.
Yatay dokunmatik yüzey kaydırması da sayfa çevirir ve momentum kuyruğu yok sayılır.
Sayfa çevirici odaktayken ok tuşları, Home ve End çalışır ve dikey kaydırma çalışmaya devam eder.
Etkin olan dışındaki sayfalar etkisizdir.

Şunlar için kullanın

Bir tanıtım akışı.
Bir fotoğraf karuseli.
MotionHighlight ile eşleştirilmiş kaydırılabilir sekme panelleri.

Props

Prop	Tip	Varsayılan	Açıklama
`items`	`readonly T[]`	`—`zorunlu	Veri diziniz.
`index`	`number`		Gösterilen sayfa. Sayfa çeviricinin kendi sayfasını tutması için boş bırakın.
`defaultIndex`	`number`	`0`	`index` denetimli değilken başlangıç sayfası.
`onIndexChange`	`(index, item) => void`		Bir kaydırma, tuş ya da tekerlek hareketi yerleşir yerleşmez index ve öğeyle çalışır.
`getKey`	`(item) => string \| number`	`item.id`	Bir öğe için benzersiz, kararlı bir key döndürür. Varsayılan `item.id`, dize ve sayılar için öğenin kendisidir.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Bir sayfayı çizer; index'ini ve etkin olup olmadığını alır.
`gap`	`number`	`0`	Sayfalar arasındaki boşluk, piksel.
`itemClassName`	`string`		Her öğe elemanı için class; `itemStyle` satır içi stilini ayarlar.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.

Diğer props render edilen öğeye gider; böylece className, style ve olay işleyiciler her zamanki gibi çalışır.

Web ve React Native

index denetimli olabilir (onIndexChange(index, item) her yerleşmeyi bildirir) ya da defaultIndex ile sayfa çeviriciye bırakılabilir.

Aynı bileşen ve props React Native'de çalışır.

Bu örneklerde kullanıldı

Fotoğraf akışıFotoğraflar arasında kaydırın, küçük resimlerle atlayın, herhangi bir fotoğrafı tam ekran açın ve ayrıntılarını yukarı çekin.MotionPagerMotionHighlightMotionZoomMotionSheet