قائمة الوصف Descriptions

يُستخدم LhDescriptions لعرض قائمة خصائص كائن ما، ويدعم عدد الأعمدة وامتداد الأعمدة ووضع الحدود.

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

سجل القطعة

الاسم: مزهرية الخزف الأزرق بنقش أغصان اللوتس
الحقبة: عهد يونغلي (سلالة مينغ)

الفئة: خزف
الدرجة: قطعة أثرية من الدرجة الأولى

vue

<script setup lang="ts">
import { LhDescriptions } from '@lh-ui/vue3'
</script>

<template>
  <LhDescriptions
    title="سجل القطعة"
    :column="2"
    :items="[
      { label: 'الاسم', value: 'مزهرية الخزف الأزرق بنقش أغصان اللوتس' },
      { label: 'الحقبة', value: 'عهد يونغلي (سلالة مينغ)' },
      { label: 'الفئة', value: 'خزف' },
      { label: 'الدرجة', value: 'قطعة أثرية من الدرجة الأولى' },
    ]"
  />
</template>

vue

<script>
import { LhDescriptions } from '@lh-ui/vue3'

export default {
  components: { LhDescriptions },
}
</script>

<template>
  <LhDescriptions
    title="سجل القطعة"
    :column="2"
    :items="[
      { label: 'الاسم', value: 'مزهرية الخزف الأزرق بنقش أغصان اللوتس' },
      { label: 'الحقبة', value: 'عهد يونغلي (سلالة مينغ)' },
      { label: 'الفئة', value: 'خزف' },
      { label: 'الدرجة', value: 'قطعة أثرية من الدرجة الأولى' },
    ]"
  />
</template>

عدد الأعمدة وامتدادها

الاسم: لوحة ألف ميل من الجبال والأنهار
الحقبة: سلالة سونغ الشمالية

المؤلف: وانغ شيمينغ
المادة: ألوان مائية على حرير
مكان الحفظ: متحف القصر ببكين

vue

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

<template>
  <LhDescriptions
    :column="3"
    :items="[
      { label: 'الاسم', value: 'لوحة ألف ميل من الجبال والأنهار', span: 2 },
      { label: 'الحقبة', value: 'سلالة سونغ الشمالية' },
      { label: 'المؤلف', value: 'وانغ شيمينغ' },
      { label: 'المادة', value: 'ألوان مائية على حرير' },
      { label: 'مكان الحفظ', value: 'متحف القصر ببكين' },
    ]"
  />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhDescriptions
    :column="3"
    :items="[
      { label: 'الاسم', value: 'لوحة ألف ميل من الجبال والأنهار', span: 2 },
      { label: 'الحقبة', value: 'سلالة سونغ الشمالية' },
      { label: 'المؤلف', value: 'وانغ شيمينغ' },
      { label: 'المادة', value: 'ألوان مائية على حرير' },
      { label: 'مكان الحفظ', value: 'متحف القصر ببكين' },
    ]"
  />
</template>

عندما يتجاوز span العرض المتبقي في الصف الحالي يُضبَط تلقائيًا؛ وإذا كان الصف الأخير غير مكتمل يُملَأ تلقائيًا.

وضع الحدود

الاسم: مقدمة جناح الأوركيد (لانتنغشو)
المؤلف: وانغ شيتشه

الحقبة: سلالة جين الشرقية
نمط الخط: خط الجري (شينغشو)

vue

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

<template>
  <LhDescriptions
    :column="2"
    border
    :items="[
      { label: 'الاسم', value: 'مقدمة جناح الأوركيد (لانتنغشو)' },
      { label: 'المؤلف', value: 'وانغ شيتشه' },
      { label: 'الحقبة', value: 'سلالة جين الشرقية' },
      { label: 'نمط الخط', value: 'خط الجري (شينغشو)' },
    ]"
  />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhDescriptions
    :column="2"
    border
    :items="[
      { label: 'الاسم', value: 'مقدمة جناح الأوركيد (لانتنغشو)' },
      { label: 'المؤلف', value: 'وانغ شيتشه' },
      { label: 'الحقبة', value: 'سلالة جين الشرقية' },
      { label: 'نمط الخط', value: 'خط الجري (شينغشو)' },
    ]"
  />
</template>

محتوى مخصص

يمكن استبدال محتوى العنصر عبر الفتحة المُحدَّدة النطاق item-<index>.

الحالة: قيد التقدّم

التقدّم

vue

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

