List
Components
List()
List(
props
,context
?):ReactNode
A List component is basically a Card that contains multiple items listed line by line. A List differs from a Dropdown in many ways:
- A list displays all the items at once while a dropdown only shows one item until clicked.
- A list is better for multiple selections or navigation. A dropdown is better for single selections and forms.
Parameters
Parameter | Type |
---|---|
props | ListProps |
context ? | any |
Returns
ReactNode
Example
<List
items={[
{ label: 'Upload', icon: <ArrowUpOnSquareIcon />, onClick: () => ({}) },
{ label: 'Edit', icon: <PencilIcon />, onClick: () => ({}) }]}
/>
Source
libs/design-system-core/src/components/List/index.tsx:47
Props
ListItem
ListItem:
object
&TextProps
Type declaration
Member | Type |
---|---|
disabled | boolean |
icon | React.ReactElement |
label | string |
onClick | (label ?) => void |
toolTipContent | string |
Source
libs/design-system-core/src/components/List/index.tsx:11
ListProps
ListProps:
object
Type declaration
Member | Type |
---|---|
customStyle | string |
items | ListItem [] |
onSelected | ({ index, label } ) => void |
ref | LegacyRef <HTMLDivElement > |
showDivider | boolean |