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

तुमच्यासाठी काय हाताळतो

पाने स्वाइप आणि माउस ओढण्याचे अनुसरण करतात, टोकांपलीकडे प्रतिकार करतात आणि तुमच्या सोडण्याच्या वेगाने स्थिरावतात.
झटका नेहमी एक पान उलटतो, आणि एक हावभाव कधीही एकापेक्षा जास्त उलटत नाही.
आडवे ट्रॅकपॅड स्क्रोलही पाने उलटते, आणि त्याची momentum शेपटी दुर्लक्षित केली जाते.
पेजरवर फोकस असताना बाण की, 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 style सेट करते.
`transition`	`Transition`	`spring`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', spring }`. spring व्यत्यय आल्यावर त्यांची गती राखतात.

इतर props रेंडर होणाऱ्या एलिमेंटकडे जातात, त्यामुळे className, style आणि इव्हेंट हँडलर नेहमीप्रमाणे चालतात.

वेब आणि React Native

index नियंत्रित करता येतो (onIndexChange(index, item) प्रत्येक स्थिरावणे कळवते) किंवा defaultIndex सह पेजरवर सोडता येतो.

तोच कंपोनंट आणि props React Native वर चालतात.

या उदाहरणांमध्ये वापरलेले

फोटो फीडफोटोंमधून स्वाइप करा, थंबनेलने उडी घ्या, कोणताही फोटो पूर्ण स्क्रीनवर उघडा आणि त्याचे तपशील वर ओढा.MotionPagerMotionHighlightMotionZoomMotionSheet