فاصل Divider

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

فاصل

<template>
  <div class="demo-col" style="max-width: 420px">
    <p class="demo-note">فاصل أفقي</p>
    <LhDivider />
    <p class="demo-note">مع نص (في المنتصف افتراضيًا)</p>
    <LhDivider>رسم الحبر</LhDivider>
    <LhDivider label-position="left">نص بمحاذاة البداية</LhDivider>
    <LhDivider label-position="right">نص بمحاذاة النهاية</LhDivider>
    <p class="demo-note">خط متقطع / حدّ مخصص</p>
    <LhDivider dashed />
    <LhDivider border-style="dotted">خط نقطي</LhDivider>
    <p class="demo-note">فاصل رأسي</p>
    <div class="demo-row">
      <span>المناظر الطبيعية</span>
      <LhDivider direction="vertical" />
      <span>الطيور والزهور</span>
      <LhDivider direction="vertical" />
      <span>الشخصيات</span>
    </div>
  </div>
</template>

Props

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

Slots

فتحة	الوصف
default	نص الفاصل (في الاتجاه الأفقي يُعرض على جانبي الخط، وفي الرأي أعلاه وأسفله)