جداکننده (Separator)

جداکننده برای تفکیک بصری یا معنایی محتوا استفاده می‌شود.

نصب (Installation)

1npx @quark-lab/rad-ui add separator

نمونه‌ها (Examples)

استفاده پایه (Basic Usage)

استفاده ساده برای جدا کردن بخش‌های متن.

راد UI

کتابخانه کامپوننت UI با پشتیبانی کامل از RTL

ویژگی‌ها

طراحی مدرن، دارک مود، و دسترسی‌پذیر

مشاهده کد
1import { Separator } from "@/components/ui/separator";
2
3export default function BasicExample() {
4  return (
5    <div>
6      <div className="space-y-1">
7        <h4 className="text-sm font-medium leading-none">راد UI</h4>
8        <p className="text-sm text-muted-foreground">
9          کتابخانه کامپوننت UI با پشتیبانی کامل از RTL
10        </p>
11      </div>
12      <Separator className="my-4" />
13      <div className="space-y-1">
14        <h4 className="text-sm font-medium leading-none">ویژگی‌ها</h4>
15        <p className="text-sm text-muted-foreground">
16          طراحی مدرن، دارک مود، و دسترسی‌پذیر
17        </p>
18      </div>
19    </div>
20  );
21}
22

جداکننده افقی (Horizontal)

حالت پیش‌فرض، برای جدا کردن بخش‌های عمودی محتوا.

بخش اول

این محتوای بخش اول است که در بالا قرار دارد

بخش دوم

این محتوای بخش دوم است که در پایین قرار دارد

مشاهده کد
1import { Separator } from "@/components/ui/separator";
2
3export default function HorizontalExample() {
4  return (
5    <div>
6      <div>
7        <h3 className="text-lg font-semibold">بخش اول</h3>
8        <p className="text-muted-foreground">
9          این محتوای بخش اول است که در بالا قرار دارد
10        </p>
11      </div>
12      <Separator className="my-6" />
13      <div>
14        <h3 className="text-lg font-semibold">بخش دوم</h3>
15        <p className="text-muted-foreground">
16          این محتوای بخش دوم است که در پایین قرار دارد
17        </p>
18      </div>
19    </div>
20  );
21}
22

جداکننده عمودی (Vertical)

برای جدا کردن آیتم‌های افقی مثل منوها و لیست‌ها.

خانه
درباره ما
تماس
بلاگ
مشاهده کد
1import { Separator } from "@/components/ui/separator";
2
3export default function VerticalExample() {
4  return (
5    <div className="flex h-5 items-center space-x-4 space-x-reverse text-sm">
6      <div>خانه</div>
7      <Separator orientation="vertical" />
8      <div>درباره ما</div>
9      <Separator orientation="vertical" />
10      <div>تماس</div>
11      <Separator orientation="vertical" />
12      <div>بلاگ</div>
13    </div>
14  );
15}
16

با استایل سفارشی (Custom Style)

تغییر رنگ و ضخامت جداکننده.

مشاهده کد
1import { Separator } from "@/components/ui/separator";
2
3export default function CustomStyleExample() {
4  return <Separator className="my-6 bg-primary h-[2px]" />;
5}
6

مثال‌های کاربردی (Practical Examples)

کارت با بخش‌های مختلف (Card with Sections)

استفاده در کارت برای سازماندهی اطلاعات.

اطلاعات حساب

نام کاربری: user@example.com

اشتراک

پلن فعلی: حرفه‌ای

پرداخت

روش پرداخت: کارت اعتباری

مشاهده کد
1import { Separator } from "@/components/ui/separator";
2
3export default function CardExample() {
4  return (
5    <div className="p-6 rounded-lg border border-border max-w-md">
6      <div className="space-y-1">
7        <h4 className="font-medium">اطلاعات حساب</h4>
8        <p className="text-sm text-muted-foreground">
9          نام کاربری: user@example.com
10        </p>
11      </div>
12      <Separator className="my-4" />
13      <div className="space-y-1">
14        <h4 className="font-medium">اشتراک</h4>
15        <p className="text-sm text-muted-foreground">
16          پلن فعلی: حرفه‌ای
17        </p>
18      </div>
19      <Separator className="my-4" />
20      <div className="space-y-1">
21        <h4 className="font-medium">پرداخت</h4>
22        <p className="text-sm text-muted-foreground">
23          روش پرداخت: کارت اعتباری
24        </p>
25      </div>
26    </div>
27  );
28}
29

مسیر صفحه (Breadcrumb)

استفاده به عنوان جداکننده در breadcrumb.

خانه
کامپوننت‌ها
جداکننده
مشاهده کد
1import { Separator } from "@/components/ui/separator";
2
3export default function BreadcrumbExample() {
4  return (
5    <div className="flex items-center space-x-2 space-x-reverse text-sm">
6      <span className="text-primary">خانه</span>
7      <Separator orientation="vertical" className="h-4" />
8      <span className="text-primary">کامپوننت‌ها</span>
9      <Separator orientation="vertical" className="h-4" />
10      <span className="text-muted-foreground">جداکننده</span>
11    </div>
12  );
13}
14

لینک‌های فوتر (Footer Links)

جدا کردن لینک‌های فوتر.

حریم خصوصی
شرایط استفاده
تماس با ما
پشتیبانی
مشاهده کد
1import { Separator } from "@/components/ui/separator";
2
3export default function NavExample() {
4  return (
5    <div className="flex flex-wrap items-center gap-4 text-sm">
6      <a href="#" className="hover:text-primary transition-colors">
7        حریم خصوصی
8      </a>
9      <Separator orientation="vertical" className="h-4" />
10      <a href="#" className="hover:text-primary transition-colors">
11        شرایط استفاده
12      </a>
13      <Separator orientation="vertical" className="h-4" />
14      <a href="#" className="hover:text-primary transition-colors">
15        تماس با ما
16      </a>
17      <Separator orientation="vertical" className="h-4" />
18      <a href="#" className="hover:text-primary transition-colors">
19        پشتیبانی
20      </a>
21    </div>
22  );
23}
24

مرجع API (API Reference)

Separator

پراپ‌های کامپوننت Separator.

پراپ (Prop)نوع (Type)پیش‌فرض (Default)توضیحات (Description)
orientation"horizontal" | "vertical""horizontal"جهت قرارگیری جداکننده
decorativebooleantrueآیا جداکننده صرفاً تزئینی است (بدون معنای معنایی)
classNamestringundefinedکلاس‌های CSS سفارشی

بهترین شیوه‌ها (Best Practices)

کی از جداکننده استفاده کنیم؟

  • برای جدا کردن بخش‌های مختلف محتوا
  • در منوها برای جدا کردن آیتم‌های مختلف
  • در کارت‌ها برای سازماندهی اطلاعات
  • در فوترها و هدرها برای تفکیک لینک‌ها

فاصله‌گذاری (Spacing)

از کلاس‌های my-4 یا my-6 برای افقی و mx-4 برای عمودی استفاده کنید

استایل سفارشی (Custom Styling)

می‌توانید با className رنگ، ضخامت و سایر ویژگی‌ها را تغییر دهید