List#
<List>
renders a <ul>
element by default with reset styles and list-style
unset.
Import#
import { List } from 'bumbag';
Usage#
My awesome list:
- Item 1
- Item 2
- Item 3
- Item 4
Types#
Specify if you want your list items to have a style type with the listStyleType
CSS property.
Click here to see all the listStyleType
values.
My awesome list:
- Item 1
- Item 2
- Item 1
- Item 2
- Item 1
- Item 2
Ordered lists#
To use an ordered list, use the isOrdered
prop.
My awesome list:
- Item 1
- Item 2
- Item 3
- Item 4
Horizontal lists#
To use an horizontal list, use the orientation
prop.
- Item 1
- Item 2
List Props#
isOrdered
boolean
Indicates if the list is ordered.
orientation
"horizontal" | "vertical"
Indicates the orientation of the list.
Inherits Box
props
use
string | (ComponentClass<any, any> & { useProps: any; }) | (FunctionComponent<any> & { useProps: any; })
className
string
children
string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | ((props: BoxProps) => ReactNode)
alignX
"right" | "left" | "center"
alignY
"top" | "bottom" | "center"
variant
string
colorMode
string
disabled
boolean
overrides
{ useCSSVariables?: boolean; altitudes?: AltitudesThemeConfig; borders?: BordersThemeConfig; borderRadii?: BorderRadiiThemeConfig; ... 95 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string
List.Item Props#
Inherits Box
props
use
string | (ComponentClass<any, any> & { useProps: any; }) | (FunctionComponent<any> & { useProps: any; })
className
string
children
string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | ((props: BoxProps) => ReactNode)
alignX
"right" | "left" | "center"
alignY
"top" | "bottom" | "center"
variant
string
colorMode
string
disabled
boolean
overrides
{ useCSSVariables?: boolean; altitudes?: AltitudesThemeConfig; borders?: BordersThemeConfig; borderRadii?: BorderRadiiThemeConfig; ... 95 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string
Theming#
List.styles.base
- Item 1
- Item 2
List.styles.ordered
- Item 1
- Item 2
List.styles.horizontal
- Item 1
- Item 2
List.Item.styles.base
- Item 1
- Item 2