Descriptions

Exiba pares chave-valor em um formato estruturado e legível.

Importação

import { Descriptions } from 'asterui'

Exemplos

Descriptions Básico

Exibição simples de chave-valor.

Name	John Doe	Email	john@example.com	Phone	+1 234 567 890
Location	San Francisco, CA	Status	Active

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

Com Bordas

Descriptions com bordas.

Order Details

Order Details
Product	AsterUI Pro	Price	$99.00	Quantity	2
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

Tamanhos

Diferentes variantes de tamanho.

Small

Small
Name	Jane Smith	Role	Engineer	Team	Frontend

Medium

Medium
Name	Jane Smith	Role	Engineer	Team	Frontend

Large

Large
Name	Jane Smith	Role	Engineer	Team	Frontend

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

Título com Extra

Título e conteúdo extra no cabeçalho.

User Profile

User Profile
Name	John Doe	Email	john@example.com	Status	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

Layout Vertical

Layout de rótulo e conteúdo vertical.

Created	Updated	Author
2024-01-15 10:30:00	2024-01-20 14:45:00	Jane 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

Colunas Personalizadas

Controle o número de colunas.

Name	Alice Johnson	Age	28
Gender	Female	Occupation	Software Engineer
Department	Engineering	Start Date	2022-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

Colunas Responsivas

Colunas se ajustam com base na largura da viewport.

Resize window to see columns change

Resize window to see columns change
Field 1	Value 1	Field 2	Value 2	Field 3	Value 3
Field 4	Value 4	Field 5	Value 5	Field 6	Value 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

Com Extensão de Coluna

Itens que ocupam várias colunas.

Name	Product X	SKU	PRD-12345	Category	Electronics
Description	A 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

Extensão Preenchida

Itens que preenchem o espaço restante da linha.

Name	John Doe	Notes	This field fills the remaining space in the row.
Email	john@example.com	Phone	+1 234 567 890	Address	123 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

Sem Dois-pontos

Ocultar os dois-pontos após os rótulos.

Field One	Value One	Field Two	Value Two	Field Three	Value 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

Estilos Personalizados

Aplicar estilos e classes personalizadas às partes semânticas.

Custom Styled

Custom Styled
Name	Jane Doe	Highlighted	This item has custom styles	Status	Active

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

Padrão Composto

Use filhos Descriptions.Item em vez da prop items.

Using Compound Pattern

Using Compound Pattern
Name	John Doe	Email	john@example.com	Phone	+1 234 567 890
Address	123 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

`Descriptions`

Propriedade	Descrição	Tipo	Padrão
`items`	Itens de descrição (alternativa a children)	`DescriptionsItemConfig[]`	-
`title`	Título do bloco de descrições	`React.ReactNode`	-
`extra`	Conteúdo extra no canto superior direito	`React.ReactNode`	-
`column`	Número de colunas (ou configuração responsiva)	`number \| { xs?, sm?, md?, lg?, xl?, 2xl? }`	`3`
`bordered`	Mostrar bordas ao redor das células	`boolean`	`false`
`layout`	Direção do layout	`'horizontal' \| 'vertical'`	`'horizontal'`
`size`	Variante de tamanho	`'sm' \| 'md' \| 'lg'`	`'md'`
`colon`	Mostrar dois-pontos após rótulos	`boolean`	`true`
`styles`	Estilos semânticos para partes do componente	`Partial<Record<SemanticDOM, CSSProperties>>`	-
`classNames`	ClassNames semânticos para partes do componente	`Partial<Record<SemanticDOM, string>>`	-
`labelStyle`	Estilos de rótulo padrão (obsoleto, use styles.label)	`React.CSSProperties`	-
`contentStyle`	Estilos de conteúdo padrão (obsoleto, use styles.content)	`React.CSSProperties`	-
`className`	Classes CSS adicionais	`string`	-
`style`	Estilos inline para elemento raiz	`React.CSSProperties`	-
`data-testid`	ID de teste para o componente	`string`	`'descriptions'`

`DescriptionsItemConfig`

Propriedade	Descrição	Tipo	Padrão
`key`	Chave única para o item (usada para IDs de teste e chaves React)	`string`	-
`label`	Rótulo para o item	`React.ReactNode`	-
`children`	Conteúdo do item	`React.ReactNode`	-
`span`	Número de colunas a ocupar, ou ‘filled’ para preencher espaço restante	`number \| 'filled'`	`1`
`labelStyle`	Estilos de rótulo personalizados	`React.CSSProperties`	-
`contentStyle`	Estilos de conteúdo personalizados	`React.CSSProperties`	-
`labelClassName`	Classe de rótulo personalizada	`string`	-
`contentClassName`	Classe de conteúdo personalizada	`string`	-

`Descriptions.Item` (composto)

Propriedade	Descrição	Tipo	Padrão
`key`	Chave React, extraída pelo pai	`string`	-
`itemKey`	Chave explícita (alternativa à chave React)	`string`	-
`label`	Rótulo para o item	`React.ReactNode`	-
`children`	Conteúdo do item	`React.ReactNode`	-
`span`	Número de colunas a ocupar, ou ‘filled’	`number \| 'filled'`	`1`
`labelStyle`	Estilos de rótulo personalizados	`React.CSSProperties`	-
`contentStyle`	Estilos de conteúdo personalizados	`React.CSSProperties`	-
`labelClassName`	Classe de rótulo personalizada	`string`	-
`contentClassName`	Classe de conteúdo personalizada	`string`	-

Chaves `SemanticDOM`

Propriedade	Descrição	Tipo
`root`	Elemento container raiz	-
`header`	Cabeçalho contendo título e extra	-
`title`	Elemento de título	-
`extra`	Elemento de conteúdo extra	-
`table`	Elemento de tabela	-
`label`	Células de rótulo (elementos th)	-
`content`	Células de conteúdo (elementos td)	-

Acessibilidade

Usa marcação semântica <table> para estrutura adequada
Células de cabeçalho usam atributo scope para leitores de tela
Tabela tem elemento <caption> (visualmente oculto) quando o título é fornecido
Células de conteúdo têm aria-labelledby vinculando a seus rótulos
Dois-pontos após rótulos são marcados com aria-hidden para evitar anúncios redundantes

Descriptions

Importação

Exemplos

Descriptions Básico

Com Bordas

Tamanhos

Título com Extra

Layout Vertical

Colunas Personalizadas

Colunas Responsivas

Com Extensão de Coluna

Extensão Preenchida

Sem Dois-pontos

Estilos Personalizados

Padrão Composto

API

Descriptions

DescriptionsItemConfig

Descriptions.Item (composto)

Chaves SemanticDOM

Acessibilidade

`Descriptions`

`DescriptionsItemConfig`

`Descriptions.Item` (composto)

Chaves `SemanticDOM`