Divider

کامپوننت Divider برای جداسازی بصری بخش‌های محتوا استفاده می‌شود؛ مثل جدا کردن دو بخش فرم یا گروه‌های مختلف در یک کارت. حالت افقی و عمودی دارد و می‌تواند متن هم وسطش نمایش دهد.

Import

import { Divider } from "fara-ui";

اگر هنوز FaraUI را نصب و راه‌اندازی نکرده‌ای، ابتدا صفحه‌ی شروع به کار را ببین.

Basic Usage

<Divider />

Playground

orientationhorizontalvertical

label

<Divider orientation="horizontal" />

Orientation

• horizontal (پیش‌فرض) — یک خط افقی تمام‌عرض
• vertical — یک خط عمودی؛ معمولاً داخل یک container با display: flex استفاده می‌شود

<div style={{ display: "flex", height: 80, alignItems: "center" }}>
  <span>ورودی</span>
  <Divider orientation="vertical" />
  <span>خروجی</span>
</div>

Divider with Label

با پاس‌دادن label، خط با متن در وسط رندر می‌شود — الگویی رایج برای جدا کردن روش‌های ورود:

<Divider label="یا" />

در این حالت orientation نادیده گرفته می‌شود و همیشه حالت افقی با متن رندر می‌شود.

Accessibility

در حالت بدون label، کامپوننت با role="separator" و aria-orientation پیاده شده تا برای screen reader ها معنادار باشد. در حالت دارای label، متن به‌عنوان محتوای قابل مشاهده‌ی جداکننده رندر می‌شود و aria-orientation روی آن قرار نمی‌گیرد.

Data Attributes and Customize CSS

Divider hookهای زیر را ارائه می‌کند:

Attribute	کاربرد
data-fara-divider	ریشه‌ی Divider
data-orientation	جهت در حالت بدون label: horizontal یا vertical
data-with-label	وجود label
data-fara-divider-label	متن label

<Divider className="section-divider" label="یا" />

[data-fara-divider][data-orientation="vertical"] {
  margin-inline: 16px;
  background: #cbd5e1;
}

[data-fara-divider][data-with-label] {
  color: #64748b;
}

[data-fara-divider-label] {
  padding-inline: 4px;
  font-size: 0.875rem;
}

className روی wrapper اصلی قرار می‌گیرد و برای تنظیم فاصله، رنگ یا اندازه‌ی یک نمونه‌ی خاص مناسب است.

Props

Prop	Type	Default	Description
orientation	"horizontal" | "vertical"	"horizontal"	جهت خط
label	ReactNode	-	متن وسط خط (همیشه حالت افقی رندر می‌کند)
className	string	-	کلاس CSS اضافی برای سفارشی‌سازی

علاوه بر موارد بالا، تمام ویژگی‌های استاندارد <div> نیز پشتیبانی می‌شوند.