evokit-link

3.2.0 • Public • Published

EvoKit - Link

Used to create link. Contains one element <Link>


Install

Peer dependencies evokit. More about install

npm install evokit-link --save

Usage

More about usage

import React from 'react';
import { Link } from 'evokit-link';
import 'evokit-link/style.css';
 
const App = () => (
    <Link link-weight='bold' href='#'>
        ...
    </Link>
);

Edit link-usage

Props

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

<Link />

Prop name Default value Possible value Description
link-color null Create theme Text color
link-display inline inline none Display type
link-lheight default default medium large Line spacing
link-size default none inherit default small big h1 h2 h3 h4 h5 h6 Font size
link-style null solid dotted dashed multi-line Decoration styles
link-valign null baseline bottom middle sub super text-bottom text-top top Aligns text vertically
link-weight default default thin light medium bold black Font weight
link-wrap normal normal nowrap pre pre-wrap pre-line break ellipsis Transferring and cutting text

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-link-media-small only screen and (min-width: 480px);
@custom-media --ek-link-media-medium only screen and (min-width: 768px);
@custom-media --ek-link-media-large only screen and (min-width: 960px);
@custom-media --ek-link-media-wide only screen and (min-width: 1200px);
@custom-media --ek-link-media-huge only screen and (min-width: 1400px);
 
:root {
    /* base */
    --ek-link-line-height: 1em;
    /* prop 'link-size' */
    --ek-link-size-small: 11px;
    --ek-link-size-default: 13px;
    --ek-link-size-big: 15px;
    --ek-link-size-h1: 24px;
    --ek-link-size-h2: 22px;
    --ek-link-size-h3: 20px;
    --ek-link-size-h4: 18px;
    --ek-link-size-h5: 16px;
    --ek-link-size-h6: 14px;
    /* prop 'link-lheight' */
    --ek-link-line-height-default: var(--ek-link-line-height);
    --ek-link-line-height-medium: 1.25em;
    --ek-link-line-height-large: 1.5em;
}

link-display

  • inline - displayed as inline
  • none - remove from a document
<Link link-display='none' href='#'>
    ...
</Link>

link-size

  • none - value: 0px
  • inherit - inherits the meaning of the parent
  • small - css variable --ek-link-size-small, default value: 11px
  • default - css variable --ek-link-size-default, default value: 13px
  • big - css variable --ek-link-size-big, default value: 15px
  • h1 - css variable --ek-link-size-h1, default value: 24px
  • h2 - css variable --ek-link-size-h2, default value: 22px
  • h3 - css variable --ek-link-size-h3, default value: 20px
  • h4 - css variable --ek-link-size-h4, default value: 18px
  • h5 - css variable --ek-link-size-h5, default value: 16px
  • h6 - css variable --ek-link-size-h6, default value: 14px
<Link link-size='h1' href='#'>
    ...
</Link>

link-weight

  • default - value: 400
  • thin - value: 100
  • light - value: 300
  • medium - value: 500
  • bold - value: 700
  • black - value: 900
<Link link-weight='bold' href='#'>
    ...
</Link>

link-valign

  • top - Align the top edge of the element to the top of the tallest line item.
  • bottom - Aligns the base of the current element at the bottom of the element of the line below it all
  • middle - The alignment of the midpoint of the element at the baseline of the parent plus half the height of the parent element
  • baseline - Aligns the baseline of the current element to the parent's baseline
  • sub - The element is depicted as subscript, in the form of a subscript
  • super - The element is depicted as superscript, in the form of a superscript
  • text-top - The top border of the element is aligned to the highest text element of the current line
  • text-bottom - The bottom border of the element is aligned at the very bottom edge of the current line
<Link link-valign='middle' href='#'>
    ...
</Link>

link-style

  • solid - solid style
  • dotted - dotted style
  • dashed - dashed style
  • multi-line - for multiline links (fix cursor pointer)
<Link link-style='dotted' href='#'>
    ...
</Link>

link-lheight

  • default - css variable --ek-link-line-height-default, default value: 1em
  • medium - css variable --ek-link-line-height-medium, default value: 1.25em
  • large - css variable --ek-link-line-height-large, default value: 1.5em
<Link link-lheight='medium' href='#'>
    ...
</Link>

link-wrap

  • normal - The text is displayed as usual
  • nowrap - All text is displayed in one line
  • pre - Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML
  • pre-wrap - Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
  • pre-line - Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
  • break - Line wrapping is added automatically
  • ellipsis - The text is cut and an ellipsis is added to the end of the line
<Link link-wrap='ellipsis' href='#'>
    ...
</Link>

link-color

Set the THEME_NAME depending on the theming

<Link link-color={THEME_NAME} href='#'>
    ...
</Link>

Package Sidebar

Install

npm i evokit-link

Weekly Downloads

629

Version

3.2.0

License

MIT

Unpacked Size

29.8 kB

Total Files

12

Last publish

Collaborators

  • docccdev