Separator
خطی افقی یا عمودی برای جدا کردن بخشهای محتوا.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
دیزاین سیستم دیگ
کامپوننتهای راستبهچپ برای وب فارسی.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/separator.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/separator.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/separator.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/separator.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import { Separator } from "@/components/ui/separator"
<Separator />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
دسترسپذیری
- بهصورت پیشفرض decorative است و از درخت دسترسپذیری حذف میشود.
- اگر جداکننده معنای ساختاری دارد، decorative={false} بدهید تا نقش separator اعلام شود.
مرجع API
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | جهت جداکننده. |
| variant | "default" | "secondary" | "tertiary" | "default" | سطح کنتراست خط نسبت به پسزمینه؛ default پررنگترین و tertiary کمرنگترین. |
| decorative | boolean | true | حذف از درخت دسترسپذیری در حالت تزئینی. |
| asChild | boolean | false | رندر استایلها روی فرزند مستقیم بهجای تگ div. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
Variants
سه سطح کنتراست، هر سه بر پایهٔ همان توکن --border: default پررنگترین برای مرزهای اصلی، secondary برای مرز میانی و tertiary کمرنگترین برای خطوط فرعی داخل یک گروه.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Vertical
با orientation="vertical" داخل یک کانتینر flex با ارتفاع مشخص، خط بین آیتمهای همردیف مینشیند؛ variant همانجا هم قابل تنظیم است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
With Content
برای جدا کردن ردیفهای یک لیست، Separator را بین آیتمها بگذارید نه بعد از آخرین مورد.
نصب پکیج
افزودن دیگ به پروژه با CLI اختصاصی
تنظیم توکنهای رنگ
تعویض برند فقط با بازنویسی لایهٔ دوم رنگ
افزودن اولین کامپوننت
نصب و ترکیب کامپوننتها با CLI
این نمونه هنوز برای 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 روی یک مرز اصلی آنقدر کمرنگ است که در نگاه اول اصلاً دیده نمیشود و کاربر مرز دو بخش را گم میکند.