Separatorv1.0.0
خطی افقی یا عمودی برای جدا کردن بخش‌های محتوا.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/separator.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/separator.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/separator.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/separator.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { Separator } from "@/components/ui/separator"
<Separator />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
محور variant سطح کنتراست خط را تعیین می‌کند، نه رنگ تازه: هر سه حالت روی توکن --border سوارند و فقط opacity فرق می‌کند، پس با تعویض برند یا جابه‌جایی بین تم روشن و تیره خودکار هماهنگ می‌مانند.
برای نشستن استایل‌ها روی یک عنصر دیگر به‌جای div (مثلاً hr برای معنای معنایی‌تر)، از asChild استفاده کنید.
دسترس‌پذیری
- به‌صورت پیش‌فرض decorative است و از درخت دسترس‌پذیری حذف می‌شود.
- اگر جداکننده معنای ساختاری دارد، decorative={false} بدهید تا نقش separator اعلام شود.
مرجع API
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | جهت جداکننده. |
| variant | "default" | "secondary" | "tertiary" | "default" | سطح کنتراست خط نسبت به پس‌زمینه؛ default پررنگ‌ترین و tertiary کم‌رنگ‌ترین. |
| decorative | boolean | true | حذف از درخت دسترس‌پذیری در حالت تزئینی. |
| asChild | boolean | false | رندر استایل‌ها روی فرزند مستقیم به‌جای تگ div. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
Variants
سه سطح کنتراست، هر سه بر پایهٔ همان توکن --border: default پررنگ‌ترین برای مرزهای اصلی، secondary برای مرز میانی و tertiary کم‌رنگ‌ترین برای خطوط فرعی داخل یک گروه.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Vertical
با orientation="vertical" داخل یک کانتینر flex با ارتفاع مشخص، خط بین آیتم‌های هم‌ردیف می‌نشیند؛ variant همان‌جا هم قابل تنظیم است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
With Content
برای جدا کردن ردیف‌های یک لیست، Separator را بین آیتم‌ها بگذارید نه بعد از آخرین مورد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
شخصی‌سازی با className
چون رنگ از --border می‌آید، برای یک خط برندی می‌توانید پس‌زمینه و ضخامت را مستقیم با className عوض کنید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
asChild
با asChild، استایل‌های Separator روی فرزند مستقیم می‌نشیند به‌جای رندر یک div تازه، مثلاً وقتی می‌خواهید عنصر زیرین hr باشد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| Variants | سه سطح کنتراست، هر سه بر پایهٔ همان توکن --border: default پررنگ‌ترین برای مرزهای اصلی، secondary برای مرز میانی و tertiary کم‌رنگ‌ترین برای خطوط فرعی داخل یک گروه. |
| Vertical | با orientation="vertical" داخل یک کانتینر flex با ارتفاع مشخص، خط بین آیتم‌های هم‌ردیف می‌نشیند؛ variant همان‌جا هم قابل تنظیم است. |
| With Content | برای جدا کردن ردیف‌های یک لیست، Separator را بین آیتم‌ها بگذارید نه بعد از آخرین مورد. |
| شخصی‌سازی با className | چون رنگ از --border می‌آید، برای یک خط برندی می‌توانید پس‌زمینه و ضخامت را مستقیم با className عوض کنید. |
| asChild | با asChild، استایل‌های Separator روی فرزند مستقیم می‌نشیند به‌جای رندر یک div تازه، مثلاً وقتی می‌خواهید عنصر زیرین hr باشد. |
دستورالعمل استفاده
جدا کردن گروه‌های معنایی متفاوت
دیزاین سیستم دیگ
کامپوننت‌های راست‌به‌چپ برای وب فارسی.
انجام بده
از Separator برای مرز بین دو بخش واقعاً متفاوت استفاده کنید، مثل جدا کردن عنوان از فهرست پیوندهای زیرش.
انجام نده
بین هر آیتم کوچک یک خط نگذارید؛ وقتی همه‌چیز جدا می‌شود، خط دیگر معنای مرزبندی ندارد و فقط شلوغی بصری اضافه می‌کند.
decorative فقط برای خط تزئینی
بخش اول
بخش دوم
انجام بده
وقتی خط صرفاً بصری است و بین دو ناحیه‌ای می‌نشیند که خودشان با عنوان یا landmark از هم جدا شده‌اند، decorative پیش‌فرض (true) را نگه دارید تا صفحه‌خوان مزاحم نشود.
اطلاعات فردی
اطلاعات پرداخت
انجام نده
اگر خط تنها راه تشخیص مرز دو ناحیهٔ ساختاری فرم است (نه فقط تزئین)، decorative={false} را ندادن باعث می‌شود این مرز برای صفحه‌خوان اصلاً وجود نداشته باشد.
سطح کنتراست را متناسب با اهمیت مرز انتخاب کنید
انجام بده
برای مرز اصلی بین دو بخش محتوایی از default استفاده کنید؛ tertiary را فقط برای خطوط فرعیِ داخل یک گروه (مثل جداکنندهٔ ردیف‌های یک لیست) نگه دارید.
تنظیمات حساب
اطلاعات پرداخت و صورت‌حساب
انجام نده
tertiary روی یک مرز اصلی آن‌قدر کم‌رنگ است که در نگاه اول اصلاً دیده نمی‌شود و کاربر مرز دو بخش را گم می‌کند.