List
Display ordered or unordered list
Import
Source
Docs
Package
Usage
- Clone or download repository from GitHub
- Install dependencies with yarn
- To start development server run npm start command
- Run tests to make sure your changes do not break the build
- Submit a pull request once you are done
Type
Size
xs
sm
md
lg
xl
With icons
You can replace list bullets with icon. To do so provide following props:
icon
on List component will be used as default icon for all list elementsicon
on List.Item component will override context icon from Listspacing
– spacing between list items from theme or any valid CSS value to set spacing, defaults to0
center
– center item content with iconsize
– set font size from theme
- Clone or download repository from GitHub
- Install dependencies with yarn
- To start development server run npm start command
- Run tests to make sure your changes do not break the build
- Submit a pull request once you are done
Nested lists
Set withPadding
prop to offset nested lists and listStyleType
to control bullet type:
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- First order item
- First order item with list
- Nested item
- Nested item
- Nested item with list
- Event more nested
- Event more nested
- Nested item
- First order item
List component props
Name | Type | Description |
---|---|---|
center | boolean | Center items with icon |
children * | ReactNode | <List.Item /> components only |
icon | ReactNode | Icon that should replace list item dot |
listStyleType | ListStyleType | List style |
size | number | "xs" | "sm" | "md" | "lg" | "xl" | Font size from theme or number to set value |
spacing | number | "xs" | "sm" | "md" | "lg" | "xl" | Spacing between items from theme or number to set value |
type | "ordered" | "unordered" | List type: ol or ul |
withPadding | boolean | Include padding-left to offset list from main content |
List.Item component props
Name | Type | Description |
---|---|---|
children * | ReactNode | Item content |
icon | ReactNode | Icon to replace bullet |
List component Styles API
Name | Static selector | Description |
---|---|---|
root | .asuikit-List-root | Root element (ul or ol) |
item | .asuikit-List-item | List element (li) |
itemWrapper | .asuikit-List-itemWrapper | Wraps icon and item item content, used to align custom icon with content |
itemIcon | .asuikit-List-itemIcon | Icon wrapper element |