3.1.0 • Published 5 years ago
evokit-line v3.1.0
EvoKit - Line
Horizontal line, used to separate content. Contains one element <Line>
Install
npm install evokit-line --save
Usage
More about usage
import React from 'react';
import { Line } from 'evokit-line';
import 'evokit-line/style.css';
const App = () => (
<Line line-indent='xl' />
);
Props
Also supports other valid props of the React Element. More about use props
<Line />
Prop name | Default value | Possible value | Description |
---|---|---|---|
line-color | null | Create theme | Border color |
line-display | block | block none | Display type |
line-indent | none | none xxs xs s m l xl xxl | Set the margin top and bottom |
line-style | solid | solid dotted dashed | Border style |
line-tag | hr | HTML tags | HTML tag |
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-line-media-small only screen and (min-width: 480px);
@custom-media --ek-line-media-medium only screen and (min-width: 768px);
@custom-media --ek-line-media-large only screen and (min-width: 960px);
@custom-media --ek-line-media-wide only screen and (min-width: 1200px);
@custom-media --ek-line-media-huge only screen and (min-width: 1400px);
:root {
/* prop 'line-indent' */
--ek-line-indent-xxs: 5px;
--ek-line-indent-xs: 10px;
--ek-line-indent-s: 15px;
--ek-line-indent-m: 20px;
--ek-line-indent-l: 25px;
--ek-line-indent-xl: 30px;
--ek-line-indent-xxl: 35px
}
Live demo
line-tag
Default value hr
<Line line-tag='hr' />
line-display
block
- shown as blocky (default)none
- remove block from document
<Line line-display='block' />
line-indent
none
- no indent, value:0px
(default)xxs
- css variable--ek-line-indent-xxs
, default value:5px
xs
- css variable--ek-line-indent-xs
, default value:10px
s
- css variable--ek-line-indent-s
, default value:15px
m
- css variable--ek-line-indent-m
, default value:20px
l
- css variable--ek-line-indent-l
, default value:25px
xl
- css variable--ek-line-indent-xl
, default value:30px
xxl
- css variable--ek-line-indent-xxl
, default value:35px
<Line line-indent='l' />
line-style
solid
- solid style (default)dotted
- dotted styledashed
- dashed style
<Line line-style='dotted' />
line-color
Set the
THEME_NAME
depending on the theming
<Line line-color={THEME_NAME} />
3.1.0
5 years ago
3.1.0-alpha.0
5 years ago
3.0.1
5 years ago
3.0.0
5 years ago
3.0.0-alpha.5
5 years ago
3.0.0-alpha.4
5 years ago
3.0.0-alpha.3
5 years ago
3.0.0-alpha.2
5 years ago
3.0.0-alpha.1
5 years ago
3.0.0-alpha.0
5 years ago
1.0.4
5 years ago