DescriptionList 描述列表

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

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

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

export default function Demo() {
  return (
    <DescriptionList className="max-w-sm">
      <DescriptionTerm>作品名称</DescriptionTerm>
      <DescriptionDetails>狼と香辛料</DescriptionDetails>
      <DescriptionTerm>作者</DescriptionTerm>
      <DescriptionDetails>支倉凍砂</DescriptionDetails>
      <DescriptionTerm>发行日期</DescriptionTerm>
      <DescriptionDetails>2026 年 3 月 14 日</DescriptionDetails>
    </DescriptionList>
  )
}

tsx

用法

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

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

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

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

export default function Demo() {
  return (
    <DescriptionList className="max-w-sm">
      <DescriptionTerm>状态</DescriptionTerm>
      <DescriptionDetails>连载中</DescriptionDetails>
      <DescriptionTerm>分级</DescriptionTerm>
      <DescriptionDetails>全年龄</DescriptionDetails>
    </DescriptionList>
  )
}

tsx

示例

两列布局

在组件上改写为网格，可以把名称与取值排成左右两列。后台详情页多用这种形态。

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

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

export default function Demo() {
  return (
    <DescriptionList className="grid max-w-md grid-cols-[8rem_1fr] gap-y-3 [&>dd]:m-0! [&>dt]:m-0!">
      <DescriptionTerm>作品名称</DescriptionTerm>
      <DescriptionDetails>狼と香辛料</DescriptionDetails>
      <DescriptionTerm>出版社</DescriptionTerm>
      <DescriptionDetails>電撃文庫</DescriptionDetails>
      <DescriptionTerm>册数</DescriptionTerm>
      <DescriptionDetails>全 7 卷</DescriptionDetails>
    </DescriptionList>
  )
}

tsx

一个名称多个取值

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

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

import { DescriptionDetails, DescriptionList, DescriptionTerm, Inline, Tag } from '@hina-ui/react'

export default function Demo() {
  return (
    <DescriptionList className="max-w-sm">
      <DescriptionTerm>作者</DescriptionTerm>
      <DescriptionDetails>支倉凍砂</DescriptionDetails>
      <DescriptionDetails>文倉十</DescriptionDetails>
      <DescriptionTerm>标签</DescriptionTerm>
      <DescriptionDetails>
        <Inline align="center">
          <Tag>科幻</Tag>
          <Tag>校园</Tag>
          <Tag>治愈</Tag>
        </Inline>
      </DescriptionDetails>
    </DescriptionList>
  )
}

tsx

正文中的描述列表

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

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

格式: EPUB、PDF
大小: 18.4 MB

import { Prose } from '@hina-ui/react'

export default function Demo() {
  return (
    <Prose className="max-w-sm">
      <p>正文中的描述列表不需要单独引入组件。</p>
      <dl>
        <dt>格式</dt>
        <dd>EPUB、PDF</dd>
        <dt>大小</dt>
        <dd>18.4 MB</dd>
      </dl>
    </Prose>
  )
}

tsx

API

DescriptionList

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

属性	说明
`children`	`DescriptionTerm` 与 `DescriptionDetails` 条目

DescriptionTerm

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

属性	说明
`children`	名称文字

DescriptionDetails

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

属性	说明
`children`	取值内容

用法

示例