NOTE: Introduced feature in
v0.2.1
.
WARNING: This feature received a breaking change in
v0.6.0
.
Figure
is a multimedia container Component, providing modifications for things such as images and videos.
<script>
import {Figure} from "@kahi-ui/framework";
</script>
<Figure max_width="33">
<img src={IMAGE_BACKGROUND} />
</Figure>
Imports
<script>
import {Figure} from "@kahi-ui/framework";
</script>
Fit
NOTE: By passing an array, you can set responsive values. e.g.
fit={["contain", "tablet:cover", "mobile:cover"]}
You can change how the child content is stretched across the Figure
container via the fit
property.
<script>
import {
Figure,
Stack,
Text,
} from "@kahi-ui/framework";
</script>
<Stack.Container
orientation="horizontal"
spacing="medium"
variation="wrap"
>
<div>
<Text is="strong">DEFAULT</Text>
<Figure size="small">
<img
src={IMAGE_BACKGROUND}
data-width="tiny"
data-height="medium"
/>
</Figure>
</div>
<div>
<Text is="strong">CONTAIN</Text>
<Figure fit="contain">
<img
src={IMAGE_BACKGROUND}
data-width="tiny"
data-height="medium"
/>
</Figure>
</div>
<div>
<Text is="strong">COVER</Text>
<Figure fit="cover">
<img
src={IMAGE_BACKGROUND}
data-width="tiny"
data-height="medium"
/>
</Figure>
</div>
<div>
<Text is="strong">FILL</Text>
<Figure fit="fill">
<img
src={IMAGE_BACKGROUND}
data-width="tiny"
data-height="medium"
/>
</Figure>
</div>
<div>
<Text is="strong">NONE</Text>
<Figure fit="none">
<img
src={IMAGE_BACKGROUND}
data-width="tiny"
data-height="medium"
/>
</Figure>
</div>
<div>
<Text is="strong">SCALE-DOWN</Text>
<Figure fit="scale-down">
<img
src={IMAGE_BACKGROUND}
data-width="tiny"
data-height="medium"
/>
</Figure>
</div>
</Stack.Container>
Radius
NOTE: Introduced feature in
v0.6.0
.
NOTE: By passing an array, you can set responsive values. e.g.
radius={["tiny", "tablet:medium", "mobile:medium"]}
You can modify the border radius of the child content via the radius
property.
<script>
import {
Figure,
Mosaic,
Text,
} from "@kahi-ui/framework";
</script>
<Mosaic.Container spacing="medium" sizing="tiny">
<div>
<Text is="strong">DEFAULT</Text>
<Figure>
<img src={IMAGE_BACKGROUND} />
</Figure>
</div>
<div>
<Text is="strong">NONE</Text>
<Figure radius="none">
<img src={IMAGE_BACKGROUND} />
</Figure>
</div>
<div>
<Text is="strong">NANO</Text>
<Figure radius="nano">
<img src={IMAGE_BACKGROUND} />
</Figure>
</div>
<div>
<Text is="strong">TINY</Text>
<Figure radius="tiny">
<img src={IMAGE_BACKGROUND} />
</Figure>
</div>
<div>
<Text is="strong">SMALL</Text>
<Figure radius="small">
<img src={IMAGE_BACKGROUND} />
</Figure>
</div>
<div>
<Text is="strong">MEDIUM</Text>
<Figure radius="medium">
<img src={IMAGE_BACKGROUND} />
</Figure>
</div>
<div>
<Text is="strong">LARGE</Text>
<Figure radius="large">
<img src={IMAGE_BACKGROUND} />
</Figure>
</div>
<div>
<Text is="strong">HUGE</Text>
<Figure radius="huge">
<img src={IMAGE_BACKGROUND} />
</Figure>
</div>
<div>
<Text is="strong">MASSIVE</Text>
<Figure radius="massive">
<img src={IMAGE_BACKGROUND} />
</Figure>
</div>
</Mosaic.Container>
Shape
NOTE: Introduced feature in
v0.6.0
.
NOTE: By passing an array, you can set responsive values. e.g.
shape={["circle", "tablet:pill", "mobile:pill"]}
You can modify the shape of the child content via the shape
property.
<script>
import {
Figure,
Mosaic,
Text,
} from "@kahi-ui/framework";
</script>
<Mosaic.Container spacing="medium" sizing="tiny">
<div>
<Text is="strong">DEFAULT</Text>
<Figure>
<img src={IMAGE_BACKGROUND} />
</Figure>
</div>
<div>
<Text is="strong">CIRCLE</Text>
<Figure shape="circle">
<img src={IMAGE_BACKGROUND} />
</Figure>
</div>
<div>
<Text is="strong">PILL</Text>
<Figure shape="pill">
<img src={IMAGE_BACKGROUND} />
</Figure>
</div>
</Mosaic.Container>