Mosaic

View Source

NOTE: Introduced feature in v0.2.0.

WARNING: This feature was renamed from <Mosaic> to <Mosaic.Container> in v0.6.0.

Mosaic is a layout primitive for setting up a mosaic of items organized to displaying as many child items at a certain size as possible.

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

<Mosaic.Container sizing="tiny" spacing="medium">
    <Box palette="alert" height="icon-massive" />
    <Box palette="affirmative" height="icon-massive" />
    <Box palette="negative" height="icon-massive" />

    <Box palette="affirmative" height="icon-massive" />
    <Box palette="negative" height="icon-massive" />
    <Box palette="alert" height="icon-massive" />

    <Box palette="alert" height="icon-massive" />
    <Box palette="affirmative" height="icon-massive" />
    <Box palette="negative" height="icon-massive" />

    <Box palette="negative" height="icon-massive" />
    <Box palette="alert" height="icon-massive" />
    <Box palette="affirmative" height="icon-massive" />

    <Box palette="affirmative" height="icon-massive" />
    <Box palette="negative" height="icon-massive" />
    <Box palette="alert" height="icon-massive" />
</Mosaic.Container>

Imports

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

    const {Container, Item} = Mosaic;
</script>

Sizing

NOTE: By passing an array, you can set responsive values. e.g. sizing={["tiny", "tablet:medium", "mobile:medium"]}

You can alter how large each Mosaic item should be via the sizing property.

