Descriptions 描述列表

成组展示多个只读字段，常见于详情页的信息展示。

基础用法

基础用法

不同尺寸

不同尺寸

长文本内容

当描述项包含长文本内容时，组件会自动换行并正确显示。

长文本内容

自定义样式

自定义样式

在 Nuxt 中使用

Descriptions 组件完全支持 Nuxt 3/4 的 SSR 渲染。在 Nuxt 项目中使用时，组件会自动导入，无需手动注册。

在 Nuxt 中使用

SSR 注意事项：

• ✅ 所有 Props 和样式完全支持
• ✅ 插槽内容完整渲染
• ✅ 动态尺寸切换正常工作
• ✅ 自定义样式 SSR 安全

SSR 安全性

Descriptions 组件已通过完整的 SSR 测试，确保服务端和客户端渲染完全一致。

API

Props

属性名	说明	类型	默认值
title	列表标题	string	—
extra	操作区文本，也可通过 extra 插槽传入	string	—
border	是否带有边框	boolean	false
column	一行显示的列数	number	3
direction	排列方向	'horizontal' | 'vertical'	'horizontal'
size	列表尺寸	'large' | 'default' | 'small'	'default'
colon	是否显示冒号（无边框时生效）	boolean	true
label-style	自定义标签样式	CSSProperties	—
content-style	自定义内容样式	CSSProperties	—
label-class-name	自定义标签类名	string	—
content-class-name	自定义内容类名	string	—

Item Props

属性名	说明	类型	默认值
label	标签文本	string	—
span	列的数量	number	1
width	列的宽度，不同布局模式下生效	string | number	—
min-width	列的最小宽度	string | number	—
align	列的内容对齐方式	'left' | 'center' | 'right'	'left'
label-align	列的标签对齐方式	'left' | 'center' | 'right'	'left'
class-name	自定义内容列类名	string	—
label-class-name	自定义标签列类名	string	—
label-style	自定义标签样式	CSSProperties	—
content-style	自定义内容样式	CSSProperties	—

Slots

插槽名	说明
default	描述列表内容，通常是 YhDescriptionsItem
title	自定义标题，会覆盖 title 属性
extra	自定义操作区，会覆盖 extra 属性

Item Slots

插槽名	说明
default	描述项内容
label	自定义标签内容，会覆盖 label 属性

Expose

属性名	说明	类型
—	暂无暴露属性	—

主题变量

Descriptions 组件使用以下 CSS 变量，可以通过覆盖 these 变量来自定义样式：

变量名	说明	默认值
--yh-descriptions-header-margin-bottom	标题与内容的间距	20px
--yh-descriptions-title-font-size	标题字体大小	16px
--yh-descriptions-extra-font-size	操作区字体大小	14px
--yh-descriptions-border-color	边框颜色	var(--yh-border-color-lighter)
--yh-descriptions-item-font-size	单元格字体大小	—
--yh-descriptions-cell-padding-v	单元格垂直内边距	—
--yh-descriptions-cell-padding-h	单元格水平内边距	—

尺寸系统变量

组件的 size 属性会自动切换 --yh-descriptions-item-font-size 以及内边距变量。这些变量在内部关联了 YH-UI 的通用尺寸系统（如 --yh-component-size-default-padding 等），以保证全库尺寸的一致性。

Events

当前组件未暴露组件事件。

类型导出

名称	说明
YhDescriptionsProps	YhDescriptions props 类型
YhDescriptionsSlots	YhDescriptions slots 类型
YhDescriptionsItemProps	YhDescriptionsItem props 类型
YhDescriptionsItemSlots	YhDescriptionsItem slots 类型
YhDescriptionsInstance	YhDescriptions 实例类型
YhDescriptionsItemInstance	YhDescriptionsItem 实例类型