Descripciones

LhDescriptions sirve para mostrar la lista de propiedades de un objeto; admite número de columnas, expansión de columnas y modo con borde.

Uso básico

Archivo de la colección

Nombre: Jarrón azul y blanco con roleos de loto
Época: Dinastía Ming, reinado Yongle

Categoría: Porcelana
Nivel: Reliquia de primera clase

vue

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

<template>
  <LhDescriptions
    title="Archivo de la colección"
    :column="2"
    :items="[
      { label: 'Nombre', value: 'Jarrón azul y blanco con roleos de loto' },
      { label: 'Época', value: 'Dinastía Ming, reinado Yongle' },
      { label: 'Categoría', value: 'Porcelana' },
      { label: 'Nivel', value: 'Reliquia de primera clase' },
    ]"
  />
</template>

vue

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

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

<template>
  <LhDescriptions
    title="Archivo de la colección"
    :column="2"
    :items="[
      { label: 'Nombre', value: 'Jarrón azul y blanco con roleos de loto' },
      { label: 'Época', value: 'Dinastía Ming, reinado Yongle' },
      { label: 'Categoría', value: 'Porcelana' },
      { label: 'Nivel', value: 'Reliquia de primera clase' },
    ]"
  />
</template>

Número de columnas y expansión de columnas

Nombre: Mil li de ríos y montañas
Época: Dinastía Song del Norte

Autor: Wang Ximeng
Material: Tinta y color sobre seda
Ubicación: Museo del Palacio de Pekín

vue

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

<template>
  <LhDescriptions
    :column="3"
    :items="[
      { label: 'Nombre', value: 'Mil li de ríos y montañas', span: 2 },
      { label: 'Época', value: 'Dinastía Song del Norte' },
      { label: 'Autor', value: 'Wang Ximeng' },
      { label: 'Material', value: 'Tinta y color sobre seda' },
      { label: 'Ubicación', value: 'Museo del Palacio de Pekín' },
    ]"
  />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhDescriptions
    :column="3"
    :items="[
      { label: 'Nombre', value: 'Mil li de ríos y montañas', span: 2 },
      { label: 'Época', value: 'Dinastía Song del Norte' },
      { label: 'Autor', value: 'Wang Ximeng' },
      { label: 'Material', value: 'Tinta y color sobre seda' },
      { label: 'Ubicación', value: 'Museo del Palacio de Pekín' },
    ]"
  />
</template>

Si el span supera la anchura restante de la fila, se limita automáticamente; si la última fila queda incompleta, se rellena de forma automática.

Modo con borde

Nombre: Prefacio del Pabellón de las Orquídeas
Autor: Wang Xizhi

Época: Dinastía Jin del Este
Estilo caligráfico: Escritura semicursiva

vue

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

<template>
  <LhDescriptions
    :column="2"
    border
    :items="[
      { label: 'Nombre', value: 'Prefacio del Pabellón de las Orquídeas' },
      { label: 'Autor', value: 'Wang Xizhi' },
      { label: 'Época', value: 'Dinastía Jin del Este' },
      { label: 'Estilo caligráfico', value: 'Escritura semicursiva' },
    ]"
  />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhDescriptions
    :column="2"
    border
    :items="[
      { label: 'Nombre', value: 'Prefacio del Pabellón de las Orquídeas' },
      { label: 'Autor', value: 'Wang Xizhi' },
      { label: 'Época', value: 'Dinastía Jin del Este' },
      { label: 'Estilo caligráfico', value: 'Escritura semicursiva' },
    ]"
  />
</template>

Contenido personalizado

El contenido de una entrada puede sobrescribirse con el slot con alcance item-<index>.

Estado: En curso

Progreso

vue

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

