DefinitionList
Maintainer:
Raubzeug
responsive
direction
import {DefinitionList} from '@gravity-ui/uikit';
The component to display definition list with term and definition separated by dots.
Examples
- Node value with copy
- value with copy
- Empty value with copy
- —
<DefinitionList nameMaxWidth={100} contentMaxWidth={100}>
<DefinitionList.Item name="Node value with copy" copyText="value">
<strong>value with copy</strong>
</DefinitionList.Item>
<DefinitionList.Item name="Empty value with copy" copyText="nothing to copy" />
</DefinitionList>Properties
| Name | Description | Type | Default |
|---|---|---|---|
| children | Items of the list | React.ReactNode | |
| responsive | If set to true list will take 100% width of its parent | boolean | |
| direction | If set to vertical content will be located under name and list will take 100% width of its parent | 'horizontal' | 'vertical' | 'horizontal' |
| nameMaxWidth | Maximum width of term | number | |
| contentMaxWidth | Maximum width of definition | number | |
| className | Class name for the definition list | string |
Items
DefinitionList children should be components of type DefinitionList.Item with following properties:
| Name | Description | Type | Default |
|---|---|---|---|
| name | Term | ReactNode | |
| children | Definition | ReactNode | |
| copyText | If set, it will be shown icon for copy this text | string | |
| note | If set, HelpMark will be shown next to term | string | HelpMarkProps |
CSS API
| Name | Description |
|---|---|
--g-definition-list-item-gap | Space between definition list items |