جابهجایی صفحه
page-slideانیمیشنبین چند صفحه (فهرست و جزئیات، قدم اول و دوم) جابهجا میشه؛ صفحهی بعدی در فارسی از چپ میآد و قبلی به راست میره.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add page-slideنصب دستی
محتوای تب «کد» را در
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" />]} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| index | number | - | شمارهی صفحهی فعال. |
| pages | ReactNode[] | - | صفحهها به ترتیب. |
| distance | number | 12 | پیکسل جابهجایی. |
نکتهها
- صفحهها در یک خانهی grid روی هم میشینن، پس ارتفاع ظرف همیشه به اندازهی بلندترین صفحهست و لازم نیست خودتون ارتفاع بدید.