NOTE: Introduced feature in
v0.2.0
.
WARNING: This feature was renamed from
<Stack>
to<Stack.Container>
inv0.6.0
.
Stack
is a layout primitive for setting up a horizontal / vertical stacking of items with even spacing between children.
<script>
import {Box, Stack} from "@kahi-ui/framework";
</script>
<Stack.Container>
<Box palette="alert" size="icon-massive" />
<Box palette="affirmative" size="icon-massive" />
<Box palette="negative" size="icon-massive" />
</Stack.Container>
Imports
<script>
import {Stack} from "@kahi-ui/framework";
const {Container, Item} = Stack;
</script>
Orientation
NOTE: By passing an array, you can set responsive values. e.g.
orientation={["desktop:horizontal", "widescreen:horizontal"]}
You can set the Stack
to render horizontally via the orientation
property.
<script>
import {
Box,
Stack,
Text,
} from "@kahi-ui/framework";
</script>
<Stack.Container
alignment_y="top"
orientation="horizontal"
spacing="medium"
variation="wrap"
>
<div>
<Text is="strong">DEFAULT</Text>
<Box
palette="inverse"
padding="small"
width="content-min"
>
<Stack.Container>
<Box
palette="alert"
size="icon-massive"
/>
<Box
palette="affirmative"
size="icon-massive"
/>
<Box
palette="negative"
size="icon-massive"
/>
</Stack.Container>
</Box>
</div>
<div>
<Text is="strong">HORIZONTAL</Text>
<Box palette="inverse" padding="small">
<Stack.Container orientation="horizontal">
<Box
palette="alert"
size="icon-massive"
/>
<Box
palette="affirmative"
size="icon-massive"
/>
<Box
palette="negative"
size="icon-massive"
/>
</Stack.Container>
</Box>
</div>
</Stack.Container>
Spacing
NOTE: By passing an array, you can set responsive values. e.g.
spacing={["medium", "tablet:small", "mobile:tiny"]}
You can adjust the spacing between items via the spacing
, spacing_x
, and spacing_y
properties.
<script>
import {
Box,
Stack,
Text,
} from "@kahi-ui/framework";
</script>
<Stack.Container
orientation="horizontal"
spacing="medium"
variation="wrap"
>
<div>
<Text is="strong">DEFAULT</Text>
<Box
palette="inverse"
padding="small"
width="content-min"
>
<Stack.Container>
<Box
palette="alert"
size="icon-massive"
/>
<Box
palette="affirmative"
size="icon-massive"
/>
<Box
palette="negative"
size="icon-massive"
/>
</Stack.Container>
</Box>
</div>
<div>
<Text is="strong">NANO</Text>
<Box
palette="inverse"
padding="small"
width="content-min"
>
<Stack.Container spacing="nano">
<Box
palette="alert"
size="icon-massive"
/>
<Box
palette="affirmative"
size="icon-massive"
/>
<Box
palette="negative"
size="icon-massive"
/>
</Stack.Container>
</Box>
</div>
<div>
<Text is="strong">TINY</Text>
<Box
palette="inverse"
padding="small"
width="content-min"
>
<Stack.Container spacing="tiny">
<Box
palette="alert"
size="icon-massive"
/>
<Box
palette="affirmative"
size="icon-massive"
/>
<Box
palette="negative"
size="icon-massive"
/>
</Stack.Container>
</Box>
</div>
<div>
<Text is="strong">SMALL</Text>
<Box
palette="inverse"
padding="small"
width="content-min"
>
<Stack.Container spacing="small">
<Box
palette="alert"
size="icon-massive"
/>
<Box
palette="affirmative"
size="icon-massive"
/>
<Box
palette="negative"
size="icon-massive"
/>
</Stack.Container>
</Box>
</div>
<div>
<Text is="strong">MEDIUM</Text>
<Box
palette="inverse"
padding="small"
width="content-min"
>
<Stack.Container spacing="medium">
<Box
palette="alert"
size="icon-massive"
/>
<Box
palette="affirmative"
size="icon-massive"
/>
<Box
palette="negative"
size="icon-massive"
/>
</Stack.Container>
</Box>
</div>
<div>
<Text is="strong">LARGE</Text>
<Box
palette="inverse"
padding="small"
width="content-min"
>
<Stack.Container spacing="large">
<Box
palette="alert"
size="icon-massive"
/>
<Box
palette="affirmative"
size="icon-massive"
/>
<Box
palette="negative"
size="icon-massive"
/>
</Stack.Container>
</Box>
</div>
<div>
<Text is="strong">HUGE</Text>
<Box
palette="inverse"
padding="small"
width="content-min"
>
<Stack.Container spacing="huge">
<Box
palette="alert"
size="icon-massive"
/>
<Box
palette="affirmative"
size="icon-massive"
/>
<Box
palette="negative"
size="icon-massive"
/>
</Stack.Container>
</Box>
</div>
<div>
<Text is="strong">MASSIVE</Text>
<Box
palette="inverse"
padding="small"
width="content-min"
>
<Stack.Container spacing="massive">
<Box
palette="alert"
size="icon-massive"
/>
<Box
palette="affirmative"
size="icon-massive"
/>
<Box
palette="negative"
size="icon-massive"
/>
</Stack.Container>
</Box>
</div>
</Stack.Container>
Alignment
NOTE: By passing an array, you can set responsive values. e.g.
alignment_x={["center", "tablet:left", "mobile:right"]}
You can adjust the spacing between items via the alignment
, alignment_x
, and alignment_y
properties.
<script>
import {
Box,
Stack,
Text,
} from "@kahi-ui/framework";
</script>
<Stack.Container
class="stack-alignment"
orientation="horizontal"
spacing="medium"
variation="wrap"
>
<div>
<Text is="strong">DEFAULT</Text>
<Box
palette="inverse"
padding="small"
width="content-min"
>
<Stack.Container>
<Box palette="alert" />
<Box palette="affirmative" />
<Box palette="negative" />
</Stack.Container>
</Box>
</div>
<div>
<Text is="strong">CENTER X/Y</Text>
<Box palette="inverse" padding="small">
<Stack.Container alignment="center">
<Box palette="alert" />
<Box palette="affirmative" />
<Box palette="negative" />
</Stack.Container>
</Box>
</div>
<div>
<Text is="strong">STRETCH X</Text>
<Box palette="inverse" padding="small">
<Stack.Container alignment_x="stretch">
<Box palette="alert" />
<Box palette="affirmative" />
<Box palette="negative" />
</Stack.Container>
</Box>
</div>
<div>
<Text is="strong">LEFT X</Text>
<Box palette="inverse" padding="small">
<Stack.Container alignment_x="left">
<Box palette="alert" />
<Box palette="affirmative" />
<Box palette="negative" />
</Stack.Container>
</Box>
</div>
<div>
<Text is="strong">RIGHT X</Text>
<Box palette="inverse" padding="small">
<Stack.Container alignment_x="right">
<Box palette="alert" />
<Box palette="affirmative" />
<Box palette="negative" />
</Stack.Container>
</Box>
</div>
<div>
<Text is="strong">TOP Y</Text>
<Box
palette="inverse"
padding="small"
width="content-min"
>
<Stack.Container alignment_y="top">
<Box palette="alert" />
<Box palette="affirmative" />
<Box palette="negative" />
</Stack.Container>
</Box>
</div>
<div>
<Text is="strong">BOTTOM Y</Text>
<Box
palette="inverse"
padding="small"
width="content-min"
>
<Stack.Container alignment_y="bottom">
<Box palette="alert" />
<Box palette="affirmative" />
<Box palette="negative" />
</Stack.Container>
</Box>
</div>
</Stack.Container>
<style>
:global(.stack-alignment .stack .box) {
min-width: 3rem;
min-height: 3rem;
}
:global(.stack-alignment
.stack[data-alignment~="center"]) {
width: 6rem;
height: 12rem;
}
:global(.stack-alignment
.stack[data-alignment-x~="stretch"]) {
width: 6rem;
height: 12rem;
}
:global(.stack-alignment
.stack[data-alignment-x~="left"]),
:global(.stack-alignment
.stack[data-alignment-x~="right"]) {
width: 6rem;
}
:global(.stack-alignment
.stack[data-alignment-y~="top"]),
:global(.stack-alignment
.stack[data-alignment-y~="bottom"]) {
height: 12rem;
}
</style>
Wrap
You can alter the Stack
to wraps its children into the next line via the variation
property.
<script>
import {Box, Stack} from "@kahi-ui/framework";
</script>
<Stack.Container
orientation="horizontal"
spacing="huge"
variation="wrap"
>
<Box palette="alert" size="icon-massive" />
<Box palette="affirmative" size="icon-massive" />
<Box palette="negative" size="icon-massive" />
<Box palette="alert" size="icon-massive" />
<Box palette="affirmative" size="icon-massive" />
<Box palette="negative" size="icon-massive" />
<Box palette="alert" size="icon-massive" />
</Stack.Container>
Item Stretch
NOTE: Introduced feature in
v0.6.0
.
You can adjust span of individual items via the variation="stretch"
property, when wrapping an item in Stack.Item
.
<script>
import {Box, Stack} from "@kahi-ui/framework";
</script>
<Stack.Container orientation="horizontal" width="100">
<Box
palette="alert"
variation="borders"
size="icon-massive"
/>
<Stack.Item variation="stretch">
<Box
palette="affirmative"
variation="borders"
min_width="icon-massive"
height="icon-massive"
/>
</Stack.Item>
<Box
palette="negative"
variation="borders"
size="icon-massive"
/>
</Stack.Container>