Descriptions 記述リスト

LhDescriptions はオブジェクトのプロパティリストを表示するために使用します。列数・列またぎ・ボーダーモードをサポートします。

基本的な使い方

タイトル + 項目リスト

所蔵品档案

名称

青花纏枝蓮文瓶

年代

明の永楽

类别

磁器

級別

一級文物

<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>

<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>

列数と列またぎ

column で 1 行の列数を、item の span で列またぎを制御

名称

千里江山図

年代

北宋

作者

王希孟

材質

絹本設色

所蔵先

北京故宮博物院

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

<template>
  <LhDescriptions
    :column="3"
    :items="[
      { label: '名称', value: '千里江山図', span: 2 },
      { label: '年代', value: '北宋' },
      { label: '作者', value: '王希孟' },
      { label: '材質', value: '絹本設色' },
      { label: '所蔵先', value: '北京故宮博物院' },
    ]"
  />
</template>

<script>
export default {}
</script>

<template>
  <LhDescriptions
    :column="3"
    :items="[
      { label: '名称', value: '千里江山図', span: 2 },
      { label: '年代', value: '北宋' },
      { label: '作者', value: '王希孟' },
      { label: '材質', value: '絹本設色' },
      { label: '所蔵先', value: '北京故宮博物院' },
    ]"
  />
</template>

span がその行の残り幅を超える場合は自動的にクランプされます。最後の行の足りない分は自動的に埋められます。

ボーダーモード

border でテーブルボーダーを表示

名称

蘭亭序

作者

王羲之

年代

東晋

書体

行書

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

<template>
  <LhDescriptions
    :column="2"
    border
    :items="[
      { label: '名称', value: '蘭亭序' },
      { label: '作者', value: '王羲之' },
      { label: '年代', value: '東晋' },
      { label: '書体', value: '行書' },
    ]"
  />
</template>

<script>
export default {}
</script>

<template>
  <LhDescriptions
    :column="2"
    border
    :items="[
      { label: '名称', value: '蘭亭序' },
      { label: '作者', value: '王羲之' },
      { label: '年代', value: '東晋' },
      { label: '書体', value: '行書' },
    ]"
  />
</template>

カスタム内容

項目の内容は item-<index> スコープスロットで上書きできます。

スコープスロット

ステータス

進行中

進捗

<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>

<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 と言語パックを組み合わせることで国際化切り替えを実現できます。

国際化

Collection Archive

Name

青花纏枝蓮文瓶

Period

明の永楽

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

const locale = ref('ja-JP')
</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>

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

export default {
  components: { LhConfigProvider, LhDescriptions, LhButton },
  data() {
    return {
      locale: 'ja-JP',
      jaJP: jaJP,
      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	1 行に表示する項目の列数	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
  /** 1 行に表示する項目の列数 */
  column?: number
  /** ボーダーを表示するかどうか */
  border?: boolean
  /** 項目リスト。label/value/span の 3 つ組 */
  items: LhDescriptionsItem[]
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhDescriptionsItem _{（@lh-ui/share/core/descriptions より）}

export interface LhDescriptionsItem {
  /** 項目のラベル */
  label: string
  /** 項目の内容（スコープスロットで渡すことも可能） */
  value?: string | number
  /** 占める列数（デフォルト 1。column を超えるとクランプされます） */
  span?: number
}