evokit-image v3.2.0

EvoKit - Image

Used to display the image. Contains one element <Image>

Install

Peer dependencies evokit. More about install

npm install evokit-image --save

Usage

More about usage

import React from 'react';
import { Image } from 'evokit-image';
import 'evokit-image/style.css';

const App = () => (
    <Image image-align='center' src='...' alt='...' />
);

Props

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

<Image />

* — prop has advanced params

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-image-media-small only screen and (min-width: 480px);
@custom-media --ek-image-media-medium only screen and (min-width: 768px);
@custom-media --ek-image-media-large only screen and (min-width: 960px);
@custom-media --ek-image-media-wide only screen and (min-width: 1200px);
@custom-media --ek-image-media-huge only screen and (min-width: 1400px);

:root {
    /* prop 'image-round' */
    --ek-image-round-xxs: 2px;
    --ek-image-round-xs: 4px;
    --ek-image-round-s: 6px;
    --ek-image-round-m: 8px;
    --ek-image-round-l: 10px;
    --ek-image-round-xl: 12px;
    --ek-image-round-xxl: 14px;
    --ek-image-round-3xl: 16px;
    --ek-image-round-4xl: 18px;
    --ek-image-round-5xl: 20px;
}

image-display

• inline - displayed as inline
• block - shown as blocky
• none - remove from a document

<Image image-display='none' src='' alt='' />

image-align

• left - Align the image to the left
• center - Center alignment
• right - Align the image to the right

<Image image-align='center' src='' alt='' />

image-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

<Image image-valign='top' src='' alt='' />

image-mirror

• x - X-axis reflection
• y - Y-axis reflection
• xy - X and Y axis reflection

<Image image-mirror='x' src='' alt='' />

image-fit

• none - Does not change its size and fills the space
• fill - Resizes to fill the whole area
• contain - Сhanges its size to fit the area
• cover - Сhanges its size to maintain its proportions when filling the block
• scale-down - Resizes by comparing the difference between none andcontain to find the smallest object size

<Image image-fit='cover' src='' alt='' />

image-height

• auto - value: auto
• 1-1 - value: 100%

<Image
    image-height='auto'
    src=''
    alt=''
/>

image-width

• auto - value: auto
• See table, for example: 3-4 = 75%

<Image
    image-width='3-4'
    src=''
    alt=''
/>

image-round

The property allows you to set the fillet value for all corners of the element at the same time or to determine it only for the specified angle.

!> DEPRECATED props image-round-top, image-round-right, image-round-bottom and image-round-left, please use multi values

Advanced props

1. image-round-top-left
2. image-round-top-right
3. image-round-bottom-right
4. image-round-bottom-left

Multi values (set value separated by a space)

• image-round="{1,3} {2,4}"
• image-round="{1} {2,4} {3}"
• image-round="{1} {2} {3} {4}"

List of values

<Image image-round='s' />
<Image image-round='s m' />
<Image image-round='s m l' />
<Image image-round='s m l xl' />
<Image
    image-round-top-left='s'
    image-round-top-right='m'
    image-round-bottom-right='l'
    image-round-bottom-left='xl'
/>

image-alt

• visible - Visible Alt Text
• hidden - Hidden Alt Text

<Image image-alt='hidden' src='' alt='' />

image-background

<Image
    image-background={THEME_NAME}
    src=''
    alt=''
/>

Set the THEME_NAME depending on the theming

image-border

Has advanced props:

• image-border - top, right, bottom or left for example image-border-right
• image-border - tb or lr for example image-border-tb

<Image
    image-border={THEME_NAME}
    src=''
    alt=''
/>

Set the THEME_NAME depending on the theming