تباعد Space

حاوية تخطيط توفّر تباعدًا موحّدًا للمكوّنات الفرعية، مبنية على gap الأصلي في CSS. حاوية تخطيط بحتة (role="presentation")، لا تشارك في شجرة إمكانية الوصول.

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

تباعد أفقي

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

<template>
  <LhSpace>
    <LhButton>زر أول</LhButton>
    <LhButton>زر ثان</LhButton>
    <LhButton>زر ثالث</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <LhSpace>
    <LhButton>زر أول</LhButton>
    <LhButton>زر ثان</LhButton>
    <LhButton>زر ثالث</LhButton>
  </LhSpace>
</template>

تباعد عمودي

تباعد عمودي

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

<template>
  <LhSpace direction="vertical">
    <LhButton>زر أول</LhButton>
    <LhButton>زر ثان</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <LhSpace direction="vertical">
    <LhButton>زر أول</LhButton>
    <LhButton>زر ثان</LhButton>
  </LhSpace>
</template>

أحجام التباعد

ثلاث درجات مسبقة تُطابق رموز السمة --lh-spacing-*؛ وتُدعم أيضًا أرقام البكسل أو مصفوفة [أفقي, عمودي].

أحجام التباعد

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

<template>
  <!-- الدرجة المسبقة small -->
  <LhSpace size="small">
    <LhButton>small</LhButton>
    <LhButton>small</LhButton>
  </LhSpace>
  <!-- الدرجة المسبقة medium -->
  <LhSpace size="medium">
    <LhButton>medium</LhButton>
    <LhButton>medium</LhButton>
  </LhSpace>
  <!-- الدرجة المسبقة large -->
  <LhSpace size="large">
    <LhButton>large</LhButton>
    <LhButton>large</LhButton>
  </LhSpace>
  <!-- بكسل مخصص 8 -->
  <LhSpace :size="8">
    <LhButton>8px</LhButton>
    <LhButton>8px</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <!-- الدرجة المسبقة small -->
  <LhSpace size="small">
    <LhButton>small</LhButton>
    <LhButton>small</LhButton>
  </LhSpace>
  <!-- الدرجة المسبقة medium -->
  <LhSpace size="medium">
    <LhButton>medium</LhButton>
    <LhButton>medium</LhButton>
  </LhSpace>
  <!-- الدرجة المسبقة large -->
  <LhSpace size="large">
    <LhButton>large</LhButton>
    <LhButton>large</LhButton>
  </LhSpace>
  <!-- بكسل مخصص 8 -->
  <LhSpace :size="8">
    <LhButton>8px</LhButton>
    <LhButton>8px</LhButton>
  </LhSpace>
</template>

الالتفاف والمحاذاة

التفاف

وسم 1وسم 2وسم 3وسم 4وسم 5وسم 6وسم 7وسم 8وسم 9وسم 10وسم 11وسم 12

يتحكم alignment في محاذاة العناصر الفرعية: الافتراضي هو الوسط، ويمكن تبديله إلى محاذاة البداية أو النهاية.

المحاذاة

محتوى أطول

محتوى أطول

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

<template>
  <!-- السماح بالالتفاف -->
  <LhSpace wrap>
    <LhTag v-for="n in 12" :key="n">وسم {{ n }}</LhTag>
  </LhSpace>
  <!-- محاذاة start -->
  <LhSpace alignment="start">
    <LhButton>محاذاة start</LhButton>
    <span style="height: 48px; line-height: 48px">محتوى أطول</span>
  </LhSpace>
  <!-- محاذاة end -->
  <LhSpace alignment="end">
    <LhButton>محاذاة end</LhButton>
    <span style="height: 48px; line-height: 48px">محتوى أطول</span>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <!-- السماح بالالتفاف -->
  <LhSpace wrap>
    <LhTag v-for="n in 12" :key="n">وسم {{ n }}</LhTag>
  </LhSpace>
  <!-- محاذاة start -->
  <LhSpace alignment="start">
    <LhButton>محاذاة start</LhButton>
    <span style="height: 48px; line-height: 48px">محتوى أطول</span>
  </LhSpace>
  <!-- محاذاة end -->
  <LhSpace alignment="end">
    <LhButton>محاذاة end</LhButton>
    <span style="height: 48px; line-height: 48px">محتوى أطول</span>
  </LhSpace>
</template>

Space API

Props

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

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

• الحاوية عنصر تخطيط محض بـ role="presentation"، لا يعترض التركيز
• التباعد مبنٍ على gap الأصلي في CSS، دون عناصر DOM تغلّف العناصر الفرعية

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

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

LhSpaceProps

export interface LhSpaceProps {
  /** اتجاه الترتيب */
  direction?: 'horizontal' | 'vertical'
  /** التباعد: درجة مسبقة / رقم بكسل / [أفقي, عمودي] */
  size?: LhSpaceSizeInput
  /** السماح بالالتفاف (الاتجاه الأفقي فقط) */
  wrap?: boolean
  /** المحاذاة */
  alignment?: LhSpaceAlignment
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

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

/**
 * تباعد مُوحَّد: الدرجات المسبقة تُطابق رموز spacing، والأرقام تُفهم كبكسل
 */
export type LhSpaceSizeInput = 'small' | 'medium' | 'large' | number | [number, number]

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

/** طريقة محاذاة التباعد */
export type LhSpaceAlignment = 'start' | 'center' | 'end' | 'baseline'