Components

DescriptionList

Shows the fields of a record as term and value pairs, with native dl, dt and dd elements.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { DescriptionList } from '@bigbang/ui';
Source: DescriptionList.tsx
Storybook: DescriptionList · Playground

DescriptionList is in the @bigbang/ui package. Installation and style files are the same as for Button; see the Button code tab.

import { DescriptionList } from '@bigbang/ui';

<DescriptionList
  items={[
    { id: 'name', term: 'Name', details: 'First item' },
    { id: 'status', term: 'Status', details: 'Active' },
  ]}
/>;

The part prop types are exported too: DescriptionListItemProps, DescriptionListTermProps, DescriptionListDetailsProps, DescriptionListActionProps.

Props

items

Description: The rows to show. Use it for the common case; compose children for custom rows. When both are set, items wins.
Type: readonly DescriptionListItem[]

layout

Description: How a term and its details sit: inline puts the term left of the details from 1024 px and stacks them below, stacked always puts the term above the details, grid lays rows out in columns.
Type: Layout
Default: 'inline'

columns

Description: Number of columns from 1024 px; below that the grid is one column. Used by the grid layout only.
Type: Columns
Default: 2

dividers

Description: Draws a 1 px line between rows.
Type: boolean
Default: false

size

Description: Text size and row spacing: sm is 12 px text with 4 px row padding, md is 14 px text with 6 px row padding.
Type: Size
Default: 'md'

emptyLabel

Description: Reason read next to the dash when details are empty. Defaults to the library string "bilgi yok" or "no information".
Type: string

className

Description: For layout only: margins, width and grid placement. Do not use it to change colour or size.
Type: string

children

Description: Rows composed from DescriptionList.Item. Ignored when items is set.
Type: ReactNode

Native attributes (id, aria-*) pass through to the root <dl>. A row has the shape { id?, term, details, action? }.

Parts

Use items for the common case and the parts for custom rows. When items is set, children is ignored.

Part	Element	Props
`DescriptionList.Item`	`<div>`	Native attributes. Wraps the term, the value and the action.
`DescriptionList.Term`	`<dt>`	Native attributes.
`DescriptionList.Details`	`<dd>`	Native attributes. Empty content becomes a dash and a hidden reason.
`DescriptionList.Action`	`<dd>`	Native attributes. Sits at the end of the row.

Data attributes

data-component="description-list", data-layout, data-size, data-dividers: on the root.
data-part: item, term, details, action.

With parts

<DescriptionList layout="stacked">
  <DescriptionList.Item>
    <DescriptionList.Term>Identifier</DescriptionList.Term>
    <DescriptionList.Details>ITEM-1024</DescriptionList.Details>
    <DescriptionList.Action>
      <Button size="sm" variant="tertiary">Copy</Button>
    </DescriptionList.Action>
  </DescriptionList.Item>
</DescriptionList>