DescriptionList 描述列表

成组的名称与取值，用于详情页的属性罗列。

作品名称: 狼と香辛料
作者: 支倉凍砂
发行日期: 2026 年 3 月 14 日

<script setup lang="ts">
  import { DescriptionDetails, DescriptionList, DescriptionTerm } from '@hina-ui/vue'
</script>

<template>
  <DescriptionList class="max-w-sm">
    <DescriptionTerm>作品名称</DescriptionTerm>
    <DescriptionDetails>狼と香辛料</DescriptionDetails>
    <DescriptionTerm>作者</DescriptionTerm>
    <DescriptionDetails>支倉凍砂</DescriptionDetails>
    <DescriptionTerm>发行日期</DescriptionTerm>
    <DescriptionDetails>2026 年 3 月 14 日</DescriptionDetails>
  </DescriptionList>
</template>

vue

用法

import { DescriptionList, DescriptionTerm, DescriptionDetails } from '@hina-ui/vue'

DescriptionList 渲染为原生的 dl，名称用 DescriptionTerm（dt），取值用 DescriptionDetails（dd）。默认自上而下排列，名称使用中等字重。

状态: 连载中
分级: 全年龄

<script setup lang="ts">
  import { DescriptionDetails, DescriptionList, DescriptionTerm } from '@hina-ui/vue'
</script>

<template>
  <DescriptionList class="max-w-sm">
    <DescriptionTerm>状态</DescriptionTerm>
    <DescriptionDetails>连载中</DescriptionDetails>
    <DescriptionTerm>分级</DescriptionTerm>
    <DescriptionDetails>全年龄</DescriptionDetails>
  </DescriptionList>
</template>

vue

示例

两列布局

orientation="horizontal" 把名称与取值排成左右两列：名称一列，取值一列。后台详情页多用这种形态。

作品名称: 狼と香辛料
出版社: 電撃文庫
册数: 全 7 卷

<script setup lang="ts">
  import { DescriptionDetails, DescriptionList, DescriptionTerm } from '@hina-ui/vue'
</script>

<template>
  <DescriptionList orientation="horizontal" class="max-w-md">
    <DescriptionTerm>作品名称</DescriptionTerm>
    <DescriptionDetails>狼と香辛料</DescriptionDetails>
    <DescriptionTerm>出版社</DescriptionTerm>
    <DescriptionDetails>電撃文庫</DescriptionDetails>
    <DescriptionTerm>册数</DescriptionTerm>
    <DescriptionDetails>全 7 卷</DescriptionDetails>
  </DescriptionList>
</template>

vue

名称列的宽度取最长的名称。--hn-dl-term-width 可以改成固定宽度，多个列表上下对齐时使用。

<DescriptionList orientation="horizontal" class="[--hn-dl-term-width:8rem]">…</DescriptionList>

vue

一个名称多个取值

一个 dt 后面可以跟多个 dd。取值中也可以放入其他组件。

作者: 支倉凍砂; 文倉十
标签: 科幻校园治愈

<script setup lang="ts">
  import { DescriptionDetails, DescriptionList, DescriptionTerm, Inline, Tag } from '@hina-ui/vue'
</script>

<template>
  <DescriptionList class="max-w-sm">
    <DescriptionTerm>作者</DescriptionTerm>
    <DescriptionDetails>支倉凍砂</DescriptionDetails>
    <DescriptionDetails>文倉十</DescriptionDetails>
    <DescriptionTerm>标签</DescriptionTerm>
    <DescriptionDetails>
      <Inline align="center">
        <Tag>科幻</Tag>
        <Tag>校园</Tag>
        <Tag>治愈</Tag>
      </Inline>
    </DescriptionDetails>
  </DescriptionList>
</template>

vue

正文中的描述列表

Prose 会为其中的原生 dl 应用同一套样式。渲染 Markdown 或者富文本时不需要替换标签。

正文中的描述列表不需要单独引入组件。

格式: EPUB、PDF
大小: 18.4 MB

<script setup lang="ts">
  import { Prose } from '@hina-ui/vue'
</script>

<template>
  <Prose class="max-w-sm">
    <p>正文中的描述列表不需要单独引入组件。</p>
    <dl>
      <dt>格式</dt>
      <dd>EPUB、PDF</dd>
      <dt>大小</dt>
      <dd>18.4 MB</dd>
    </dl>
  </Prose>
</template>

vue

API

DescriptionList

属性	类型	默认值	说明
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	排列方向；`horizontal` 时名称与取值各占一列
`class`	`string`	—	追加至根元素的类名

插槽	说明
`default`	`DescriptionTerm` 与 `DescriptionDetails` 条目

DescriptionTerm

属性	类型	默认值	说明
`class`	`string`	—	追加至根元素的类名

插槽	说明
`default`	名称文字

DescriptionDetails

属性	类型	默认值	说明
`class`	`string`	—	追加至根元素的类名

插槽	说明
`default`	取值内容

用法

示例