Name	Name	Last commit message	Last commit date
parent directory ..
__tests__	__tests__
src	src
.npmignore	.npmignore
CHANGELOG.md	CHANGELOG.md
README.md	README.md
jest.config.js	jest.config.js
package.json	package.json
webpack.config.js	webpack.config.js

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

import React from 'react';
import { Picture } 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

picture-round-top-left
picture-round-top-right
picture-round-bottom-right
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>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

evokit-picture

evokit-picture

README.md

EvoKit - Picture

Install

Usage

Props

`<Picture />`

`<Picture.Item />`

Customize

Live demo

`picture-display`

`picture-fit`

`picture-round`

`picture-border`

`picture-border-color`

`picture-border-width`

`picture-border-style`

`picture-background`

`picture-item-display`

Files

evokit-picture

Directory actions

More options

Directory actions

More options

Latest commit

History

evokit-picture

Folders and files

parent directory

README.md

EvoKit - Picture

Install

Usage

Props

<Picture />

<Picture.Item />

Customize

Live demo

picture-display

picture-fit

picture-round

picture-border

picture-border-color

picture-border-width

picture-border-style

picture-background

picture-item-display

`<Picture />`

`<Picture.Item />`

`picture-display`

`picture-fit`

`picture-round`

`picture-border`

`picture-border-color`

`picture-border-width`

`picture-border-style`

`picture-background`

`picture-item-display`