جابه‌جایی صفحه

page-slideانیمیشن

بین چند صفحه (فهرست و جزئیات، قدم اول و دوم) جابه‌جا میشه؛ صفحه‌ی بعدی در فارسی از چپ می‌آد و قبلی به راست میره.

نصب

  1. با CLI

    اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.

    $ npx vibefarsi add page-slide
  2. نصب دستی

    محتوای تب «کد» را در components/animations/page-slide.tsx بگذارید.

    $ npm i lucide-react
    کپی کل فایلregistry json

استفاده

usage.tsx
1import { PageSlide } from "@/components/animations/page-slide"23<PageSlide index={step} pages={[<List key="l" />, <Detail key="d" />]} />

پراپ‌ها

پراپنوعپیش‌فرضتوضیح
indexnumber-شماره‌ی صفحه‌ی فعال.
pagesReactNode[]-صفحه‌ها به ترتیب.
distancenumber12پیکسل جابه‌جایی.

نکته‌ها

  • صفحه‌ها در یک خانه‌ی grid روی هم می‌شینن، پس ارتفاع ظرف همیشه به اندازه‌ی بلندترین صفحه‌ست و لازم نیست خودتون ارتفاع بدید.