List
A versatile list component for presenting content in an organized manner.
Import
import { VKList } from "@vivakits/react-components";Basic Usage
The basic list displays items in a clean, organized format.
- Two roads diverged in a yellow wood,
- And sorry I could not travel both
- And be one traveler, long I stood
- And looked down one as far as I could
- To where it bent in the undergrowth;
List with Icons
Lists can include icons or bullets for each item.
- Viva-Kit, a design language for background applications, is refined by Vivasoft Frontend Team
- Viva-Kit, a design language for background applications, is refined by Vivasoft Frontend Team
- Viva-Kit, a design language for background applications, is refined by Vivasoft Frontend Team
- Viva-Kit, a design language for background applications, is refined by Vivasoft Frontend Team
- Viva-Kit, a design language for background applications, is refined by Vivasoft Frontend Team
Size
Lists can be rendered in different sizes.
Defaul Size
- Jony Jony Yes Papa
- Eating sugar No Papa
- Telling lies No Papa
- Open your mouth Ha! Ha! Ha!
Small Size
- Jony Jony Yes Papa
- Eating sugar No Papa
- Telling lies No Papa
- Open your mouth Ha! Ha! Ha!
Large Size
- Jony Jony Yes Papa
- Eating sugar No Papa
- Telling lies No Papa
- Open your mouth Ha! Ha! Ha!
Grid
List can be show in grid view.
Title 1
Card content
Title 2
Card content
Title 3
Card content
Responsive Grid
List can be show in responsive grid view.
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content
Title 5
Card content
Load More
List can be show more items by clicking on the load more button.
API Reference
List
| Attribute | Type | Description | Default |
|---|---|---|---|
| bordered | boolean | Toggles rendering of the border around the list | false |
| dataSource | any[] | DataSource array for list | - |
| footer | ReactNode | List footer renderer | - |
| grid | object | The grid type of list. You can set grid to something like | - |
| header | ReactNode | List header renderer | - |
| itemLayout | horizontalvertical | The layout of list | horizontal |
| loading | boolean | Shows a loading indicator while the contents of the list are being fetched | false |
| loadMore | ReactNode | Shows a load more content | - |
| locale | object | The i18n text including empty text | - |
| pagination | booleanobject | Pagination config, hide it by setting it to false | false |
| renderItem | (item) => ReactNode | Customize list item when using dataSource | - |
| rowKey | keyof T (item: T) => React.Key | Item's unique value, could be an Item's key which holds a unique value of type React.Key or function that receives Item and returns a React.Key | "key" |
| size | defaultlargesmall | Size of list | default |
| split | boolean | Toggles rendering of the split under the list item | true |
Pagination
| Attribute | Type | Description | Default |
|---|---|---|---|
| position | topbottomboth | The specify the position of Pagination | bottom |
| align | startcenterend | The specify the alignment of Pagination | end |
List grid props
| Attribute | Type | Description | Default |
|---|---|---|---|
| column | number | The column of grid | - |
| gutter | number | The spacing between grid | 0 |
| xs | number | <576px column of grid | - |
| sm | number | ≥576px column of grid | - |
| md | number | ≥768px column of grid | - |
| lg | number | ≥992px column of grid | - |
| xl | number | ≥1200px column of grid | - |
| xxl | number | ≥1600px column of grid | - |
List.Item
| Attribute | Type | Description | Default |
|---|---|---|---|
| actions | Array<ReactNode> | The actions content of list item. If itemLayout is vertical, shows the content on bottom, otherwise shows content on the far right | - |
| classNames | Record<actions extra, string> | Semantic structure className | - |
| extra | ReactNode | The extra content of list item. If itemLayout is vertical, shows the content on right, otherwise shows content on the far right | - |
| styles | Record<actions extra, CSSProperties> | Semantic DOM style | - |
List.Item.Meta
| Attribute | Type | Description | Default |
|---|---|---|---|
| avatar | ReactNode | The avatar of list item | - |
| description | ReactNode | The description of list item | - |
| title | ReactNode | The title of list item | - |