فاصل Divider

فاصل يفصل بين أقسام المحتوى. عند وجود نص يحمل دلالة تجميع (role="separator")، وعندما يكون زخرفيًا بحتًا لا يدخل شجرة إمكانية الوصول.

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

فقرة محتوى أعلى

فقرة محتوى أسفل

vue

<script setup lang="ts">
</script>

<template>
  <LhDivider />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhDivider />
</template>

فاصل رأسي

الرئيسية

القائمة

التفاصيل

vue

<script setup lang="ts">
</script>

<template>
  <!-- فاصل رأسي -->
  <div>
    <span>الرئيسية</span>
    <LhDivider direction="vertical" />
    <span>القائمة</span>
    <LhDivider direction="vertical" />
    <span>التفاصيل</span>
  </div>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- فاصل رأسي -->
  <div>
    <span>الرئيسية</span>
    <LhDivider direction="vertical" />
    <span>القائمة</span>
    <LhDivider direction="vertical" />
    <span>التفاصيل</span>
  </div>
</template>

مع نص

يدعم النص الاتجاهين الأفقي والرأسي: في الاتجاه الأفقي يتحكم label-position في محاذاة النص يمينًا أو يسارًا، أما في الاتجاه الرأسي فيبقى النص دائمًا في المنتصف.

في الصبا، يستمع إلى المطر فوق أرجوحة الغناء

في الكهولة، يستمع إلى المطر في قارب المسافرين

أما اليوم، فيستمع إلى المطر تحت كوخ الراهب

vue

<script setup lang="ts">
</script>

<template>
  <LhDivider label-position="left">في الصبا، يستمع إلى المطر فوق أرجوحة الغناء</LhDivider>
  <LhDivider>في الكهولة، يستمع إلى المطر في قارب المسافرين</LhDivider>
  <LhDivider label-position="right">أما اليوم، فيستمع إلى المطر تحت كوخ الراهب</LhDivider>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhDivider label-position="left">في الصبا، يستمع إلى المطر فوق أرجوحة الغناء</LhDivider>
  <LhDivider>في الكهولة، يستمع إلى المطر في قارب المسافرين</LhDivider>
  <LhDivider label-position="right">أما اليوم، فيستمع إلى المطر تحت كوخ الراهب</LhDivider>
</template>

خط متقطع

يمكن الجمع بين الخط المتقطع والنص

نمط حد مخصص (dotted)

vue

<script setup lang="ts">
</script>

<template>
  <LhDivider dashed />
  <LhDivider dashed>يمكن الجمع بين الخط المتقطع والنص</LhDivider>
  <LhDivider border-style="dotted">نمط حد مخصص (dotted)</LhDivider>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhDivider dashed />
  <LhDivider dashed>يمكن الجمع بين الخط المتقطع والنص</LhDivider>
  <LhDivider border-style="dotted">نمط حد مخصص (dotted)</LhDivider>
</template>

واجهة برمجة تطبيقات Divider

الخصائص

الخاصية	الوصف	النوع	الافتراضي
direction	اتجاه الفاصل	`"horizontal" \| "vertical"`	`'horizontal'`
dashed	ما إذا كان خطًا متقطعًا	`boolean`	`false`
labelPosition	موضع المحاذاة عند وجود نص (ساري في الاتجاه الأفقي، أما الرأسي فدائمًا في المنتصف)	`"left" \| "center" \| "right"`	`'center'`
borderStyle	نمط الحد (مثل `'dotted'`)، قيمة محجوزة	`string`	—
sx	خصائص التخطيط السريع (مثل `{ mt: 2, w: '50%' }`)، تُحوّل إلى أنماط سطرية تُطبَّق على العنصر الجذري	`LhSxProps`	—

الفتحات

الفتحة	الوصف	المحتوى الافتراضي
default	نص الفاصل (في الاتجاه الأفقي يُرتَّب يمينًا أو يسارًا، وفي الاتجاه الرأسي أعلى أو أسفل)	—

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

مع نص: role="separator"، فيدرك قارئ الشاشة حدود المجموعة؛ وفي الاتجاه الرأسي يُضاف aria-orientation="vertical"
زخرفي بحت: role="presentation"، ويُزال من شجرة إمكانية الوصول
غير قابل للتركيز ولا يوجد تفاعل بلوحة المفاتيح

تعريفات الأنواع

بنى TypeScript التي يصدّرها هذا المكوّن خارجيًا (مستخرَجة تلقائيًا من packages/components/divider/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لعرض التعريف كاملًا؛ وصف الخصائص في جدول الخصائص أعلاه):

LhDividerProps

export interface LhDividerProps {
  /** اتجاه الفاصل */
  direction?: LhDividerDirection
  /** ما إذا كان خطًا متقطعًا */
  dashed?: boolean
  /** موضع المحاذاة عند وجود نص */
  labelPosition?: LhDividerLabelPosition
  /** نمط الحد (مثل 'solid' / 'dashed' / 'dotted')، له الأولوية على dashed */
  borderStyle?: string
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhDividerLabelPosition _{(مأخوذ من @lh-ui/share/core/divider)}

/** موضع المحاذاة عند وجود نص */
export type LhDividerLabelPosition = 'left' | 'center' | 'right'

LhDividerDirection _{(مأخوذ من @lh-ui/share/core/divider)}

/** اتجاه الفاصل */
export type LhDividerDirection = 'horizontal' | 'vertical'

فاصل Divider ​

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

فاصل رأسي ​

مع نص ​

خط متقطع ​

واجهة برمجة تطبيقات Divider ​

الخصائص ​

الفتحات ​

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

تعريفات الأنواع ​