evokit-list

EvoKit - List

Used to create list. Contains two elements <List> and <List.Item>.

---

Install

Peer dependencies evokit

npm install evokit-list --save

Usage

The styles use css-variable and will work in all modern browsers. If you need to support more old browsers such as Interner Explorer 11 or lower, use a tool postcss with postcss-preset-env for transforming css into something most browsers can understand.

• <List> has a default html tag ul
• <List.Item> has a default html tag li

import { List } from 'evokit-list';
import 'evokit-list/style.css';

<List>
    <List.Item>
        ...
    </List.Item>
</List>

Props

Also have base props

Props	Values	Description
list-indent	none xxs xs s m l xl xxl	Indentation between elements
list-style	dash decimal disc	Marker type
list-color	{THEME_NAME}	Marker color - Create Theme
list-divider	{THEME_NAME}	Color separator between elements - Create Theme

Customize

This set of css variables is default, if you want to override one or more value, please use the rules css-variable-usage, define them below the css import.

:root {
    /* prop 'list-indent' */
    --ek-list-indent-xxs: 5px;
    --ek-list-indent-xs: 10px;
    --ek-list-indent-s: 15px;
    --ek-list-indent-m: 20px;
    --ek-list-indent-l: 25px;
    --ek-list-indent-xl: 30px;
    --ek-list-indent-xxl: 35px;
}

---

list-indent

• none - no indent, value: 0px
• xxs - css variable --ek-list-indent-xxs, default value: 5px
• xs - css variable --ek-list-indent-xs, default value: 10px
• s - css variable --ek-list-indent-s, default value: 15px
• m - css variable --ek-list-indent-m, default value: 20px
• l - css variable --ek-list-indent-l, default value: 25px
• xl - css variable --ek-list-indent-xl, default value: 30px
• xxl - css variable --ek-list-indent-xxl, default value: 35px

<List list-indent='xxl'>
    <List.Item>
        ...
    </List.Item>
</List>

list-style

• dash - Dash marker (—)
• decimal - Arabic numbers (1, 2, 3, 4,...).
• disc - Dotted markerи (•)

<List list-style='decimal'>
    <List.Item>
        ...
    </List.Item>
</List>

list-color

Set the text color depending on the created theme, used text color value.

<List list-color={THEME_NAME}>
    <List.Item>
        ...
    </List.Item>
</List>

list-divider

Set the border color depending on the created theme, used border color value.

<List list-divider={THEME_NAME}>
    <List.Item>
        ...
    </List.Item>
</List>