تباعد Space

تباعد بين عناصر التحكم في التخطيط.

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

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

preset mediumعنصرعنصر

preset largeعنصرعنصر

رقمي 8pxعنصرعنصر

ترتيب عموديعنصرعنصر

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

export default function Demo() {
  return (
    <LhSpace size="large">
      <span>العنصر 1</span>
      <span>العنصر 2</span>
      <span>العنصر 3</span>
    </LhSpace>
  )
}

Space Props

الخاصية	الوصف	النوع	القيم المتاحة	الافتراضي
direction	اتجاه الترتيب	'horizontal' | 'vertical'	—	'horizontal'
size	التباعد	'small' | 'medium' | 'large' | number | [number, number]	—	'medium'
wrap	الالتفاف لسطر جديد (يعمل في الاتجاه الأفقي فقط)	boolean	—	true
alignment	المحاذاة (align-items)	'start' | 'center' | 'end' | 'baseline'	—	'start'
sx	خصائص تخطيط سريعة	SxProps	—	—

تنفيذ التباعد

يُترَك التباعد بالكامل لخاصية CSS الأصلية gap: تُخَّطط الدرجات المسبقة إلى رموز --lh-spacing-* (small=8 / medium=16 / large=24)، وتُعامَل الأرقام كـ px، ويتحكم المصفوفة [الأفقي, العمودي] في كلا المحورين. لا يُغلِّف المكوّن العناصر الفرعية، فلا حاجة إلى SpaceItem.

الأنماط

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