<template>
  <!-- استبدال عنصر «التقدّم» عبر الفتحة #item-1 -->
  <LhDescriptions
    :column="1"
    :items="[
      { label: 'الحالة', value: 'قيد التقدّم' },
      { label: 'التقدّم', value: '' },
    ]"
  >
    <template #item-1="{ item }">
      <LhProgress :percentage="66" />
    </template>
  </LhDescriptions>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- استبدال عنصر «التقدّم» عبر الفتحة #item-1 -->
  <LhDescriptions
    :column="1"
    :items="[
      { label: 'الحالة', value: 'قيد التقدّم' },
      { label: 'التقدّم', value: '' },
    ]"
  >
    <template #item-1="{ item }">
      <LhProgress :percentage="66" />
    </template>
  </LhDescriptions>
</template>

التدويل

يمكن تحقيق التدويل لعلامات عناصر القائمة ومضامينها عبر LhConfigProvider مع حزمة اللغة.

藏品档案

名称: مزهرية الخزف الأزرق بنقش أغصان اللوتس
年代: عهد يونغلي (سلالة مينغ)

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhDescriptions, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
</script>

<template>
  <!-- تبديل حزمة اللغة عبر ConfigProvider -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhDescriptions
      :title="locale === 'zh-CN' ? '藏品档案' : 'Collection Archive'"
      :column="2"
      :items="[
        { label: locale === 'zh-CN' ? '名称' : 'Name', value: 'مزهرية الخزف الأزرق بنقش أغصان اللوتس' },
        { label: locale === 'zh-CN' ? '年代' : 'Period', value: 'عهد يونغلي (سلالة مينغ)' },
      ]"
    />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhDescriptions, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhDescriptions, LhButton },
  data() {
    return {
      locale: 'zh-CN',
      zhCN: zhCN,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- تبديل حزمة اللغة عبر ConfigProvider -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhDescriptions
      :title="locale === 'zh-CN' ? '藏品档案' : 'Collection Archive'"
      :column="2"
      :items="[
        { label: locale === 'zh-CN' ? '名称' : 'Name', value: 'مزهرية الخزف الأزرق بنقش أغصان اللوتس' },
        { label: locale === 'zh-CN' ? '年代' : 'Period', value: 'عهد يونغلي (سلالة مينغ)' },
      ]"
    />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

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

الخصائص

الخاصية	الوصف	النوع	الافتراضي
title	عنوان القائمة	`string`	—
column	عدد أعمدة العناصر في كل صف	`number`	`3`
border	ما إذا كانت الحدود تُعرض	`boolean`	`false`
items	قائمة العناصر	`[LhDescriptionsItem](#type-LhDescriptionsItem)`[]	`() => []`
sx	خصائص التخطيط السريع (مثل `{ mt: 2, w: '50%' }`)، تُحوّل إلى أنماط سطرية تُطبَّق على العنصر الجذري	`LhSxProps`	—

LhDescriptionsItem

الخاصية	الوصف	النوع	الافتراضي
label	علامة العنصر	`string`	—
value	محتوى العنصر	`string \| number`	—
span	عدد الأعمدة التي يشغلها، يُضبَط عند التجاوز	`number`	`1`

الفتحات

اسم الفتحة	الوصف	النطاق
title	عنوان مخصص	—
item-<index>	استبدال محتوى العنصر رقم index	`{ item }`

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

تستخدم العناصر البنية الدلالية <dl> / <dt> / <dd>، ويعبّر العنصر نفسه عن علاقة التطابق بين العلامة والقيمة
عناصر ملء نهاية الصف هي زخرفة بحتة وموسومة بـ aria-hidden

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

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

LhDescriptionsProps

export interface LhDescriptionsProps {
  /** عنوان قائمة الوصف */
  title?: string
  /** عدد أعمدة العناصر في كل صف */
  column?: number
  /** ما إذا كانت الحدود تُعرض */
  border?: boolean
  /** قائمة العناصر؛ ثلاثية label/value/span */
  items: LhDescriptionsItem[]
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

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

export interface LhDescriptionsItem {
  /** علامة العنصر */
  label: string
  /** محتوى العنصر (يمكن أيضًا تمريره عبر الفتحة المُحدَّدة النطاق) */
  value?: string | number
  /** عدد الأعمدة التي يشغلها (الافتراضي 1، يُضبَط عند تجاوز column) */
  span?: number
}

قائمة الوصف Descriptions ​

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

عدد الأعمدة وامتدادها ​

وضع الحدود ​

محتوى مخصص ​

التدويل ​

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

الخصائص ​

LhDescriptionsItem ​

الفتحات ​

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

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