تباعد Space

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

تباعد

<template>
  <div class="demo-col">
    <p class="demo-note">اتجاه أفقي + تباعد مسبق</p>
    <LhSpace>
      <LhButton>رسم الحبر</LhButton>
      <LhButton>الطيور والزهور</LhButton>
      <LhButton>الشخصيات</LhButton>
    </LhSpace>
    <p class="demo-note">الاتجاه العمودي</p>
    <LhSpace direction="vertical">
      <LhButton>رسم الحبر</LhButton>
      <LhButton>الطيور والزهور</LhButton>
    </LhSpace>
    <p class="demo-note">تباعد مخصص + التفاف</p>
    <LhSpace :size="24" wrap>
      <LhTag v-for="item in items" :key="item">{{ item }}</LhTag>
    </LhSpace>
    <p class="demo-note">وضع المحاذاة alignment=start</p>
    <LhSpace alignment="start">
      <LhButton>قصير</LhButton>
      <div style="height: 48px; padding: 12px; border: 1px dashed var(--lh-border-color)">كتلة عالية</div>
    </LhSpace>
  </div>
</template>

<script>
export default {
  data: () => ({ items: ['رسم الحبر', 'الطيور والزهور', 'الشخصيات', 'غونغبي', 'شي يي', 'موغو'] }),
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
direction	اتجاه الترتيب	'horizontal' \| 'vertical'	'horizontal'
size	التباعد: درجات مسبقة / عدد البكسل / [أفقي، عمودي]	'small' \| 'medium' \| 'large' \| number \| [number, number]	'medium'
wrap	السماح بالالتفاف (الاتجاه الأفقي فقط)	boolean	false
alignment	المحاذاة على المحور المتقاطع	'start' \| 'center' \| 'end' \| 'baseline'	'center'
sx	خاصية sx المختصرة للتخطيط	—	—