EvoKit - Picture
Creates a square with an image. Contains two elements <Picture>
and <Picture.Item>
Install
npm install evokit-picture --save
Usage
More about usage. You can also import and use
PictureItem
instead ofPicture.Item
import React from 'react';import Picture PictureItem from 'evokit-picture';import 'evokit-picture/style.css'; const App = <Picture ='full'> <Picture.Item ='...' ='...' /> </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.
@);@);@);@);@);
Live demo
picture-display
block
- shown as blocky (default)none
- remove block from document
<Picture ='none'> <Picture.Item ='' ='' /></Picture>
picture-fit
none
- Does not change its size and fills the spacefill
- Resizes to fill the whole areacontain
- Сhanges its size to fit the areacover
- Сhanges its size to maintain its proportions when filling the blockscale-down
- Resizes by comparing the difference betweennone
andcontain
to find the smallest object size
<Picture ='cover'> <Picture.Item ='' ='' /></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 ='s' /><Picture ='s m' /><Picture ='s m l' /><Picture ='s m l xl' /><Picture ='s' ='m' ='l' ='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}"
<Picture ="{THEME_NAME}" /><Picture ="{THEME_NAME} xs" /><Picture ="{THEME_NAME} xs dotted" /> <Picture ="{THEME_NAME}" /><Picture ="{THEME_NAME} xs" /><Picture ="{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 ='{THEME_NAME}' /><Picture ='{THEME_NAME} {THEME_NAME}' /><Picture ='{THEME_NAME} {THEME_NAME} {THEME_NAME}' /><Picture ='{THEME_NAME} {THEME_NAME} {THEME_NAME} {THEME_NAME}' /><Picture ='{THEME_NAME}' ='{THEME_NAME}' ='{THEME_NAME}' ='{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 ='s' /><Picture ='s m' /><Picture ='s m l' /><Picture ='s m l xl' /><Picture ='s' ='m' ='l' ='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 styledashed
- dashed style
<Picture ='solid' /><Picture ='solid dotted' /><Picture ='solid dotted dashed' /><Picture ='solid dotted dashed solid' /><Picture ='solid' ='dotted' ='dashed' ='solid'/>
picture-background
<Picture ='{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 ='none' ='' ='' /></Picture>