跳转到内容
AsterUI v0.12.76

Descriptions

以结构化、易读的格式显示键值对。

导入

Section titled “导入”
import { Descriptions } from 'asterui'

示例

Section titled “示例”

基础描述列表

简单的键值对显示。

NameJohn DoeEmailjohn@example.comPhone+1 234 567 890
LocationSan Francisco, CAStatusActive
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'name', label: 'Name', children: 'John Doe' },
    { key: 'email', label: 'Email', children: 'john@example.com' },
    { key: 'phone', label: 'Phone', children: '+1 234 567 890' },
    { key: 'location', label: 'Location', children: 'San Francisco, CA' },
    { key: 'status', label: 'Status', children: 'Active' },
  ]
  
  return (
      <Descriptions items={items} />
    )
}

export default App

带边框

带边框的描述列表。

Order Details
Order Details
ProductAsterUI ProPrice$99.00Quantity2
Total$198.00
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'product', label: 'Product', children: 'AsterUI Pro' },
    { key: 'price', label: 'Price', children: '$99.00' },
    { key: 'quantity', label: 'Quantity', children: '2' },
    { key: 'total', label: 'Total', children: '$198.00' },
  ]
  
  return (
      <Descriptions items={items} bordered title="Order Details" />
    )
}

export default App

尺寸

不同的尺寸变体。

Small
Small
NameJane SmithRoleEngineerTeamFrontend
Medium
Medium
NameJane SmithRoleEngineerTeamFrontend
Large
Large
NameJane SmithRoleEngineerTeamFrontend
 
import { Descriptions, Space } from 'asterui'

function App() {
  const items = [
    { key: 'name', label: 'Name', children: 'Jane Smith' },
    { key: 'role', label: 'Role', children: 'Engineer' },
    { key: 'team', label: 'Team', children: 'Frontend' },
  ]
  
  return (
      <Space direction="vertical" size="lg" className="w-full">
        <Descriptions items={items} size="sm" bordered title="Small" />
        <Descriptions items={items} size="md" bordered title="Medium" />
        <Descriptions items={items} size="lg" bordered title="Large" />
      </Space>
    )
}

export default App

带标题和额外内容

在头部显示标题和额外内容。

User Profile
User Profile
NameJohn DoeEmailjohn@example.comStatus
Active
 
import { Descriptions, Button, Badge } from 'asterui'

function App() {
  const items = [
    { key: 'name', label: 'Name', children: 'John Doe' },
    { key: 'email', label: 'Email', children: 'john@example.com' },
    { key: 'status', label: 'Status', children: <Badge color="success">Active</Badge> },
  ]
  
  return (
      <Descriptions
        items={items}
        bordered
        title="User Profile"
        extra={<Button size="sm">Edit</Button>}
      />
    )
}

export default App

垂直布局

标签和内容垂直布局。

CreatedUpdatedAuthor
2024-01-15 10:30:002024-01-20 14:45:00Jane Smith
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'created', label: 'Created', children: '2024-01-15 10:30:00' },
    { key: 'updated', label: 'Updated', children: '2024-01-20 14:45:00' },
    { key: 'author', label: 'Author', children: 'Jane Smith' },
  ]
  
  return (
      <Descriptions items={items} layout="vertical" bordered />
    )
}

export default App

自定义列数

控制列的数量。

NameAlice JohnsonAge28
GenderFemaleOccupationSoftware Engineer
DepartmentEngineeringStart Date2022-03-15
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'name', label: 'Name', children: 'Alice Johnson' },
    { key: 'age', label: 'Age', children: '28' },
    { key: 'gender', label: 'Gender', children: 'Female' },
    { key: 'occupation', label: 'Occupation', children: 'Software Engineer' },
    { key: 'department', label: 'Department', children: 'Engineering' },
    { key: 'start-date', label: 'Start Date', children: '2022-03-15' },
  ]
  
  return (
      <Descriptions items={items} column={2} bordered />
    )
}

export default App

响应式列数

列数根据视口宽度调整。

Resize window to see columns change
Resize window to see columns change
Field 1Value 1Field 2Value 2Field 3Value 3
Field 4Value 4Field 5Value 5Field 6Value 6
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'field1', label: 'Field 1', children: 'Value 1' },
    { key: 'field2', label: 'Field 2', children: 'Value 2' },
    { key: 'field3', label: 'Field 3', children: 'Value 3' },
    { key: 'field4', label: 'Field 4', children: 'Value 4' },
    { key: 'field5', label: 'Field 5', children: 'Value 5' },
    { key: 'field6', label: 'Field 6', children: 'Value 6' },
  ]
  
  return (
      <Descriptions
        items={items}
        bordered
        column={{ xs: 1, sm: 2, md: 3, lg: 4 }}
        title="Resize window to see columns change"
      />
    )
}

export default App

列跨度

跨越多列的项目。

NameProduct XSKUPRD-12345CategoryElectronics
DescriptionA detailed product description that spans multiple columns for better readability.
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'name', label: 'Name', children: 'Product X' },
    { key: 'sku', label: 'SKU', children: 'PRD-12345' },
    { key: 'category', label: 'Category', children: 'Electronics' },
    { key: 'description', label: 'Description', children: 'A detailed product description that spans multiple columns for better readability.', span: 3 },
  ]
  
  return (
      <Descriptions items={items} bordered />
    )
}

export default App

填充跨度

填充剩余行空间的项目。

