
Security News
Crates.io Implements Trusted Publishing Support
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
evokit-list
Advanced tools
Used to create list. Contains two elements <List>
and <List.Item>
npm install evokit-list --save
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>
);
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 |
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;
}
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>
FAQs
Used to create list
The npm package evokit-list receives a total of 226 weekly downloads. As such, evokit-list popularity was classified as not popular.
We found that evokit-list demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
Research
/Security News
Undocumented protestware found in 28 npm packages disrupts UI for Russian-language users visiting Russian and Belarusian domains.
Research
/Security News
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.