شبكة Grid

نظام شبكة من 24 عمودًا، مُنفَّذ بـ CSS Grid (grid-template-columns: repeat(24, 1fr))، ويُحالا span / offset مباشرةً إلى grid-column دون حسابات نسبية مع flex.

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

span 12

span 8

vue

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

<template>
  <LhRow :gutter="12">
    <LhCol :span="12">span 12</LhCol>
    <LhCol :span="12">span 12</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhRow :gutter="12">
    <LhCol :span="12">span 12</LhCol>
    <LhCol :span="12">span 12</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

الإزاحة والمحاذاة

offset 3

في المنتصف

vue

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

<template>
  <LhRow justify="center" align="middle" :gutter="12">
    <LhCol :span="6" :offset="3">offset 3</LhCol>
    <LhCol :span="6">في المنتصف</LhCol>
  </LhRow>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhRow justify="center" align="middle" :gutter="12">
    <LhCol :span="6" :offset="3">offset 3</LhCol>
    <LhCol :span="6">في المنتصف</LhCol>
  </LhRow>
</template>

التفاف الأسطر

عند إيقاف wrap تُرتَّب العناصر الفرعية قسرًا في صف واحد (ومع overflow يمكن الحصول على شبكة قابلة للتمرير الأفقي).

span 8

vue

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

<template>
  <!-- بدون التفاف -->
  <LhRow :wrap="false" :gutter="12">
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- بدون التفاف -->
  <LhRow :wrap="false" :gutter="12">
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

نقاط التوقف المتجاوبة

تُعرَّف الأحجام بالأطوار xs / sm / md / lg / xl (عتبات Tailwind: 640 / 768 / 1024 / 1280)؛ والأطوار غير المُعرَّفة يُعاد تراجعها إلى الطور الأصغر (و xs احتياطي دائم)، وعند عدم تعريف أي نقطة توقف يُستخدم span. صغّر نافذة المتصفح لرصد التغيّرات.

span 24 / md 12 / xl 8

span 24 / xl 8

vue

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

<template>
  <LhRow :gutter="12">
    <LhCol :span="24" :md="12" :xl="8">span 24 / md 12 / xl 8</LhCol>
    <LhCol :span="24" :md="12" :xl="8">span 24 / md 12 / xl 8</LhCol>
    <LhCol :span="24" :xl="8">span 24 / xl 8</LhCol>
  </LhRow>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhRow :gutter="12">
    <LhCol :span="24" :md="12" :xl="8">span 24 / md 12 / xl 8</LhCol>
    <LhCol :span="24" :md="12" :xl="8">span 24 / md 12 / xl 8</LhCol>
    <LhCol :span="24" :xl="8">span 24 / xl 8</LhCol>
  </LhRow>
</template>

الإزاحة الجانبية (push / pull)

يُزيح push / pull نقطة البداية على أساس offset (الأول نحو الطرف النهائي، والثاني نحو الطرف الابتدائي)، ويُستعملان للضبط الدقيق لمواضع الأعمدة.

span 8 push 8

span 8

vue

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

<template>
  <LhRow :gutter="12">
    <LhCol :span="8" :push="8">span 8 push 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhRow :gutter="12">
    <LhCol :span="8" :push="8">span 8 push 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

الرجوع والتجاوب

يُرجع pull العمود بمقدار عدد من الأعمدة نحو طرف البداية (عكس offset)؛ وتُعرَّف span حسب نقطة التوقف عبر xs / sm / md / lg / xl، ويمكن sizes تعريفها دفعة واحدة.

pull 2

متجاوب

sizes

vue

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

<template>
  <LhRow :gutter="12">
    <LhCol :span="8" :pull="2">pull 2</LhCol>
    <LhCol :span="12" :xs="24" :sm="12" :lg="8">متجاوب</LhCol>
    <LhCol :span="10" :sizes="{ xs: 24, md: 12, xl: 6 }">sizes</LhCol>
  </LhRow>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhRow :gutter="12">
    <LhCol :span="8" :pull="2">pull 2</LhCol>
    <LhCol :span="12" :xs="24" :sm="12" :lg="8">متجاوب</LhCol>
    <LhCol :span="10" :sizes="{ xs: 24, md: 12, xl: 6 }">sizes</LhCol>
  </LhRow>
</template>

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

خصائص LhRow

الخاصية	الوصف	النوع	الافتراضي
justify	الترتيب على المحور الرئيسي	`'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around'`	`'start'`
align	المحاذاة على المحور المتقاطع	`'top' \| 'middle' \| 'bottom'`	`'top'`
gutter	المسافة بين الأعمدة (px أو [أفقي، رأسي])	`number \| [number, number]`	`0`
wrap	ما إذا كان يتم لف الأسطر	`boolean`	`true`
sx	خصائص التخطيط السريع sx	`LhSxProps`	—

خصائص LhCol

