فاصل Divider

خط فاصل يفصل بين أجزاء المحتوى.

الاستخدام الأساسي

الاستخدام الأساسي

ماء الربيع أشدّ زرقةً من السماء، وقارب مرسوم نائمٌ تحت المطر.

لدى الموقد كالهلال، ومعاصم بيضاء كالصقيع والثلج.

مجموعة محاذاة لليسار

مجموعة محاذاة لليمين

عمودي

فاصل

أعلى

رسم الحبر

أسفل

import { LhDivider } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <span>ماء الربيع أشد زرقة من السماء، وقارب مرسوم نائم تحت المطر.</span>
      <LhDivider />
      <span>عند الموقد هي كالبدر، ومعاصم بيضاء كالثلج المتجمد.</span>
      <LhDivider dashed />
      <LhDivider labelPosition="left">تجميع بمحاذاة الجانب</LhDivider>
    </>
  )
}

خصائص Divider

خاصية	الوصف	النوع	القيم المتاحة	الافتراضي
direction	الاتجاه	'horizontal' | 'vertical'	—	'horizontal'
dashed	هل يكون خطًا متقطعًا	boolean	—	false
labelPosition	موضع النص (سارٍ في الاتجاه الأفقي، ويكون دائمًا في المنتصف في الاتجاه العمودي)	'left' | 'center' | 'right'	—	'center'
borderStyle	نمط الحدود (يكون أولوية على dashed عند تحديده صراحة)	string	'solid' | 'dashed' | 'dotted' …	—
sx	خصائص التخطيط السريع	SxProps	—	—

إمكانية الوصول

يُعرض الفاصل الذي يحمل نصًا كـ role="separator" (دلالة تجميع حقيقية)؛ أما الزخرفي البحت فيكون role="presentation" ويُزال من شجرة إمكانية الوصول. ولا يُخرج aria-orientation="vertical" إلا في الحالة (نص + اتجاه عمودي).

سلوك معروف

يُخرج borderStyle="dotted" المُعدِّل lh-divider--dotted، لكن طبقة الأنماط لم تنفذ حاليًا سوى --dashed، فيتراجع إلى خط متصل — وهو يتسق مع سلوك lh-ui-plus.

الأنماط

import '@lh-ui/react/style/divider'