evokit-image v3.2.0
EvoKit - Image
Used to display the image. Contains one element <Image>
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 inlineblock
- shown as blockynone
- remove from a document
<Image image-display='none' src='' alt='' />
image-align
left
- Align the image to the leftcenter
- Center alignmentright
- 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 allmiddle
- The alignment of the midpoint of the element at the baseline of the parent plus half the height of the parent elementbaseline
- Aligns the baseline of the current element to the parent's baselinesub
- The element is depicted as subscript, in the form of a subscriptsuper
- The element is depicted as superscript, in the form of a superscripttext-top
- The top border of the element is aligned to the highest text element of the current linetext-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 reflectiony
- Y-axis reflectionxy
- X and Y axis reflection
<Image image-mirror='x' src='' alt='' />
image-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
<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
image-round-top-left
image-round-top-right
image-round-bottom-right
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 Texthidden
- 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
orleft
for exampleimage-border-right
image-border
-tb
orlr
for exampleimage-border-tb
<Image
image-border={THEME_NAME}
src=''
alt=''
/>
Set the
THEME_NAME
depending on the theming
3 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago