Spacer

NOTE: Introduced feature in v0.2.0.

Spacer is a layout primitive that takes up all available space between its two immediate siblings.

<script>
    import {
        Box,
        Spacer,
        Stack,
    } from "@kahi-ui/framework";
</script>

<Box
    palette="inverse"
    padding_x="small"
    padding_y="tiny"
>
    <Stack.Container orientation="horizontal">
        LEFT
        <Spacer />
        RIGHT
    </Stack.Container>
</Box>

Imports

<script>
    import {Spacer} from "@kahi-ui/framework";
</script>

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 the immediate siblings via the spacing, spacing_x, and spacing_y properties.

<script>
    import {
        Box,
        Spacer,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <div>
        <Text is="strong">NANO</Text>
        <Box
            palette="inverse"
            padding_x="small"
            padding_y="tiny"
        >
            TOP
            <Spacer spacing="nano" />
            BOTTOM
        </Box>
    </div>

    <div>
        <Text is="strong">TINY</Text>
        <Box
            palette="inverse"
            padding_x="small"
            padding_y="tiny"
        >
            TOP
            <Spacer spacing="tiny" />
            BOTTOM
        </Box>
    </div>

    <div>
        <Text is="strong">SMALL</Text>
        <Box
            palette="inverse"
            padding_x="small"
            padding_y="tiny"
        >
            TOP
            <Spacer spacing="small" />
            BOTTOM
        </Box>
    </div>

    <div>
        <Text is="strong">MEDIUM</Text>
        <Box
            palette="inverse"
            padding_x="small"
            padding_y="tiny"
        >
            TOP
            <Spacer spacing="medium" />
            BOTTOM
        </Box>
    </div>

    <div>
        <Text is="strong">LARGE</Text>
        <Box
            palette="inverse"
            padding_x="small"
            padding_y="tiny"
        >
            TOP
            <Spacer spacing="large" />
            BOTTOM
        </Box>
    </div>

    <div>
        <Text is="strong">HUGE</Text>
        <Box
            palette="inverse"
            padding_x="small"
            padding_y="tiny"
        >
            TOP
            <Spacer spacing="huge" />
            BOTTOM
        </Box>
    </div>

    <div>
        <Text is="strong">MASSIVE</Text>
        <Box
            palette="inverse"
            padding_x="small"
            padding_y="tiny"
        >
            TOP
            <Spacer spacing="massive" />
            BOTTOM
        </Box>
    </div>
</Stack.Container>

Inline

NOTE: Changed from variation="block/inline" -> is="div/span" in v0.4.10.

You can have the Spacer rendering as an inline <span> via the is property.

<script>
    import {
        Box,
        Spacer,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <div>
        <Text is="strong">BLOCK / DIV / DEFAULT</Text>
        <Box
            palette="inverse"
            margin_top="small"
            padding_x="small"
            padding_y="tiny"
        >
            TOP
            <Spacer spacing="huge" />
            BOTTOM
        </Box>
    </div>

    <div>
        <Text is="strong">INLINE / SPAN</Text>
        <Box
            palette="inverse"
            margin_top="small"
            padding_x="small"
            padding_y="tiny"
        >
            LEFT
            <Spacer
                is="span"
                orientation="horizontal"
                spacing="huge"
            />
            RIGHT
        </Box>
    </div>
</Stack.Container>