Descriptions

Display read-only information in key-value pairs. Commonly used in detail pages, profile pages, and data display scenarios.

Preview

基础布局（无边框，2列）

用户信息

姓名

张三

邮箱

zhangsan@example.com

电话

+86 138 0000 0000

地址

北京市朝阳区

带边框布局（3列，部分项跨列）

订单详情

订单号

ORD-2024-001

支付方式

微信支付

状态

已完成

下单时间

2024-01-15 14:32:00

订单金额

¥299.99

收货地址

北京市朝阳区幸福路100号

垂直排列布局（4列）

服务器配置

CPU

4 核

内存

16 GB

系统

Ubuntu 22.04 LTS

带宽

100 Mbps

技术档案印章（stamp 插槽）

机密档案

[ CONFIDENTIAL ]

编号

BX-2077-001

密级

Top Secret

Installation

pnpm dlx brutx-vue@latest add descriptions

Usage

vue

<script setup>
import { Descriptions, DescriptionsItem } from 'brutx-ui-vue'
</script>

<template>
    <Descriptions title="User Information" :column="2">
        <DescriptionsItem label="Name">John Doe</DescriptionsItem>
        <DescriptionsItem label="Email">john@example.com</DescriptionsItem>
        <DescriptionsItem label="Phone">+1 234 567 890</DescriptionsItem>
        <DescriptionsItem label="Address">123 Main St, City</DescriptionsItem>
    </Descriptions>
</template>

With Border

vue

<script setup>
import { Descriptions, DescriptionsItem } from 'brutx-ui-vue'
</script>

<template>
    <Descriptions title="Order Details" border>
        <DescriptionsItem label="Order ID">ORD-2024-001</DescriptionsItem>
        <DescriptionsItem label="Date">2024-01-15</DescriptionsItem>
        <DescriptionsItem label="Status">Completed</DescriptionsItem>
        <DescriptionsItem label="Amount">$299.99</DescriptionsItem>
        <DescriptionsItem label="Note" :span="2">Express shipping requested</DescriptionsItem>
    </Descriptions>
</template>

Vertical Direction

vue

<script setup>
import { Descriptions, DescriptionsItem } from 'brutx-ui-vue'
</script>

<template>
    <Descriptions title="Product Info" direction="vertical" border>
        <DescriptionsItem label="Name">Brutal Keyboard</DescriptionsItem>
        <DescriptionsItem label="Brand">BrutxUI</DescriptionsItem>
        <DescriptionsItem label="Price">$149.99</DescriptionsItem>
    </Descriptions>
</template>

Different Sizes

vue

<script setup>
import { Descriptions, DescriptionsItem } from 'brutx-ui-vue'
</script>

<template>
    <Descriptions size="sm" border>
        <DescriptionsItem label="Small">Content</DescriptionsItem>
    </Descriptions>

    <Descriptions size="default" border>
        <DescriptionsItem label="Default">Content</DescriptionsItem>
    </Descriptions>

    <Descriptions size="lg" border>
        <DescriptionsItem label="Large">Content</DescriptionsItem>
    </Descriptions>
</template>

Sub-components

Component	Description
`Descriptions`	Root container component
`DescriptionsItem`	Single description item (label + content)

API Reference

Descriptions

