Revealv1.0.0
بخشی که زیرِ دید است، وقتی کاربر به آن رسید با کمی جابه‌جایی جا می‌افتد. آنچه هنگامِ بارگذاری در دید است دست نمی‌خورد، پس صفحه چشمک نمی‌زند؛ بدونِ جاوااسکریپت یا با prefers-reduced-motion همه‌چیز از اول دیده می‌شود.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/reveal.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/reveal.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/reveal.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/reveal.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { Reveal } from "@/components/ui/reveal"
<Reveal>
<section>…</section>
</Reveal>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
یک div (یا با asChild خودِ فرزند) با data-state: در شروع idle است و دیده می‌شود؛ اگر زیرِ دید باشد pending می‌شود و با IntersectionObserver به shown می‌رسد. حرکت فقط یک بار است.
دسترس‌پذیری
- با prefers-reduced-motion هیچ حرکتی اجرا نمی‌شود و محتوا از اول دیده می‌شود.
- محتوا همیشه در DOM است؛ صفحه‌خوان و موتورِ جست‌وجو آن را بی‌درنگ می‌خوانند.
- بالای صفحه هرگز پنهان نمی‌شود، پس اولین نقاشیِ صفحه کامل است.
مرجع API
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| delay | number | 0 | تأخیر به میلی‌ثانیه برای ورودِ پله‌پله. |
| from | "below" | "start" | "none" | "below" | جهتِ حرکت؛ none فقط محوشدنِ ورود است. |
| asChild | boolean | false | رفتار را روی فرزند می‌گذارد، بدونِ div اضافه. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
بخش‌های لندینگ با کارت‌های پله‌پله
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| بخش‌های لندینگ با کارت‌های پله‌پله | ویژگی‌ها، مراحل، نظرِ مشتری |
دستورالعمل استفاده
برای بخش‌ها، نه هر جزء
انجام بده
سرِ بخش‌ها و ردیفِ کارت‌ها در لندینگ؛ کارت‌ها با delay پله‌پله (۸۰ تا ۱۲۰ میلی‌ثانیه).
انجام نده
فرم، جدول و محتوای داشبورد را متحرک نکنید؛ کاربر برای کار آمده، نه تماشا.