Descriptions

Afficher des paires clé-valeur dans un format structuré et lisible.

Importation

import { Descriptions } from 'asterui'

Exemples

Descriptions de base

Affichage simple de paires clé-valeur.

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

Avec bordures

Descriptions avec bordures.

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

Tailles

Différentes variantes de taille.

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

Titre avec extra

Titre et contenu supplémentaire dans l'en-tête.

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

Disposition verticale

Disposition verticale des étiquettes et du contenu.

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

Colonnes personnalisées

Contrôler le nombre de colonnes.

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

Colonnes réactives

Les colonnes s'ajustent en fonction de la largeur de la fenêtre.

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

Avec espacement de colonnes

Éléments s'étendant sur plusieurs colonnes.

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

Espacement rempli

Éléments qui remplissent l'espace de ligne restant.

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

Sans deux-points

Masquer les deux-points après les étiquettes.

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

Styles personnalisés

Appliquer des styles et classes personnalisés aux parties sémantiques.

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

Modèle composé

Utiliser les enfants Descriptions.Item au lieu 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`

Propriété	Description	Type	Défaut
`items`	Éléments de description (alternative aux enfants)	`DescriptionsItemConfig[]`	-
`title`	Titre du bloc de descriptions	`React.ReactNode`	-
`extra`	Contenu supplémentaire dans le coin supérieur droit	`React.ReactNode`	-
`column`	Nombre de colonnes (ou configuration réactive)	`number \| { xs?, sm?, md?, lg?, xl?, 2xl? }`	`3`
`bordered`	Afficher les bordures autour des cellules	`boolean`	`false`
`layout`	Direction de la disposition	`'horizontal' \| 'vertical'`	`'horizontal'`
`size`	Variante de taille	`'sm' \| 'md' \| 'lg'`	`'md'`
`colon`	Afficher les deux-points après les étiquettes	`boolean`	`true`
`styles`	Styles sémantiques pour les parties du composant	`Partial<Record<SemanticDOM, CSSProperties>>`	-
`classNames`	Classes sémantiques pour les parties du composant	`Partial<Record<SemanticDOM, string>>`	-
`labelStyle`	Styles d’étiquette par défaut (déprécié, utiliser styles.label)	`React.CSSProperties`	-
`contentStyle`	Styles de contenu par défaut (déprécié, utiliser styles.content)	`React.CSSProperties`	-
`className`	Classes CSS supplémentaires	`string`	-
`style`	Styles en ligne pour l’élément racine	`React.CSSProperties`	-
`data-testid`	ID de test pour le composant	`string`	`'descriptions'`

`DescriptionsItemConfig`

Propriété	Description	Type	Défaut
`key`	Clé unique pour l’élément (utilisée pour les ID de test et les clés React)	`string`	-
`label`	Étiquette pour l’élément	`React.ReactNode`	-
`children`	Contenu de l’élément	`React.ReactNode`	-
`span`	Nombre de colonnes à occuper, ou ‘filled’ pour remplir l’espace restant	`number \| 'filled'`	`1`
`labelStyle`	Styles d’étiquette personnalisés	`React.CSSProperties`	-
`contentStyle`	Styles de contenu personnalisés	`React.CSSProperties`	-
`labelClassName`	Classe d’étiquette personnalisée	`string`	-
`contentClassName`	Classe de contenu personnalisée	`string`	-

`Descriptions.Item` (composé)

Propriété	Description	Type	Défaut
`key`	Clé React, extraite par le parent	`string`	-
`itemKey`	Clé explicite (alternative à la clé React)	`string`	-
`label`	Étiquette pour l’élément	`React.ReactNode`	-
`children`	Contenu de l’élément	`React.ReactNode`	-
`span`	Nombre de colonnes à occuper, ou ‘filled’	`number \| 'filled'`	`1`
`labelStyle`	Styles d’étiquette personnalisés	`React.CSSProperties`	-
`contentStyle`	Styles de contenu personnalisés	`React.CSSProperties`	-
`labelClassName`	Classe d’étiquette personnalisée	`string`	-
`contentClassName`	Classe de contenu personnalisée	`string`	-

Clés `SemanticDOM`

Propriété	Description	Type
`root`	Élément conteneur racine	-
`header`	En-tête contenant le titre et l’extra	-
`title`	Élément de titre	-
`extra`	Élément de contenu supplémentaire	-
`table`	Élément de tableau	-
`label`	Cellules d’étiquette (éléments th)	-
`content`	Cellules de contenu (éléments td)	-

Accessibilité

Utilise le balisage sémantique <table> pour une structure appropriée
Les cellules d’en-tête utilisent l’attribut scope pour les lecteurs d’écran
Le tableau a un élément <caption> (visuellement masqué) lorsqu’un titre est fourni
Les cellules de contenu ont aria-labelledby lié à leurs étiquettes
Les deux-points après les étiquettes sont marqués avec aria-hidden pour éviter les annonces redondantes

Descriptions

Importation

Exemples

Descriptions de base

Avec bordures

Tailles

Titre avec extra

Disposition verticale

Colonnes personnalisées

Colonnes réactives

Avec espacement de colonnes

Espacement rempli

Sans deux-points

Styles personnalisés

Modèle composé

API

Descriptions

DescriptionsItemConfig

Descriptions.Item (composé)

Clés SemanticDOM

Accessibilité

`Descriptions`

`DescriptionsItemConfig`

`Descriptions.Item` (composé)

Clés `SemanticDOM`