فاصل

فاصل أفقي قابل للتركيب لتنظيم واجهات التطبيقات المكثفة. استخدم خطاً رفيعاً واحداً، أو خطاً مزدوجاً مؤطراً، أو شريطاً ممتلئاً ناعماً، ثم ضع النصوص أو الأزرار أو عناصر التحكم المدمجة في أي مكان على طوله.

الإشعارات

اليوم

آخر النشاطات

التثبيت

يمكنك إضافة مكوّن الفاصل باستخدام CLI الخاص بنا أو يدويًا:

الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.

CLI

يدوي

تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.

npx boardui@latest add divider

هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.

المتغيرات

اختر single, double، أو fill. تستخدم كل المعالجات رموز الحدود والأسطح الدلالية لـ BoardUI، فتتبع السمة النشطة تلقائيًا.

سطر واحد

سطر مزدوج

تعبئة الخلفية

<Divider>Single line</Divider><Divider variant="double">Double line</Divider><Divider variant="fill">Background fill</Divider>

المحاذاة

الـ align الخاصية تضع المحتوى في البداية أو المنتصف أو النهاية. تحافظ الفواصل أحادية السطر على الخط الرفيع في الجانب المفتوح.

البداية

المركز

نهاية

<Divider align="start">Start</Divider><Divider align="center">Center</Divider><Divider align="end">End</Divider>

الأيقونات والشرائح والأزرار والصور الرمزية

لا تقتصر العناصر الفرعية على النصوص. يمكن وضع أيقونة أو شريحة أو زر أو مجموعة أزرار أو مجموعة صور رمزية في نفس الفتحة، وتُغلق السطر حول أي عرض تشغله. لا توجد خصائص إضافية: يُؤلَّف المحتوى كعناصر فرعية، لذا يناسب هذا المكان أي شيء مضغوط.

جديد

import { RiAddLine, RiArrowDownLine, RiArrowUpLine } from "@remixicon/react";import { Avatar } from "@/components/base/avatar/avatar";import { Chip } from "@/components/base/badges/chip";import { Button } from "@/components/base/buttons/button";import { ButtonGroup, ButtonGroupItem } from "@/components/base/buttons/button-group";
{/* Icon */}<Divider>  <RiAddLine className="size-5 text-foreground-icon-secondary" aria-hidden /></Divider>
{/* Chip */}<Divider>  <Chip color="neutral">NEW</Chip></Divider>
{/* Button */}<Divider>  <Button variant="secondary" size="small">Button</Button></Divider>
{/* Button group */}<Divider>  <ButtonGroup size="small" aria-label="Move item">    <ButtonGroupItem size="small" aria-label="Move down">      <RiArrowDownLine className="size-5" aria-hidden />    </ButtonGroupItem>    <ButtonGroupItem size="small" aria-label="Add between">      <RiAddLine className="size-5" aria-hidden />    </ButtonGroupItem>    <ButtonGroupItem size="small" aria-label="Move up">      <RiArrowUpLine className="size-5" aria-hidden />    </ButtonGroupItem>  </ButtonGroup></Divider>
{/* Avatar group */}<Divider>  <div className="flex items-center">    <Avatar size="md" src="/avatars/aspen-lubin.webp" alt="Aspen Lubin"      className="ring-2 ring-background-primary-default" />    <Avatar size="md" src="/avatars/john-clarkson.webp" alt="John Clarkson"      className="-ml-2 ring-2 ring-background-primary-default" />    <span className="-ml-2 inline-flex size-8 items-center justify-center rounded-full bg-neutral-900 text-caption-1-semibold text-white ring-2 ring-background-primary-default dark:bg-neutral-700">      +7    </span>  </div></Divider>
{/* Any of the above also works on the filled surface */}<Divider variant="fill">  <ButtonGroup size="small" aria-label="Activity filter">    <ButtonGroupItem size="small" selected>All</ButtonGroupItem>    <ButtonGroupItem size="small">Unread</ButtonGroupItem>    <ButtonGroupItem size="small">Archived</ButtonGroupItem>  </ButtonGroup></Divider>

بدون محتوى

احذف العناصر الفرعية للحصول على فاصل هيكلي بحت. في هذا الشكل يعرض المكوّن دور الفاصل الأصلي والاتجاه الأفقي لتقنيات المساعدة.

<Divider aria-label="Section break" /><Divider variant="double" aria-label="Section break" /><Divider variant="fill" aria-label="Section break" />