Omni

View Source

NOTE: Introduced feature in v0.2.0.

Omni is used to horizontally present the end-user with actions and links that can be accessed anytime on the Web Application.

<script>
    import {
        Anchor,
        Divider,
        Menu,
        Omni,
        Text,
    } from "@kahi-ui/framework";
</script>

<Omni.Container palette="dark" width="100">
    <Omni.Header>
        <Anchor href="#">Kahi UI</Anchor>
        <Divider orientation="vertical" />
        <Anchor href="#">
            <Text is="small">v0.6.0</Text>
        </Anchor>
    </Omni.Header>

    <Omni.Section>
        <Menu.Container
            orientation="horizontal"
            sizing="tiny"
        >
            <Menu.Button active>Docs</Menu.Button>
            <Menu.Button>Playground</Menu.Button>
            <Menu.Button>Storybook</Menu.Button>
        </Menu.Container>
    </Omni.Section>

    <Omni.Footer>
        <Menu.Container
            orientation="horizontal"
            sizing="tiny"
        >
            <Menu.Button>GitHub</Menu.Button>
        </Menu.Container>
    </Omni.Footer>
</Omni.Container>

Imports

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

    const {Container, Footer, Header, Section} = Omni;
</script>

Palette

You can change the color palette of the Omni via the palette property.

<script>
    import {
        Anchor,
        Divider,
        Omni,
        Stack,
    } from "@kahi-ui/framework";
</script>

<Stack.Container spacing="medium">
    <Omni.Container width="100">
        <Omni.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider orientation="vertical" />
            DEFAULT
        </Omni.Header>
    </Omni.Container>

    <Omni.Container palette="accent" width="100">
        <Omni.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider orientation="vertical" />
            ACCENT
        </Omni.Header>
    </Omni.Container>

    <Omni.Container palette="neutral" width="100">
        <Omni.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider orientation="vertical" />
            NEUTRAL
        </Omni.Header>
    </Omni.Container>

    <Omni.Container palette="dark" width="100">
        <Omni.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider orientation="vertical" />
            DARK
        </Omni.Header>
    </Omni.Container>

    <Omni.Container palette="light" width="100">
        <Omni.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider orientation="vertical" />
            LIGHT
        </Omni.Header>
    </Omni.Container>

    <Omni.Container palette="alert" width="100">
        <Omni.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider orientation="vertical" />
            ALERT
        </Omni.Header>
    </Omni.Container>

    <Omni.Container palette="affirmative" width="100">
        <Omni.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider orientation="vertical" />
            AFFIRMATIVE
        </Omni.Header>
    </Omni.Container>

    <Omni.Container palette="informative" width="100">
        <Omni.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider orientation="vertical" />
            INFORMATIVE
        </Omni.Header>
    </Omni.Container>

    <Omni.Container palette="negative" width="100">
        <Omni.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider orientation="vertical" />
            NEGATIVE
        </Omni.Header>
    </Omni.Container>
</Stack.Container>

Placement

IMPORTANT: The placement property does NOT affect how it will appear in your layout. You need to manually handle that.

You can adjust which side the content divider border will appear via the placement property.

<script>
    import {
        Anchor,
        Divider,
        Omni,
        Text,
    } from "@kahi-ui/framework";
</script>

<Omni.Container
    placement="bottom"
    palette="inverse"
    width="100"
>
    <Omni.Header>
        <Anchor href="#">Kahi UI</Anchor>
        <Divider orientation="vertical" />
        <Anchor href="#">
            <Text is="small">v0.6.0</Text>
        </Anchor>
    </Omni.Header>
</Omni.Container>

Collapsing

USAGE: REPL does not support viewport values, resize your Browser to observe this feature.

While Omni does not have built-in collapsing, the Framework provides the primitives for you to build collapsable interfaces. Via Components like Popover and features like hidden.

<script>
    import {
        Anchor,
        Box,
        Divider,
        Menu,
        Omni,
        Popover,
        Text,
    } from "@kahi-ui/framework";
</script>

<Omni.Container palette="inverse" width="100">
    <Omni.Header>
        <Anchor href="#">Kahi UI</Anchor>
        <Divider orientation="vertical" />
        <Anchor href="#">
            <Text is="small">v0.6.0</Text>
        </Anchor>
    </Omni.Header>

    <Omni.Section hidden={["mobile", "tablet"]}>
        <Menu.Container
            orientation="horizontal"
            sizing="tiny"
        >
            <Menu.Button active>Docs</Menu.Button>
            <Menu.Button>Playground</Menu.Button>
            <Menu.Button>Storybook</Menu.Button>
        </Menu.Container>
    </Omni.Section>

    <Omni.Footer>
        <Menu.Container
            hidden={["mobile", "tablet"]}
            orientation="horizontal"
            sizing="tiny"
        >
            <Menu.Button>GitHub</Menu.Button>
        </Menu.Container>

        <Popover.Container
            hidden={["desktop", "widescreen"]}
            logic_id="omni-collapsing"
            dismissible
        >
            <Popover.Button
                palette="light"
                variation="clear"
            >
                +
            </Popover.Button>

            <Popover.Section
                alignment_x="left"
                spacing="small"
            >
                <Box
                    variation="borders"
                    elevation="medium"
                    padding="medium"
                    radius="tiny"
                >
                    <Menu.Container sizing="tiny">
                        <Menu.Button active>
                            Docs
                        </Menu.Button>

                        <Menu.Button>
                            Playground
                        </Menu.Button>

                        <Menu.Button>
                            Storybook
                        </Menu.Button>

                        <Menu.Button>
                            GitHub
                        </Menu.Button>
                    </Menu.Container>
                </Box>
            </Popover.Section>
        </Popover.Container>
    </Omni.Footer>
</Omni.Container>

Properties

Omni.Container

Name Description Types
palette Alters the displayed color scheme.
auto inverse inherit accent neutral off dark light alert affirmative informative negative
placement Adjusts which side the content divider border is placed, and which side the Omni.Container appears when variation is set to sticky.
top (DEFAULT) bottom
variation Adjusts the Omni.Container to remain at the vertical sides of the viewport, even when the parent element is scrolled.
sticky

Slots

Omni.Container

Name Description Types
default Default unnamed slot.
{}

Omni.Footer

Name Description Types
default Default unnamed slot.
{}

Omni.Header

Name Description Types
default Default unnamed slot.
{}

Omni.Section

Name Description Types
default Default unnamed slot.
{}