MotionPager

ডেটা থেকে সোয়াইপযোগ্য পাতা: অনবোর্ডিং, ক্যারোসেল আর ট্যাব প্যানেল।

ওয়েবReact Nativeবাছাই আর পেজিং

চালিয়ে দেখুন

উদাহরণ প্রস্তুত হচ্ছে…

JavaScript বন্ধ আছে। নিচের কোডই পুরো উদাহরণ।

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

সবচেয়ে ছোট ব্যবহার

Onboarding.jsx

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

এটি আপনার হয়ে যা সামলায়

পাতা সোয়াইপ আর মাউস টানার সঙ্গে চলে, প্রান্তের পরে প্রতিরোধ করে আর আপনার ছেড়ে দেওয়ার গতিতে স্থির হয়।
ঝটকা সবসময় একটি পাতা ওল্টায়, আর একটি জেসচার কখনো একটির বেশি ওল্টায় না।
আনুভূমিক ট্র্যাকপ্যাড স্ক্রলও পাতা ওল্টায়, আর তার জড়তার লেজ উপেক্ষিত হয়।
পেজারে ফোকাস থাকলে অ্যারো কি, Home আর End কাজ করে, আর উল্লম্ব স্ক্রল চলতে থাকে।
সক্রিয়টি ছাড়া অন্য পাতা নিষ্ক্রিয়।

যেখানে ব্যবহার করবেন

অনবোর্ডিং প্রবাহ।
ছবির ক্যারোসেল।
MotionHighlight-এর সঙ্গে জোড়া সোয়াইপযোগ্য ট্যাব প্যানেল।

Props

Prop	টাইপ	ডিফল্ট	বিবরণ
`items`	`readonly T[]`	`—`আবশ্যক	আপনার ডেটা অ্যারে।
`index`	`number`		দেখানো পাতা। পেজারকে নিজেরটা রাখতে দিতে বাদ দিন।
`defaultIndex`	`number`	`0`	`index` নিয়ন্ত্রিত না হলে শুরুর পাতা।
`onIndexChange`	`(index, item) => void`		সোয়াইপ, কি বা হুইল জেসচার স্থির হওয়ামাত্র index আর আইটেম নিয়ে চলে।
`getKey`	`(item) => string \| number`	`item.id`	আইটেমের জন্য অনন্য, স্থির key ফেরত দেয়। ডিফল্ট `item.id`, বা স্ট্রিং ও সংখ্যার জন্য আইটেম নিজেই।
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	পাতা আঁকে; নিজের index আর সক্রিয় কি না তা পায়।
`gap`	`number`	`0`	পাতার মধ্যে পিক্সেলে ফাঁক।
`itemClassName`	`string`		প্রতিটি আইটেম এলিমেন্টের class; `itemStyle` তার inline স্টাইল ঠিক করে।
`transition`	`Transition`	`spring`	timing বক্ররেখা `{ duration, easing }` বা স্প্রিং `{ tempo: 'spring', spring }`। বাধা পেলে স্প্রিং নিজের গতি ধরে রাখে।

অন্য props রেন্ডার হওয়া এলিমেন্টে যায়, তাই className, style আর ইভেন্ট হ্যান্ডলার স্বাভাবিকভাবে কাজ করে।

ওয়েব আর React Native

index নিয়ন্ত্রিত হতে পারে (onIndexChange(index, item) প্রতিটি স্থিতি জানায়) বা defaultIndex দিয়ে পেজারের হাতে ছাড়া যায়।

একই কম্পোনেন্ট আর props React Native-এ কাজ করে।

এই উদাহরণগুলোতে ব্যবহৃত

ছবির ফিডছবি সোয়াইপ করুন, থাম্বনেইল দিয়ে লাফান, যেকোনো ছবি পুরো স্ক্রিনে খুলুন আর তার বিস্তারিত ওপরে টানুন।MotionPagerMotionHighlightMotionZoomMotionSheet