EvoKit - Picture

Creates a square with an image. Contains two elements <Picture> and <Picture.Item>

Install

Peer dependencies evokit. More about install

npm install evokit-picture --save

Usage

More about usage. You can also import and use PictureItem instead of Picture.Item

import React from 'react';
import { Picture, PictureItem } from 'evokit-picture';
import 'evokit-picture/style.css';

const App = () => (
    <Picture picture-round='full'>
        <Picture.Item src='...' alt='...' />
    </Picture>
);

Props

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

<Picture />

| Prop name | Default value | Possible value | Description | |----------------------------|---------------|----------------|--------------| | picture-background | null | Create theme | Background color | | picture-border * | null | Create theme | Border color, width and style | | picture-border-color * | null | Create theme | Border color | | picture-border-width * | none | none xxs xs s m l xl xxl 3xl 4xl 5xl | Border width | | picture-border-style * | solid | solid dotted dashed | Border style | | picture-display | block | block none | Display type | | picture-fit | null | none fill contain cover scale-down | Filling the container relative to its height and width | | picture-round * | none | none full xxs xs s m l xl xxl 3xl 4xl 5xl | Corner rounding |

<Picture.Item />

| Prop name | Default value | Possible value | Description | |--------------------------|---------------|----------------------------|--------------| | picture-item-display | block | block none | Display type |

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

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

Live demo

picture-display

• block - shown as blocky (default)
• none - remove block from document

<Picture picture-display='none'>
    <Picture.Item src='' alt='' />
</Picture>

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

<Picture picture-fit='cover'>
    <Picture.Item src='' alt='' />
</Picture>

picture-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 picture-round-top, picture-round-right, picture-round-bottom and picture-round-left, please use multi values

Advanced props

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

Multi values (set value separated by a space)

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

List of values

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

<Picture picture-round='s' />
<Picture picture-round='s m' />
<Picture picture-round='s m l' />
<Picture picture-round='s m l xl' />
<Picture
    picture-round-top-left='s'
    picture-round-top-right='m'
    picture-round-bottom-right='l'
    picture-round-bottom-left='xl'
/>

picture-border

!> DEPRECATED props picture-border-lr and picture-border-tb, please use the separately picture-border-left and picture-border-right or picture-border-top and picture-border-bottom

Advanced props

• picture-border-top
• picture-border-right
• picture-border-bottom
• picture-border-left

Multi values (set value separated by a space)

• picture-border="{1}"
• picture-border="{1} {2}"
• picture-border="{1} {2} {3}"

{1} - color, {2} - width, {3} - style

<Picture picture-border="{THEME_NAME}" />
<Picture picture-border="{THEME_NAME} xs" />
<Picture picture-border="{THEME_NAME} xs dotted" />

<Picture picture-border-top="{THEME_NAME}" />
<Picture picture-border-top="{THEME_NAME} xs" />
<Picture picture-border-top="{THEME_NAME} xs dotted" />

Set the THEME_NAME depending on the theming

picture-border-color

The property allows you to set the border color for all sides of an element at once or to determine it only for specified sides.

Advanced props

• picture-border-color-top {1}
• picture-border-color-right {2}
• picture-border-color-bottom {3}
• picture-border-color-left {4}

Multi values (set value separated by a space)

• picture-border-color="{1,3} {2,4}"
• picture-border-color="{1} {2,4} {3}"
• picture-border-color="{1} {2} {3} {4}"

<Picture picture-border-color='{THEME_NAME}' />
<Picture picture-border-color='{THEME_NAME} {THEME_NAME}' />
<Picture picture-border-color='{THEME_NAME} {THEME_NAME} {THEME_NAME}' />
<Picture picture-border-color='{THEME_NAME} {THEME_NAME} {THEME_NAME} {THEME_NAME}' />
<Picture
    picture-border-color-top='{THEME_NAME}'
    picture-border-color-right='{THEME_NAME}'
    picture-border-color-bottom='{THEME_NAME}'
    picture-border-color-left='{THEME_NAME}'
/>

Set the THEME_NAME depending on the theming

picture-border-width

The property allows you to set the border width for all sides of an element at once or to determine it only for specified sides.

Advanced props

• picture-border-width-top {1}
• picture-border-width-right {2}
• picture-border-width-bottom {3}
• picture-border-width-left {4}

Multi values (set value separated by a space)

• picture-border-width="{1,3} {2,4}"
• picture-border-width="{1} {2,4} {3}"
• picture-border-width="{1} {2} {3} {4}"

List of values

| Value | CSS var | CSS value | |--------|------------------------------|-----------| | none | --- | 0px | | xxs | --ek-picture-border-width-xxs | 1px | | xs | --ek-picture-border-width-xs | 2px | | s | --ek-picture-border-width-s | 3px | | m | --ek-picture-border-width-m | 4px | | l | --ek-picture-border-width-l | 5px | | xl | --ek-picture-border-width-xl | 6px | | xxl | --ek-picture-border-width-xxl | 7px | | 3xl | --ek-picture-border-width-3xl | 8px | | 4xl | --ek-picture-border-width-4xl | 9px | | 5xl | --ek-picture-border-width-5xl | 10px |

<Picture picture-border-width='s' />
<Picture picture-border-width='s m' />
<Picture picture-border-width='s m l' />
<Picture picture-border-width='s m l xl' />
<Picture
    picture-border-width-top='s'
    picture-border-width-right='m'
    picture-border-width-bottom='l'
    picture-border-width-left='xl'
/>

picture-border-style

The property allows you to set the border style for all sides of an element at once or to determine it only for specified sides.

Advanced props

• picture-border-style-top {1}
• picture-border-style-right {2}
• picture-border-style-bottom {3}
• picture-border-style-left {4}

Multi values (set value separated by a space)

• picture-border-style="{1,3} {2,4}"
• picture-border-style="{1} {2,4} {3}"
• picture-border-style="{1} {2} {3} {4}"

Values

• solid - solid style (default)
• dotted - dotted style
• dashed - dashed style

<Picture picture-border-style='solid' />
<Picture picture-border-style='solid dotted' />
<Picture picture-border-style='solid dotted dashed' />
<Picture picture-border-style='solid dotted dashed solid' />
<Picture
    picture-border-style-top='solid'
    picture-border-style-right='dotted'
    picture-border-style-bottom='dashed'
    picture-border-style-left='solid'
/>

picture-background

<Picture picture-background='{THEME_NAME}'>
    ...
</Picture>

Set the THEME_NAME depending on the theming

picture-item-display

• block - shown as blocky (default)
• none - remove block from document

<Picture>
    <Picture.Item picture-item-display='none' src='' alt='' />
</Picture>