<template>
  <!-- El slot #item-1 sobrescribe la entrada «Progreso» -->
  <LhDescriptions
    :column="1"
    :items="[
      { label: 'Estado', value: 'En curso' },
      { label: 'Progreso', value: '' },
    ]"
  >
    <template #item-1="{ item }">
      <LhProgress :percentage="66" />
    </template>
  </LhDescriptions>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- El slot #item-1 sobrescribe la entrada «Progreso» -->
  <LhDescriptions
    :column="1"
    :items="[
      { label: 'Estado', value: 'En curso' },
      { label: 'Progreso', value: '' },
    ]"
  >
    <template #item-1="{ item }">
      <LhProgress :percentage="66" />
    </template>
  </LhDescriptions>
</template>

Internacionalización

Las etiquetas y el contenido de las entradas pueden internacionalizarse con LhConfigProvider y un paquete de idioma.

藏品档案

名称: Jarrón azul y blanco con roleos de loto
年代: Dinastía Ming, reinado Yongle

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>
  <!-- Cambio de paquete de idioma con ConfigProvider -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhDescriptions
      :title="locale === 'zh-CN' ? '藏品档案' : 'Collection Archive'"
      :column="2"
      :items="[
        { label: locale === 'zh-CN' ? '名称' : 'Name', value: 'Jarrón azul y blanco con roleos de loto' },
        { label: locale === 'zh-CN' ? '年代' : 'Period', value: 'Dinastía Ming, reinado Yongle' },
      ]"
    />
    <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>
  <!-- Cambio de paquete de idioma con ConfigProvider -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhDescriptions
      :title="locale === 'zh-CN' ? '藏品档案' : 'Collection Archive'"
      :column="2"
      :items="[
        { label: locale === 'zh-CN' ? '名称' : 'Name', value: 'Jarrón azul y blanco con roleos de loto' },
        { label: locale === 'zh-CN' ? '年代' : 'Period', value: 'Dinastía Ming, reinado Yongle' },
      ]"
    />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

API

Props

Prop	Descripción	Tipo	Predeterminado
title	Título de la lista	`string`	—
column	Número de columnas de entradas mostradas por fila	`number`	`3`
border	Si se muestran los bordes	`boolean`	`false`
items	Lista de entradas	`[LhDescriptionsItem](#type-LhDescriptionsItem)`[]	`() => []`
sx	Props de disposición rápida (p. ej., `{ mt: 2, w: '50%' }`); se convierten en estilos en línea aplicados al elemento raíz	`LhSxProps`	—

LhDescriptionsItem

Prop	Descripción	Tipo	Predeterminado
label	Etiqueta de la entrada	`string`	—
value	Contenido de la entrada	`string \| number`	—
span	Número de columnas que ocupa; si se supera, se limita	`number`	`1`

Slots

Slot	Descripción	Ámbito
title	Título personalizado	—
item-<index>	Sobrescribe el contenido de la entrada número index	`{ item }`

Accesibilidad

Las entradas usan la estructura semántica <dl> / <dt> / <dd>; la relación entre etiqueta y valor la expresa el propio elemento
Los elementos de relleno al final de una fila son puramente decorativos y se marcan como aria-hidden

Definiciones de tipos

Las estructuras de tipos TypeScript exportadas por este componente (extraídas automáticamente de packages/components/descriptions/src/types.ts y de las fuentes @lh-ui/share/core/*; abre cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhDescriptionsProps

export interface LhDescriptionsProps {
  /** Título de la lista de descripciones */
  title?: string
  /** Número de columnas de entradas mostradas por fila */
  column?: number
  /** Si se muestran los bordes */
  border?: boolean
  /** Lista de entradas: triplete label/value/span */
  items: LhDescriptionsItem[]
  /** Props de disposición rápida */
  sx?: LhSxProps
}

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

export interface LhDescriptionsItem {
  /** Etiqueta de la entrada */
  label: string
  /** Contenido de la entrada (también puede pasarse mediante un slot con alcance) */
  value?: string | number
  /** Número de columnas que ocupa (predeterminado 1; si supera column, se limita) */
  span?: number
}

Descripciones ​

Uso básico ​

Número de columnas y expansión de columnas ​

Modo con borde ​

Contenido personalizado ​

Internacionalización ​

API ​

Props ​

LhDescriptionsItem ​

Slots ​

Accesibilidad ​

Definiciones de tipos ​