الخاصية	الوصف	النوع	الافتراضي
span	عدد الأعمدة المشغولة (نظام 24 عمودًا)	`number`	—
offset	عدد أعمدة الإزاحة عن طرف البداية	`number`	—
push	عدد أعمدة الإزاحة نحو الطرف النهائي	`number`	—
pull	عدد أعمدة الإزاحة نحو طرف البداية	`number`	—
xs	ساري تحت 640px (عند عدم التعريف يُعاد التراجع إلى طور أصغر)	`LhColSize`	—
sm	ساري عند ≥640px	`LhColSize`	—
md	ساري عند ≥768px	`LhColSize`	—
lg	ساري عند ≥1024px	`LhColSize`	—
xl	ساري عند ≥1280px	`LhColSize`	—
sizes	تعريف دفعة واحدة حسب نقطة التوقف (مكافئ لـ xs~xl، أيهما استخدمت)	`Partial<Record<LhGridBreakpoint, LhColSize>>`	—
sx	خصائص التخطيط السريع sx	`LhSxProps`	—

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

مكوّن تخطيط بحت بلا دلالة تفاعلية؛ لا تستخدم الشبكة لحمل قائمة تتطلب بنية دلالية (استخدم List / Table وغيرها)

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

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

LhRowJustify

/** ترتيب العناصر الفرعية على المحور الرئيسي */
export type LhRowJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around'

LhRowAlign

/** محاذاة العناصر الفرعية على المحور المتقاطع */
export type LhRowAlign = 'top' | 'middle' | 'bottom'

LhRowProps

export interface LhRowProps {
  /** الترتيب على المحور الرئيسي */
  justify?: LhRowJustify
  /** المحاذاة على المحور المتقاطع */
  align?: LhRowAlign
  /** المسافة بين الأعمدة (px أو [أفقي، رأسي]) */
  gutter?: number | [number, number]
  /** ما إذا كان يتم لف الأسطر */
  wrap?: boolean
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhColProps

export interface LhColProps {
  /** عدد الأعمدة المشغولة (نظام 24 عمودًا) */
  span?: number
  /** عدد أعمدة الإزاحة عن طرف البداية */
  offset?: number
  /** عدد أعمدة الإزاحة نحو الطرف النهائي */
  push?: number
  /** عدد أعمدة الإزاحة نحو طرف البداية */
  pull?: number
  /** ساري تحت 640px (عند عدم التعريف يُعاد التراجع إلى طور أصغر) */
  xs?: LhColSize
  /** ساري عند ≥640px */
  sm?: LhColSize
  /** ساري عند ≥768px */
  md?: LhColSize
  /** ساري عند ≥1024px */
  lg?: LhColSize
  /** ساري عند ≥1280px */
  xl?: LhColSize
  /** أحجام متجاوبة تُعرَّف دفعة واحدة حسب نقطة التوقف (مكافئة لـ xs~xl، أيهما استخدمت) */
  sizes?: LhBreakpointSizes
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

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

/** تكوين حجم Col: رقم أو كائن (يدعم أيضًا الكائن حسب نقطة التوقف) */
export type LhColSize = number | LhGridSpan

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

/** حجم الشبكة (span من 1 إلى 24، أو كائن مع offset) */
export interface LhGridSpan {
  span?: number
  offset?: number
  push?: number
  pull?: number
}

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

/** أحجام متجاوبة تُعرَّف حسب نقطة التوقف (الأطوار غير المُعرَّفة يُعاد تراجعها، و xs احتياطي دائم) */
export type LhBreakpointSizes = Partial<Record<LhGridBreakpoint, LhColSize>>

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

/** نقاط توقف الشبكة */
export type LhGridBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

الثوابت

الثوابت العامة المستخدمة في هذا المكوّن كالتالي (يمكن النقر على العنصر الذي يحمل الاسم نفسه في عمودي «النوع / الافتراضي» في جدول الخصائص للانتقال إلى هنا):

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

/** إجمالي عدد أعمدة الشبكة */
export const LH_GRID_COLUMNS = 24

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

/**
 * نقاط التوقف المتجاوبة (على طراز Tailwind، الحد الأدنى للعرض px):
 * xs هو الطور الافتراضي (تحت 640)، وما عداه يُطابَق وفق «≥ العتبة».
 */
export const LH_GRID_BREAKPOINTS: Record<LhGridBreakpoint, number> = {
  xs: 0,
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
}

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

/** ترتيب ثابت لنقاط التوقف من الأكبر إلى الأصغر */
export const LH_GRID_BREAKPOINT_ORDER: LhGridBreakpoint[] = ['xl', 'lg', 'md', 'sm', 'xs']

شبكة Grid ​

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

الإزاحة والمحاذاة ​

التفاف الأسطر ​

نقاط التوقف المتجاوبة ​

الإزاحة الجانبية (push / pull) ​

الرجوع والتجاوب ​

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

خصائص LhRow ​

خصائص LhCol ​

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

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

الثوابت ​

شبكة Grid

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

الإزاحة والمحاذاة

التفاف الأسطر

نقاط التوقف المتجاوبة

الإزاحة الجانبية (push / pull)

الرجوع والتجاوب

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

خصائص LhRow

خصائص LhCol

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

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

الثوابت