Descriptions

Présente sous forme de tableau des informations clés-valeur ; le nombre de colonnes et l'affichage des bordures sont paramétrables.

Descriptions

<template>
  <div class="demo-col">
    <LhDescriptions title="Voyageurs parmi les montagnes et les rivières · Notice catalogue" :column="2" border :items="items" />
    <LhDescriptions title="Voyageurs parmi les montagnes et les rivières · Sans bordure" :column="3" :items="itemsPlain" />
  </div>
</template>

<script>
export default {
  data: () => ({
    items: [
      { label: 'Auteur', value: 'Fan Kuan' },
      { label: 'Époque', value: 'dynastie Song du Nord' },
      { label: 'Matériau', value: 'Encre de Chine sur soie' },
      { label: 'Collection', value: 'Musée national du Palais à Taipei', span: 2 },
    ],
    itemsPlain: [
      { label: 'Auteur', value: 'Fan Kuan' },
      { label: 'Époque', value: 'dynastie Song du Nord' },
      { label: 'Matériau', value: 'Encre de Chine sur soie' },
    ],
  }),
}
</script>

Props

Prop	Description	Type	Valeur par défaut
title	Titre	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 ; triplet label / value / span	LhDescriptionsItem[]	[]
sx	Raccourci de mise en page sx	—	—

Astuce

Le span d'une entrée d'items contrôle le nombre de colonnes sur lesquelles cette entrée s'étend (1 par défaut), pour les mises en page du type « valeur longue sur toute la ligne ».