NameJohn DoeNotesThis field fills the remaining space in the row.
Emailjohn@example.comPhone+1 234 567 890Address123 Main St, San Francisco, CA 94102
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'name', label: 'Name', children: 'John Doe' },
    { key: 'notes', label: 'Notes', children: 'This field fills the remaining space in the row.', span: 'filled' as const },
    { key: 'email', label: 'Email', children: 'john@example.com' },
    { key: 'phone', label: 'Phone', children: '+1 234 567 890' },
    { key: 'address', label: 'Address', children: '123 Main St, San Francisco, CA 94102', span: 'filled' as const },
  ]
  
  return (
      <Descriptions items={items} bordered />
    )
}

export default App

无冒号

隐藏标签后的冒号。

Field OneValue OneField TwoValue TwoField ThreeValue Three
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'field1', label: 'Field One', children: 'Value One' },
    { key: 'field2', label: 'Field Two', children: 'Value Two' },
    { key: 'field3', label: 'Field Three', children: 'Value Three' },
  ]
  
  return (
      <Descriptions items={items} colon={false} bordered />
    )
}

export default App

自定义样式

为语义部分应用自定义样式和类名。

Custom Styled
Custom Styled
NameJane DoeHighlightedThis item has custom stylesStatusActive
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'name', label: 'Name', children: 'Jane Doe' },
    { key: 'highlight', label: 'Highlighted', children: 'This item has custom styles', labelClassName: 'text-primary', contentClassName: 'text-accent font-bold' },
    { key: 'status', label: 'Status', children: 'Active' },
  ]
  
  return (
      <Descriptions
        items={items}
        bordered
        styles={{
          label: { backgroundColor: 'oklch(var(--b2))' },
          content: { backgroundColor: 'oklch(var(--b1))' },
        }}
        classNames={{
          title: 'text-primary',
        }}
        title="Custom Styled"
      />
    )
}

export default App

组合模式

使用 Descriptions.Item 子元素代替 items 属性。

Using Compound Pattern
Using Compound Pattern
NameJohn DoeEmailjohn@example.comPhone+1 234 567 890
Address123 Main Street, San Francisco, CA 94102
 
import { Descriptions } from 'asterui'

function App() {
  const { Item } = Descriptions
  
  return (
      <Descriptions bordered title="Using Compound Pattern">
        <Item key="name" label="Name">John Doe</Item>
        <Item key="email" label="Email">john@example.com</Item>
        <Item key="phone" label="Phone">+1 234 567 890</Item>
        <Item key="address" label="Address" span={3}>
          123 Main Street, San Francisco, CA 94102
        </Item>
      </Descriptions>
    )
}

export default App

API

Section titled “API”

Descriptions

Section titled “Descriptions”
属性描述类型默认值
items描述项目（children 的替代方案）DescriptionsItemConfig[]-
title描述列表的标题React.ReactNode-
extra右上角的额外内容React.ReactNode-
column列数（或响应式配置）number | { xs?, sm?, md?, lg?, xl?, 2xl? }3
bordered在单元格周围显示边框booleanfalse
layout布局方向'horizontal' | 'vertical''horizontal'
size尺寸变体'sm' | 'md' | 'lg''md'
colon在标签后显示冒号booleantrue
styles组件部分的语义样式Partial<Record<SemanticDOM, CSSProperties>>-
classNames组件部分的语义类名Partial<Record<SemanticDOM, string>>-
labelStyle默认标签样式（已弃用，使用 styles.label）React.CSSProperties-
contentStyle默认内容样式（已弃用，使用 styles.content）React.CSSProperties-
className额外的 CSS 类名string-
style根元素的内联样式React.CSSProperties-
data-testid组件的测试 IDstring'descriptions'

DescriptionsItemConfig

Section titled “DescriptionsItemConfig”
属性描述类型默认值
key项目的唯一键（用于测试 ID 和 React 键）string-
label项目的标签React.ReactNode-
children项目的内容React.ReactNode-
span跨越的列数，或 ‘filled’ 填充剩余空间number | 'filled'1
labelStyle自定义标签样式React.CSSProperties-
contentStyle自定义内容样式React.CSSProperties-
labelClassName自定义标签类名string-
contentClassName自定义内容类名string-

Descriptions.Item (组合模式)

Section titled “Descriptions.Item (组合模式)”
属性描述类型默认值
keyReact 键，由父组件提取string-
itemKey显式键（React key 的替代方案）string-
label项目的标签React.ReactNode-
children项目的内容React.ReactNode-
span跨越的列数，或 ‘filled’number | 'filled'1
labelStyle自定义标签样式React.CSSProperties-
contentStyle自定义内容样式React.CSSProperties-
labelClassName自定义标签类名string-
contentClassName自定义内容类名string-

SemanticDOM 键

Section titled “SemanticDOM 键”
属性描述类型
root根容器元素-
header包含标题和额外内容的头部-
title标题元素-
extra额外内容元素-
table表格元素-
label标签单元格（th 元素）-
content内容单元格（td 元素）-

无障碍

Section titled “无障碍”
  • 使用语义化的 <table> 标记确保正确的结构
  • 头部单元格使用 scope 属性，方便屏幕阅读器使用
  • 当提供标题时，表格有 <caption> 元素（视觉上隐藏）
  • 内容单元格通过 aria-labelledby 链接到其标签
  • 标签后的冒号用 aria-hidden 标记，以避免重复朗读