MotionPager

தரவிலிருந்து ஸ்வைப் செய்யக்கூடிய பக்கங்கள்: onboarding, carousel-கள், தாவல் பலகைகள்.

வலை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} />}
/>;

இது உங்களுக்காகக் கையாள்வது

பக்கங்கள் ஸ்வைப்புகளையும் சுட்டி இழுத்தல்களையும் பின்தொடர்கின்றன, முனைகளைத் தாண்டி எதிர்க்கின்றன, நீங்கள் விடும் வேகத்துடன் அமைகின்றன.
விரைவுச் சுண்டல் எப்போதும் ஒரு பக்கத்தைத் திருப்புகிறது; ஒரு சைகை ஒருபோதும் ஒன்றுக்கு மேல் திருப்புவதில்லை.
கிடைமட்ட trackpad உருட்டலும் பக்கங்களைத் திருப்புகிறது; அதன் momentum வால் புறக்கணிக்கப்படுகிறது.
pager focus-இல் இருக்கும்போது அம்புக்குறி விசைகள், Home, End இயங்குகின்றன; செங்குத்து உருட்டல் தொடர்ந்து இயங்குகிறது.
செயலில் உள்ளது தவிர மற்ற பக்கங்கள் செயலற்றவை.

இதற்குப் பயன்படுத்துங்கள்

Onboarding ஓட்டம்.
புகைப்பட carousel.
MotionHighlight உடன் இணைந்த ஸ்வைப் தாவல் பலகைகள்.

Props

Prop	வகை	இயல்புநிலை	விளக்கம்
`items`	`readonly T[]`	`—`கட்டாயம்	உங்கள் தரவு அரே.
`index`	`number`		காட்டப்படும் பக்கம். pager தானே வைத்திருக்க விட இதை விடுங்கள்.
`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 உடன் pager-இடம் விடலாம்.

அதே கம்போனென்டும் props-உம் React Native-இல் இயங்குகின்றன.

இந்த எடுத்துக்காட்டுகளில் பயன்படுத்தப்பட்டது

புகைப்பட feedபுகைப்படங்களை ஸ்வைப் செய்யுங்கள், thumbnail-கள் மூலம் தாவுங்கள், எந்தப் புகைப்படத்தையும் முழுத் திரையில் திறந்து அதன் விவரங்களை மேலே இழுங்கள்.MotionPagerMotionHighlightMotionZoomMotionSheet