Stack

View Source

NOTE: Introduced feature in v0.2.0.

WARNING: This feature was renamed from <Stack> to <Stack.Container> in v0.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>

Properties

Stack

Name Description Types
orientation Renders the Stack horizontally.
horizontal {VIEWPORT}:horizontal
alignment Adjusts where the child items will be placed within the Stack along both axis.
center stretch {VIEWPORT}:{ALIGNMENT}
alignment_x Adjusts where the child items will be placed within the Stack along the horizontal axis.
center stretch left right {VIEWPORT}:{ALIGNMENT}
alignment_y Adjusts where the child items will be placed within the Stack along the vertical axis.
center stretch bottom top {VIEWPORT}:{ALIGNMENT}
spacing Adjusts the visual spacing between child items in the Stack.
nano tiny small medium large huge massive {VIEWPORT}:{SPACING}
spacing_x Adjusts the horizontal visual spacing between child items in the Stack.
nano tiny small medium large huge massive {VIEWPORT}:{SPACING}
spacing_y Adjusts the vertical visual spacing between child items in the Stack.
nano tiny small medium large huge massive {VIEWPORT}:{SPACING}

Slots

Stack

Name Description Types
default Default unnamed slot.
{}