Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

evokit-list

Package Overview
Dependencies
0
Maintainers
1
Versions
13
Issues
File Explorer

Advanced tools

evokit-list

Used to create list

    3.3.0latest

Version published
Maintainers
1
Yearly downloads
24,587
decreased by-0.73%

Weekly downloads

Readme

Source

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 nameDefault valuePossible valueDescription
list-colornullCreate themeMarker color
list-displayblockblock noneDisplay type
list-divider-indentnonenone xxs xs s m l xl xxl 3xl 4xl 5xlIndentation between elements, only use with prop list-divider
list-dividernullCreate themeColor separator between elements
list-indentnonenone xxs xs s m l xl xxl 3xl 4xl 5xlIndentation between elements
list-stylenulldash decimal discMarker type

<List.Item />

Prop nameDefault valuePossible valueDescription
list-item-displayblockblock noneDisplay 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

Edit list-usage


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>

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc