Описания

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 превышает оставшуюся ширину строки, значение автоматически ограничивается (clamp); неполная последняя строка автоматически дополняется.

Режим с рамками

Название: Предисловие из Павильона орхидей
Автор: Ван Сичжи

Эпоха: Восточная Цзинь
Стиль: Беглый стиль

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>

API

Props

Свойство	Описание	Тип	По умолчанию
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`

Slots

Слот	Описание	Область видимости
title	Пользовательский заголовок	—
item-<index>	Переопределяет содержимое записи с номером index	`{ item }`

Доступность

Записи используют семантическую структуру <dl> / <dt> / <dd>; соответствие метки и значения выражено самими элементами
Дополняющий элемент в конце строки — чисто декоративный, помечен aria-hidden

Типы

TypeScript-типы, экспортируемые этим компонентом (извлечены автоматически из packages/components/descriptions/src/types.ts и исходников @lh-ui/share/core/*; раскройте нужный пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

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
}

Описания ​

Базовое использование ​

Число столбцов и объединение ​

Режим с рамками ​

Пользовательское содержимое ​

Интернационализация ​

API ​

Props ​

LhDescriptionsItem ​

Slots ​

Доступность ​

Типы ​