Descriptions

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

Preview

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

Installation

pnpm dlx brutx-vue@latest add descriptions

Usage

<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

<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

<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

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

Props

Descriptions

Prop	Type	Default	Description
column	number	3	Number of columns
border	boolean	false	Whether to show borders
direction	'horizontal' | 'vertical'	'horizontal'	Layout direction
size	'sm' | 'default' | 'lg'	'default'	Component size
title	string	—	Title text
class	string	—	Custom CSS class

DescriptionsItem

Prop	Type	Default	Description
label	string	— (required)	Label text
span	number	1	Number of columns to span
labelWidth	string | number	—	Label width (horizontal direction only)
class	string	—	Custom CSS class

Slots

Descriptions

Slot	Description
default	DescriptionsItem components
title	Custom title content

DescriptionsItem

Slot	Description
default	Content value
label	Custom label content

Accessibility

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