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