Descriptions — Props
Name	Type	Default	Description
`column`	`number \| undefined`	`3`	The logical number of description columns. Horizontal bordered layout uses twice as many grid tracks for labels and values; invalid values are normalized to at least one column.
Details Declared type number \| undefined Default value details Declaration `3` Source: packages/ui/src/components/descriptions/Descriptions.vue Resolved value `3` Source Descriptions.vue:8 packages/ui/src/components/descriptions/Descriptions.vue
`border`	`boolean \| undefined`	`false`	Enables the bordered description layout and provides the setting to child items.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Declaration `false` Source: packages/ui/src/components/descriptions/Descriptions.vue Resolved value `false` Source Descriptions.vue:10 packages/ui/src/components/descriptions/Descriptions.vue
`direction`	`"vertical" \| "horizontal" \| undefined`	`"horizontal"`	Selects horizontal or vertical label/value arrangement and provides it to child items.
Details Declared type "vertical" \| "horizontal" \| undefined Literal values `"horizontal"` `"vertical"` Default value details Declaration `'horizontal'` Source: packages/ui/src/components/descriptions/Descriptions.vue Resolved value `"horizontal"` Source Descriptions.vue:12 packages/ui/src/components/descriptions/Descriptions.vue
`size`	`"default" \| "lg" \| "sm" \| undefined`	`"default"`	Selects the text size associated with small, default, or large.
Details Declared type "default" \| "lg" \| "sm" \| undefined Literal values `"default"` `"lg"` `"sm"` Default value details Declaration `'default'` Source: packages/ui/src/components/descriptions/Descriptions.vue Resolved value `"default"` Source Descriptions.vue:14 packages/ui/src/components/descriptions/Descriptions.vue
`title`	`string \| undefined`	`undefined`	The description-list title. A non-empty value displays the title area and can be replaced by the title slot.
Details Declared type string \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/descriptions/Descriptions.vue Resolved value `undefined` Source Descriptions.vue:16 packages/ui/src/components/descriptions/Descriptions.vue
`class`	`string \| undefined`	`undefined`	Custom CSS classes appended to the outer descriptions container.
Details Declared type string \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/descriptions/Descriptions.vue Resolved value `undefined` Source Descriptions.vue:17 packages/ui/src/components/descriptions/Descriptions.vue

Descriptions — Slots
Name	Signature or type	Description
`#title`	`{}`	Replaces the title text and default h3 structure. The title area is created only for non-empty title text or when this slot renders non-comment content.
Details Declared type {} Source Descriptions.vue packages/ui/src/components/descriptions/Descriptions.vue
`#stamp`	`{}`	Renders stamp content at the upper-right of the bordered layout; shown only when border is true and this slot is provided.
Details Declared type {} Source Descriptions.vue packages/ui/src/components/descriptions/Descriptions.vue
`#default`	`{}`	Contains DescriptionsItem entries.
Details Declared type {} Source Descriptions.vue packages/ui/src/components/descriptions/Descriptions.vue

DescriptionsItem

DescriptionsItem — Props
Name	Type	Default	Description
`label` Required	`string`	`—`	The description item label text; it can be replaced by the label slot.
Details Declared type string Default value details Not declared `—` Source DescriptionsItem.vue:8 packages/ui/src/components/descriptions/DescriptionsItem.vue
`span`	`number \| undefined`	`1`	The logical columns spanned by the item, normalized to a positive integer. In horizontal bordered layout, each logical column spans two grid tracks.
Details Declared type number \| undefined Default value details Declaration `1` Source: packages/ui/src/components/descriptions/DescriptionsItem.vue Resolved value `1` Source DescriptionsItem.vue:10 packages/ui/src/components/descriptions/DescriptionsItem.vue
`labelWidth`	`string \| number \| undefined`	`undefined`	Sets the label cell width; numbers are treated as pixels and an empty string applies no width. In horizontal bordered layout it does not change the parent grid-track width.
Details Declared type string \| number \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/descriptions/DescriptionsItem.vue Resolved value `undefined` Source DescriptionsItem.vue:12 packages/ui/src/components/descriptions/DescriptionsItem.vue
`class`	`string \| undefined`	`undefined`	Custom CSS classes appended to the description item layout container.
Details Declared type string \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/descriptions/DescriptionsItem.vue Resolved value `undefined` Source DescriptionsItem.vue:13 packages/ui/src/components/descriptions/DescriptionsItem.vue

DescriptionsItem — Slots
Name	Signature or type	Description
`#label`	`{}`	Replaces the label prop text with custom label content.
Details Declared type {} Source DescriptionsItem.vue packages/ui/src/components/descriptions/DescriptionsItem.vue
`#default`	`{}`	Renders the value or descriptive content for this item.
Details Declared type {} Source DescriptionsItem.vue packages/ui/src/components/descriptions/DescriptionsItem.vue

Accessibility

Uses semantic HTML structure
Border mode uses table-like layout for screen reader compatibility
Labels are associated with their values via visual grouping

Descriptions ​

Preview ​

用户信息

订单详情

服务器配置

机密档案

Installation ​

Usage ​

With Border ​

Vertical Direction ​

Different Sizes ​

Sub-components ​

API Reference ​

Descriptions

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Source

Declared type

Source

Declared type

Source

DescriptionsItem

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Source

Declared type

Source

Accessibility ​

Descriptions

Preview

Installation

Usage

With Border

Vertical Direction

Different Sizes

Sub-components

API Reference

Accessibility