EvoKit - List

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

Install

Peer dependencies evokit. More about install

npm install evokit-list --save

Usage

More about usage

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

const App = () => (
    <List list-indent='m'>
        <List.Item>
            ...
        </List.Item>
    </List>
);

Props

Also supports other valid props of the React Element. More about use props

<List />

| Prop name | Default value | Possible value | Description | |----------------|---------------|----------------|--------------| | list-color | null | Create theme | Marker color | | list-display | block | block none | Display type | | list-divider-indent | none | none xxs xs s m l xl xxl 3xl 4xl 5xl | Indentation between elements, only use with prop list-divider | | list-divider | null | Create theme | Color separator between elements | | list-indent | none | none xxs xs s m l xl xxl 3xl 4xl 5xl | Indentation between elements | | list-style | null | dash decimal disc | Marker type |

<List.Item />

| Prop name | Default value | Possible value | Description | |---------------------|---------------|----------------------------|--------------| | list-item-display | block | block none | Display type |

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.

@custom-media --ek-list-media-small only screen and (min-width: 480px);
@custom-media --ek-list-media-medium only screen and (min-width: 768px);
@custom-media --ek-list-media-large only screen and (min-width: 960px);
@custom-media --ek-list-media-wide only screen and (min-width: 1200px);
@custom-media --ek-list-media-huge only screen and (min-width: 1400px);

: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;
    --ek-list-indent-3xl: 40px;
    --ek-list-indent-4xl: 45px;
    --ek-list-indent-5xl: 50px;
}

Live demo

list-display

Display type

• block - shown as blocky (default)
• none - remove block from document

<List list-display='none'>
    <List.Item>
        ...
    </List.Item>
</List>

list-indent

Indentation between elements, is calculated from content to content

• 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
• 3xl - css variable --ek-list-indent-3xl, default value: 40px
• 4xl - css variable --ek-list-indent-4xl, default value: 45px
• 5xl - css variable --ek-list-indent-5xl, default value: 50px

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

list-style

Marker type

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

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

list-divider-indent

Indentation between elements, is calculated from the dividing line to the content. Only use with prop list-divider.

• 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
• 3xl - css variable --ek-list-indent-3xl, default value: 40px
• 4xl - css variable --ek-list-indent-4xl, default value: 45px
• 5xl - css variable --ek-list-indent-5xl, default value: 50px

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

list-color

Marker color

Set the THEME_NAME depending on the theming

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

list-divider

Color separator between elements

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

Set the THEME_NAME depending on the theming

list-item-display

Display type

• block - shown as blocky (default)
• none - remove block from document

<List>
    <List.Item list-item-display='none'>
        ...
    </List.Item>
</List>