Descriptions 설명 목록

LhDescriptions는 객체의 속성 목록을 표시하며, 열 수, 열 합치기, 테두리 모드를 지원합니다.

기본 사용법

제목 + 항목 목록

소장품 기록

이름

청화백자 당초연화문 병

연대

명 영락

종류

도자기

등급

1급 문물

<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: '1급 문물' },
    ]"
  />
</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: '1급 문물' },
    ]"
  />
</template>

열 수와 열 합치기

column으로 각 행의 열 수를, 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와 언어 팩으로 국제화 전환을 구현할 수 있습니다.

국제화

藏品档案

名称

청화백자 당초연화문 병

年代

명 영락

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

<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 3개 값 */
  items: LhDescriptionsItem[]
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhDescriptionsItem _{(@lh-ui/share/core/descriptions에서 가져옴)}

export interface LhDescriptionsItem {
  /** 항목 라벨 */
  label: string
  /** 항목 내용(범위 슬롯으로 전달할 수도 있음) */
  value?: string | number
  /** 차지하는 열 수(기본 1, column을 초과하면 제한됨) */
  span?: number
}