Description
Description UI Component
Installation
npm i @synerise/ds-description
or
yarn add @synerise/ds-description
Usage
import Description, {DescriptionRow} from '@synerise/ds-description';
<Description type='inline'>
<DescriptionRow label="Name" value="John Kowalski" prefixEl="Mr" suffix="<Avatar>JK</Avatar>" />
</Description>
Demo
API
Description
Property | Description | Type | Default |
---|---|---|---|
type | Type of description: table - description will looks like vertical table, inline - value will aligns to label, dotted-list - list with dots as prefix, without label, numbered-list - counted list, without labels | table / inline / dotted-list / numbered-list | table |
ratio | Define size of column if type='table' | 20-80 / 30-70 / 40-60 / 50-50 / 60-40 / 70-30 / 80-20 | 30-70 |
DescriptionRow
Property | Description | Type | Default |
---|---|---|---|
label | Label of description row | string | - |
labelIcon | Icon visible before row label | React.ReactNode | - |
value | Value of description row | string / React.ReactNode | - |
prefixEl | Element rendered before value | string / React.ReactNode | - |
suffixEl | Element rendered after value | string / React.ReactNode | - |
copyValue | Whether to render copy icon on the end of row | string | - |
starType | Whether to render star before value, and type of start | active , inactive | - |