List
List views are a great way to show a list of tasks grouped by status and ranked by priority.
Installation
npx kibo-ui@latest add list
Features
- Drag and drop items between groups
- Customize the item contents
Examples
Simple version
Props
The list view is made up of the following subcomponents:
ListProvider
The ListProvider component is used to provide the features to the list.
| Prop | Type | Default |
|---|---|---|
children | ReactNode | - |
onDragEnd | (event: DragEndEvent) => void | - |
className | string | - |
ListGroup
The ListGroup component is used to display a group of items.
| Prop | Type | Default |
|---|---|---|
id | string | - |
children | ReactNode | - |
className | string | - |
ListHeader
The ListHeader component is used to display the header of a group.
| Prop | Type | Default |
|---|
ListItems
The ListItems component is used to display the items of a group.
| Prop | Type | Default |
|---|---|---|
children | ReactNode | - |
className | string | - |
ListItem
The ListItem component is used to display an item.
| Prop | Type | Default |
|---|---|---|
id | string | - |
name | string | - |
index | number | - |
parent | string | - |
children | ReactNode | - |
className | string | - |