<script>
    import {
        Box,
        Mosaic,
        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="small">
            <Mosaic.Container
                sizing="nano"
                spacing="medium"
            >
                <Box
                    palette="alert"
                    height="icon-massive"
                />

                <Box
                    palette="affirmative"
                    height="icon-massive"
                />

                <Box
                    palette="negative"
                    height="icon-massive"
                />
            </Mosaic.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">TINY</Text>
        <Box palette="inverse" padding="small">
            <Mosaic.Container
                sizing="tiny"
                spacing="medium"
            >
                <Box
                    palette="alert"
                    height="icon-massive"
                />

                <Box
                    palette="affirmative"
                    height="icon-massive"
                />

                <Box
                    palette="negative"
                    height="icon-massive"
                />
            </Mosaic.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">SMALL</Text>

        <Box palette="inverse" padding="small">
            <Mosaic.Container
                sizing="small"
                spacing="medium"
            >
                <Box
                    palette="alert"
                    height="icon-massive"
                />

                <Box
                    palette="affirmative"
                    height="icon-massive"
                />

                <Box
                    palette="negative"
                    height="icon-massive"
                />
            </Mosaic.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">MEDIUM</Text>

        <Box palette="inverse" padding="small">
            <Mosaic.Container
                sizing="medium"
                spacing="medium"
            >
                <Box
                    palette="alert"
                    height="icon-massive"
                />

                <Box
                    palette="affirmative"
                    height="icon-massive"
                />

                <Box
                    palette="negative"
                    height="icon-massive"
                />
            </Mosaic.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">LARGE</Text>

        <Box palette="inverse" padding="small">
            <Mosaic.Container
                sizing="large"
                spacing="medium"
            >
                <Box
                    palette="alert"
                    height="icon-massive"
                />

                <Box
                    palette="affirmative"
                    height="icon-massive"
                />

                <Box
                    palette="negative"
                    height="icon-massive"
                />
            </Mosaic.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">HUGE</Text>

        <Box palette="inverse" padding="small">
            <Mosaic.Container
                sizing="huge"
                spacing="medium"
            >
                <Box
                    palette="alert"
                    height="icon-massive"
                />

                <Box
                    palette="affirmative"
                    height="icon-massive"
                />

                <Box
                    palette="negative"
                    height="icon-massive"
                />
            </Mosaic.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">MASSIVE</Text>

        <Box palette="inverse" padding="small">
            <Mosaic.Container
                sizing="massive"
                spacing="medium"
            >
                <Box
                    palette="alert"
                    height="icon-massive"
                />

                <Box
                    palette="affirmative"
                    height="icon-massive"
                />

                <Box
                    palette="negative"
                    height="icon-massive"
                />
            </Mosaic.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,
        Mosaic,
        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">
            <Mosaic.Container sizing="tiny">
                <Box
                    palette="alert"
                    height="icon-massive"
                />

                <Box
                    palette="affirmative"
                    height="icon-massive"
                />

                <Box
                    palette="negative"
                    height="icon-massive"
                />
            </Mosaic.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">NANO</Text>
        <Box palette="inverse" padding="small">
            <Mosaic.Container
                sizing="tiny"
                spacing="nano"
            >
                <Box
                    palette="alert"
                    height="icon-massive"
                />

                <Box
                    palette="affirmative"
                    height="icon-massive"
                />

                <Box
                    palette="negative"
                    height="icon-massive"
                />
            </Mosaic.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">TINY</Text>
        <Box palette="inverse" padding="small">
            <Mosaic.Container
                sizing="tiny"
                spacing="tiny"
            >
                <Box
                    palette="alert"
                    height="icon-massive"
                />

                <Box
                    palette="affirmative"
                    height="icon-massive"
                />

                <Box
                    palette="negative"
                    height="icon-massive"
                />
            </Mosaic.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">SMALL</Text>
        <Box palette="inverse" padding="small">
            <Mosaic.Container
                sizing="tiny"
                spacing="small"
            >
                <Box
                    palette="alert"
                    height="icon-massive"
                />

                <Box
                    palette="affirmative"
                    height="icon-massive"
                />

                <Box
                    palette="negative"
                    height="icon-massive"
                />
            </Mosaic.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">MEDIUM</Text>
        <Box palette="inverse" padding="small">
            <Mosaic.Container
                sizing="tiny"
                spacing="medium"
            >
                <Box
                    palette="alert"
                    height="icon-massive"
                />

                <Box
                    palette="affirmative"
                    height="icon-massive"
                />

                <Box
                    palette="negative"
                    height="icon-massive"
                />
            </Mosaic.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">LARGE</Text>
        <Box palette="inverse" padding="small">
            <Mosaic.Container
                sizing="tiny"
                spacing="large"
            >
                <Box
                    palette="alert"
                    height="icon-massive"
                />

                <Box
                    palette="affirmative"
                    height="icon-massive"
                />

                <Box
                    palette="negative"
                    height="icon-massive"
                />
            </Mosaic.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">HUGE</Text>
        <Box palette="inverse" padding="small">
            <Mosaic.Container
                sizing="tiny"
                spacing="huge"
            >
                <Box
                    palette="alert"
                    height="icon-massive"
                />

                <Box
                    palette="affirmative"
                    height="icon-massive"
                />

                <Box
                    palette="negative"
                    height="icon-massive"
                />
            </Mosaic.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">MASSIVE</Text>
        <Box palette="inverse" padding="small">
            <Mosaic.Container
                sizing="tiny"
                spacing="massive"
            >
                <Box
                    palette="alert"
                    height="icon-massive"
                />

                <Box
                    palette="affirmative"
                    height="icon-massive"
                />

                <Box
                    palette="negative"
                    height="icon-massive"
                />
            </Mosaic.Container>
        </Box>
    </div>
</Stack.Container>

Item Span

NOTE: Introduced feature in v0.6.0.

NOTE: By passing an array, you can set responsive values. e.g. span={["3", "tablet:2", "mobile:1"]}

You can adjust span of individual items via the span, span_x, span_y properties, by wrapping the items in Mosaic.Item.

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

<Mosaic.Container sizing="tiny" spacing="medium">
    <Box palette="alert" height="icon-massive" />
    <Mosaic.Item
        span_x={["3", "mobile:1", "tablet:2"]}
    >
        <Box
            palette="affirmative"
            height="icon-massive"
        />
    </Mosaic.Item>
    <Box palette="negative" height="icon-massive" />

    <Box palette="affirmative" height="icon-massive" />
    <Box palette="negative" height="icon-massive" />
    <Box palette="alert" height="icon-massive" />

    <Box palette="alert" height="icon-massive" />
    <Box palette="affirmative" height="icon-massive" />
    <Box palette="negative" height="icon-massive" />

    <Mosaic.Item span_x="2">
        <Box
            palette="negative"
            height="icon-massive"
        />
    </Mosaic.Item>
    <Box palette="alert" height="icon-massive" />
    <Box palette="affirmative" height="icon-massive" />

    <Box palette="affirmative" height="icon-massive" />
    <Box palette="negative" height="icon-massive" />
    <Box palette="alert" height="icon-massive" />
</Mosaic.Container>

Properties

Mosaic.Container

Name Description Types
sizing Sets the minimum width each child item divided up into, out of the space available.
nano tiny small medium large huge massive {VIEWPORT}:{SIZING}
alignment Adjusts where the child items will be placed within the Mosaic.Container along both axis.
center stretch {VIEWPORT}:{ALIGNMENT}
alignment_x Adjusts where the child items will be placed within the Mosaic.Container along the horizontal axis.
center stretch left right {VIEWPORT}:{ALIGNMENT}
alignment_y Adjusts where the child items will be placed within the Mosaic.Container along the vertical axis.
center stretch bottom top {VIEWPORT}:{ALIGNMENT}
spacing Adjusts the visual spacing between child items in the Mosaic.Container.
nano tiny small medium large huge massive {VIEWPORT}:{SPACING}
spacing_x Adjusts the horizontal visual spacing between child items in the Mosaic.Container.
nano tiny small medium large huge massive {VIEWPORT}:{SPACING}
spacing_y Adjusts the vertical visual spacing between child items in the Mosaic.Container.
nano tiny small medium large huge massive {VIEWPORT}:{SPACING}

Mosaic.Item

Name Description Types
span In a point scale of 1...12, sets how many columns and rows the Mosaic.Item will span.
1 2 3 4 5 6 7 8 9 10 11 12 {VIEWPORT}:{POINTS}
span_x In a point scale of 1...12, sets how many columns the Mosaic.Item will span.
1 2 3 4 5 6 7 8 9 10 11 12 {VIEWPORT}:{POINTS}
span_y In a point scale of 1...12, sets how many rows the Mosaic.Item will span.
1 2 3 4 5 6 7 8 9 10 11 12 {VIEWPORT}:{POINTS}

Slots

Mosaic.Container

Name Description Types
default Default unnamed slot.
{}

Mosaic.Item

Name Description Types
default Default unnamed slot.
{}