Descriptions

Muestra pares clave-valor en un formato estructurado y legible.

Importar

import { Descriptions } from 'asterui'

Ejemplos

Descriptions Básico

Visualización simple de clave-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

Con Bordes

Descriptions con bordes.

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

Tamaños

Diferentes variantes de tamaño.

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 con Extra

Título y contenido adicional en el encabezado.

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

Diseño Vertical

Diseño vertical de etiqueta y contenido.

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

Columnas Personalizadas

Controla el número de columnas.

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

Columnas Responsivas

Las columnas se ajustan según el ancho de la ventana.

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

Con Expansión de Columnas

Elementos que abarcan múltiples columnas.

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

Expansión Rellena

Elementos que llenan el espacio restante de la fila.

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

Sin Dos Puntos

Oculta los dos puntos después de las etiquetas.

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

Aplica estilos y clases personalizadas a 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

Patrón Compuesto

Usa elementos hijos Descriptions.Item en lugar de la 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`

Propiedad	Descripción	Tipo	Predeterminado
`items`	Elementos de descripción (alternativa a children)	`DescriptionsItemConfig[]`	-
`title`	Título del bloque de descripciones	`React.ReactNode`	-
`extra`	Contenido adicional en la esquina superior derecha	`React.ReactNode`	-
`column`	Número de columnas (o configuración responsiva)	`number \| { xs?, sm?, md?, lg?, xl?, 2xl? }`	`3`
`bordered`	Mostrar bordes alrededor de las celdas	`boolean`	`false`
`layout`	Dirección del diseño	`'horizontal' \| 'vertical'`	`'horizontal'`
`size`	Variante de tamaño	`'sm' \| 'md' \| 'lg'`	`'md'`
`colon`	Mostrar dos puntos después de las etiquetas	`boolean`	`true`
`styles`	Estilos semánticos para partes del componente	`Partial<Record<SemanticDOM, CSSProperties>>`	-
`classNames`	Nombres de clase semánticos para partes del componente	`Partial<Record<SemanticDOM, string>>`	-
`labelStyle`	Estilos de etiqueta predeterminados (obsoleto, usa styles.label)	`React.CSSProperties`	-
`contentStyle`	Estilos de contenido predeterminados (obsoleto, usa styles.content)	`React.CSSProperties`	-
`className`	Clases CSS adicionales	`string`	-
`style`	Estilos en línea para el elemento raíz	`React.CSSProperties`	-
`data-testid`	ID de prueba para el componente	`string`	`'descriptions'`

`DescriptionsItemConfig`

Propiedad	Descripción	Tipo	Predeterminado
`key`	Clave única para el elemento (usada para IDs de prueba y claves de React)	`string`	-
`label`	Etiqueta para el elemento	`React.ReactNode`	-
`children`	Contenido del elemento	`React.ReactNode`	-
`span`	Número de columnas que abarca, o ‘filled’ para llenar el espacio restante	`number \| 'filled'`	`1`
`labelStyle`	Estilos de etiqueta personalizados	`React.CSSProperties`	-
`contentStyle`	Estilos de contenido personalizados	`React.CSSProperties`	-
`labelClassName`	Clase de etiqueta personalizada	`string`	-
`contentClassName`	Clase de contenido personalizada	`string`	-

`Descriptions.Item` (compuesto)

Propiedad	Descripción	Tipo	Predeterminado
`key`	Clave de React, extraída por el padre	`string`	-
`itemKey`	Clave explícita (alternativa a la clave de React)	`string`	-
`label`	Etiqueta para el elemento	`React.ReactNode`	-
`children`	Contenido del elemento	`React.ReactNode`	-
`span`	Número de columnas que abarca, o ‘filled’	`number \| 'filled'`	`1`
`labelStyle`	Estilos de etiqueta personalizados	`React.CSSProperties`	-
`contentStyle`	Estilos de contenido personalizados	`React.CSSProperties`	-
`labelClassName`	Clase de etiqueta personalizada	`string`	-
`contentClassName`	Clase de contenido personalizada	`string`	-

Claves `SemanticDOM`

Propiedad	Descripción	Tipo
`root`	Elemento contenedor raíz	-
`header`	Encabezado que contiene título y extra	-
`title`	Elemento de título	-
`extra`	Elemento de contenido adicional	-
`table`	Elemento de tabla	-
`label`	Celdas de etiqueta (elementos th)	-
`content`	Celdas de contenido (elementos td)	-

Accesibilidad

Usa marcado semántico <table> para una estructura adecuada
Las celdas de encabezado usan el atributo scope para lectores de pantalla
La tabla tiene un elemento <caption> (visualmente oculto) cuando se proporciona un título
Las celdas de contenido tienen aria-labelledby vinculando a sus etiquetas
Los dos puntos después de las etiquetas están marcados con aria-hidden para evitar anuncios redundantes

Descriptions

Importar

Ejemplos

Descriptions Básico

Con Bordes

Tamaños

Título con Extra

Diseño Vertical

Columnas Personalizadas

Columnas Responsivas

Con Expansión de Columnas

Expansión Rellena

Sin Dos Puntos

Estilos Personalizados

Patrón Compuesto

API

Descriptions

DescriptionsItemConfig

Descriptions.Item (compuesto)

Claves SemanticDOM

Accesibilidad

`Descriptions`

`DescriptionsItemConfig`

`Descriptions.Item` (compuesto)

Claves `SemanticDOM`