Descriptions

LhDescriptions permet d'afficher la liste des propriétés d'un objet, avec la prise en charge du nombre de colonnes, des colonnes fusionnées et du mode bordure.

Utilisation de base

Archives de la collection

Nom: Vase à décor de lotus enchevêtré en porcelaine bleue et blanche
Époque: Yongle (Ming)

Catégorie: Porcelaine
Niveau: Relique de première classe

vue

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

<template>
  <LhDescriptions
    title="Archives de la collection"
    :column="2"
    :items="[
      { label: 'Nom', value: 'Vase à décor de lotus enchevêtré en porcelaine bleue et blanche' },
      { label: 'Époque', value: 'Yongle (Ming)' },
      { label: 'Catégorie', value: 'Porcelaine' },
      { label: 'Niveau', value: 'Relique de première classe' },
    ]"
  />
</template>

vue

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

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

<template>
  <LhDescriptions
    title="Archives de la collection"
    :column="2"
    :items="[
      { label: 'Nom', value: 'Vase à décor de lotus enchevêtré en porcelaine bleue et blanche' },
      { label: 'Époque', value: 'Yongle (Ming)' },
      { label: 'Catégorie', value: 'Porcelaine' },
      { label: 'Niveau', value: 'Relique de première classe' },
    ]"
  />
</template>

Nombre de colonnes et fusion

Nom: Mille lieues de fleuves et de montagnes
Époque: Song du Nord

Auteur: Wang Ximeng
Matériau: Encre et couleurs sur soie
Conservé à: Musée du Palais de Pékin

vue

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

<template>
  <LhDescriptions
    :column="3"
    :items="[
      { label: 'Nom', value: 'Mille lieues de fleuves et de montagnes', span: 2 },
      { label: 'Époque', value: 'Song du Nord' },
      { label: 'Auteur', value: 'Wang Ximeng' },
      { label: 'Matériau', value: 'Encre et couleurs sur soie' },
      { label: 'Conservé à', value: 'Musée du Palais de Pékin' },
    ]"
  />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhDescriptions
    :column="3"
    :items="[
      { label: 'Nom', value: 'Mille lieues de fleuves et de montagnes', span: 2 },
      { label: 'Époque', value: 'Song du Nord' },
      { label: 'Auteur', value: 'Wang Ximeng' },
      { label: 'Matériau', value: 'Encre et couleurs sur soie' },
      { label: 'Conservé à', value: 'Musée du Palais de Pékin' },
    ]"
  />
</template>

Un span qui déborde de la largeur restante de la ligne est automatiquement borné ; la dernière ligne est automatiquement complétée si elle est incomplète.

Mode bordure

Nom: Pavillon des orchidées
Auteur: Wang Xizhi

Époque: Jin oriental
Style: Script courant

vue

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

<template>
  <LhDescriptions
    :column="2"
    border
    :items="[
      { label: 'Nom', value: 'Pavillon des orchidées' },
      { label: 'Auteur', value: 'Wang Xizhi' },
      { label: 'Époque', value: 'Jin oriental' },
      { label: 'Style', value: 'Script courant' },
    ]"
  />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhDescriptions
    :column="2"
    border
    :items="[
      { label: 'Nom', value: 'Pavillon des orchidées' },
      { label: 'Auteur', value: 'Wang Xizhi' },
      { label: 'Époque', value: 'Jin oriental' },
      { label: 'Style', value: 'Script courant' },
    ]"
  />
</template>

Contenu personnalisé

Le contenu d'une entrée peut être remplacé par le slot scopé item-<index>.

État: En cours

Progression

vue

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

<template>
  <!-- Remplacer l'entrée « Progression » au moyen du slot #item-1 -->
  <LhDescriptions
    :column="1"
    :items="[
      { label: 'État', value: 'En cours' },
      { label: 'Progression', value: '' },
    ]"
  >
    <template #item-1="{ item }">
      <LhProgress :percentage="66" />
    </template>
  </LhDescriptions>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- Remplacer l'entrée « Progression » au moyen du slot #item-1 -->
  <LhDescriptions
    :column="1"
    :items="[
      { label: 'État', value: 'En cours' },
      { label: 'Progression', value: '' },
    ]"
  >
    <template #item-1="{ item }">
      <LhProgress :percentage="66" />
    </template>
  </LhDescriptions>
</template>

Internationalisation

Les étiquettes et le contenu des entrées peuvent être internationalisés au moyen de LhConfigProvider et des packs de langue.

藏品档案

名称: 青花缠枝莲纹瓶
年代: 明永乐

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>
  <!-- Changement de pack de langue via 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>
  <!-- Changement de pack de langue via 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

Propriété	Description	Type	Valeur par défaut
title	Titre de la liste	`string`	—
column	Nombre de colonnes d'entrées affichées par ligne	`number`	`3`
border	Afficher les bordures	`boolean`	`false`
items	Liste des entrées	`[LhDescriptionsItem](#type-LhDescriptionsItem)`[]	`() => []`
sx	Propriétés de mise en page rapide (par exemple `{ mt: 2, w: '50%' }`), converties en style inline appliqué à l'élément racine	`LhSxProps`	—

LhDescriptionsItem

Propriété	Description	Type	Valeur par défaut
label	Étiquette de l'entrée	`string`	—
value	Contenu de l'entrée	`string \| number`	—
span	Nombre de colonnes occupées, borné en cas de débordement	`number`	`1`

Slots

Slot	Description	Portée
title	Titre personnalisé	—
item-<index>	Remplace le contenu de l'entrée d'index donné	`{ item }`

Accessibilité

Les entrées reposent sur la structure sémantique <dl> / <dt> / <dd>, la correspondance étiquette/valeur étant portée par les éléments eux-mêmes
Les éléments de complément en fin de ligne sont purement décoratifs et marqués aria-hidden

Définitions de types

Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/descriptions/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :

LhDescriptionsProps

export interface LhDescriptionsProps {
  /** Titre de la liste de descriptions */
  title?: string
  /** Nombre de colonnes d'entrées affichées par ligne */
  column?: number
  /** Afficher les bordures */
  border?: boolean
  /** Liste des entrées ; triplet label/value/span */
  items: LhDescriptionsItem[]
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhDescriptionsItem _{(provient de @lh-ui/share/core/descriptions)}

export interface LhDescriptionsItem {
  /** Étiquette de l'entrée */
  label: string
  /** Contenu de l'entrée (un slot scopé peut également être utilisé) */
  value?: string | number
  /** Nombre de colonnes occupées (1 par défaut, borné par column en cas de débordement) */
  span?: number
}

Descriptions ​

Utilisation de base ​

Nombre de colonnes et fusion ​

Mode bordure ​

Contenu personnalisé ​

Internationalisation ​

API ​

Props ​

LhDescriptionsItem ​

Slots ​

Accessibilité ​

Définitions de types ​