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 name | Default value | Possible value | Description | |--------------------|---------------|-------------------------|------------------| | image-align | null | left center right | Horizontal alignment | | image-alt | visible | visible hidden | Visibility alt text if the image is not uploaded | | image-background | null | Create theme | Background color | | image-border | null | Create theme | Border color | | image-display | inline | inline block none | Display type | | image-fit | null | none fill contain cover scale-down | Filling the container relative to its height and width | | image-mirror | null | x y xy | Mirroring | | image-round * | none | none full xxs xs s m l xl xxl 3xl 4xl 5xl | Corner rounding | | image-valign | null | baseline bottom middle sub super text-bottom text-top top | Vertical alignment | | image-height | null | auto 1-1 | Set the height | | image-width | null | auto 1-1 *-2 *-3 *-4 *-5 *-6 *-7 *-8 *-9 *-10 | Set the width |

* — 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 and contain 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%

| |1|2|3|4|5|6|7|8|9|10| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| |1|100%|50%|33.33%|25%|20%|16.66%|14.28%|12.5%|11.11%|10%| |2|---|100%|66.66%|50%|40%|33.33%|28.57%|25%|22.22%|20%| |3|---|---|100%|75%|60%|50%|42.85%|37.5%|33.33%|30%| |4|---|---|---|100%|80%|66.66%|57.14%|50%|44.44%|40%| |5|---|---|---|---|100%|83.33%|71.42%|62.5%|55.55%|50%| |6|---|---|---|---|---|100%|85.71%|75%|66.66%|60%| |7|---|---|---|---|---|---|100%|87.5%|77.77%|70%| |8|---|---|---|---|---|---|---|100%|88.88%|80%| |9|---|---|---|---|---|---|---|---|100%|90%| |10|---|---|---|---|---|---|---|---|---|100%|

<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

| Value | CSS var | CSS value | |--------|-----------------------|-----------| | none | --- | 0px | | full | --- | 50% | | xxs | --ek-image-round-xxs | 2px | | xs | --ek-image-round-xs | 4px | | s | --ek-image-round-s | 6px | | m | --ek-image-round-m | 8px | | l | --ek-image-round-l | 10px | | xl | --ek-image-round-xl | 12px | | xxl | --ek-image-round-xxl | 14px | | 3xl | --ek-image-round-3xl | 16px | | 4xl | --ek-image-round-4xl | 18px | | 5xl | --ek-image-round-5xl | 20px |

<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