Aside

View Source

NOTE: Introduced feature in v0.2.0.

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

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

<Aside.Container
    palette="dark"
    max_width="content-max"
    height="100"
>
    <Aside.Header>
        <Anchor href="#">Kahi UI</Anchor>
        <Divider />
    </Aside.Header>

    <Aside.Section>
        <Menu.Container>
            <Menu.Heading>DISPLAY</Menu.Heading>

            <Menu.Button>
                Badge
                <Spacer />
                <span>ICON</span>
            </Menu.Button>

            <Menu.Heading>FEEDBACK</Menu.Heading>

            <Menu.Button>
                Dot
                <Spacer />
                <span>ICON</span>
            </Menu.Button>

            <Menu.Button active>
                Spinner
                <Spacer />
                <span>ICON</span>
            </Menu.Button>
        </Menu.Container>
    </Aside.Section>

    <Aside.Footer>
        <Anchor href="#">
            <Text is="small">v0.6.0</Text>
        </Anchor>
    </Aside.Footer>
</Aside.Container>

Imports

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

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

Palette

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

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

<Mosaic.Container sizing="medium" spacing="medium">
    <Aside.Container>
        <Aside.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider />
        </Aside.Header>

        <Aside.Section>
            <Menu.Container>
                <Menu.Heading>FEEDBACK</Menu.Heading>

                <Menu.Button>
                    Dot
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>

                <Menu.Button active>
                    Spinner
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>
            </Menu.Container>
        </Aside.Section>

        <Aside.Footer>DEFAULT</Aside.Footer>
    </Aside.Container>

    <Aside.Container palette="accent">
        <Aside.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider />
        </Aside.Header>

        <Aside.Section>
            <Menu.Container>
                <Menu.Heading>FEEDBACK</Menu.Heading>

                <Menu.Button>
                    Dot
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>

                <Menu.Button active>
                    Spinner
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>
            </Menu.Container>
        </Aside.Section>

        <Aside.Footer>ACCENT</Aside.Footer>
    </Aside.Container>

    <Aside.Container palette="neutral">
        <Aside.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider />
        </Aside.Header>

        <Aside.Section>
            <Menu.Container>
                <Menu.Heading>FEEDBACK</Menu.Heading>

                <Menu.Button>
                    Dot
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>

                <Menu.Button active>
                    Spinner
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>
            </Menu.Container>
        </Aside.Section>

        <Aside.Footer>NEUTRAL</Aside.Footer>
    </Aside.Container>

    <Aside.Container palette="dark">
        <Aside.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider />
        </Aside.Header>

        <Aside.Section>
            <Menu.Container>
                <Menu.Heading>FEEDBACK</Menu.Heading>

                <Menu.Button>
                    Dot
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>

                <Menu.Button active>
                    Spinner
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>
            </Menu.Container>
        </Aside.Section>

        <Aside.Footer>DARK</Aside.Footer>
    </Aside.Container>

    <Aside.Container palette="light">
        <Aside.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider />
        </Aside.Header>

        <Aside.Section>
            <Menu.Container>
                <Menu.Heading>FEEDBACK</Menu.Heading>

                <Menu.Button>
                    Dot
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>

                <Menu.Button active>
                    Spinner
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>
            </Menu.Container>
        </Aside.Section>

        <Aside.Footer>LIGHT</Aside.Footer>
    </Aside.Container>

    <Aside.Container palette="alert">
        <Aside.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider />
        </Aside.Header>

        <Aside.Section>
            <Menu.Container>
                <Menu.Heading>FEEDBACK</Menu.Heading>

                <Menu.Button>
                    Dot
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>

                <Menu.Button active>
                    Spinner
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>
            </Menu.Container>
        </Aside.Section>

        <Aside.Footer>ALERT</Aside.Footer>
    </Aside.Container>

    <Aside.Container palette="affirmative">
        <Aside.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider />
        </Aside.Header>

        <Aside.Section>
            <Menu.Container>
                <Menu.Heading>FEEDBACK</Menu.Heading>

                <Menu.Button>
                    Dot
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>

                <Menu.Button active>
                    Spinner
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>
            </Menu.Container>
        </Aside.Section>

        <Aside.Footer>AFFIRMATIVE</Aside.Footer>
    </Aside.Container>

    <Aside.Container palette="informative">
        <Aside.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider />
        </Aside.Header>

        <Aside.Section>
            <Menu.Container>
                <Menu.Heading>FEEDBACK</Menu.Heading>

                <Menu.Button>
                    Dot
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>

                <Menu.Button active>
                    Spinner
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>
            </Menu.Container>
        </Aside.Section>

        <Aside.Footer>INFORMATIVE</Aside.Footer>
    </Aside.Container>

    <Aside.Container palette="negative">
        <Aside.Header>
            <Anchor href="#">Kahi UI</Anchor>
            <Divider />
        </Aside.Header>

        <Aside.Section>
            <Menu.Container>
                <Menu.Heading>FEEDBACK</Menu.Heading>

                <Menu.Button>
                    Dot
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>

                <Menu.Button active>
                    Spinner
                    <Spacer />
                    <span>ICON</span>
                </Menu.Button>
            </Menu.Container>
        </Aside.Section>

        <Aside.Footer>NEGATIVE</Aside.Footer>
    </Aside.Container>
</Mosaic.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,
        Aside,
        Divider,
        Menu,
        Spacer,
        Text,
    } from "@kahi-ui/framework";
</script>

<Aside.Container
    placement="right"
    palette="inverse"
    max_width="content-max"
    height="100"
>
    <Aside.Header>
        <Anchor href="#">Kahi UI</Anchor>
        <Divider />
    </Aside.Header>

    <Aside.Section>
        <Menu.Container>
            <Menu.Heading>FEEDBACK</Menu.Heading>

            <Menu.Button>
                Dot
                <Spacer />
                <span>ICON</span>
            </Menu.Button>

            <Menu.Button active>
                Spinner
                <Spacer />
                <span>ICON</span>
            </Menu.Button>
        </Menu.Container>
    </Aside.Section>

    <Aside.Footer>
        <Anchor href="#">
            <Text is="small">v0.6.0</Text>
        </Anchor>
    </Aside.Footer>
</Aside.Container>

Collapsing

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

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

<script>
    import {
        Anchor,
        Aside,
        Button,
        Divider,
        Menu,
        Position,
        Overlay,
        Spacer,
        Text,
    } from "@kahi-ui/framework";
</script>

<Position
    variation="action"
    alignment_x="left"
    hidden={["desktop", "widescreen"]}
>
    <Button is="label" for="aside-collapsing">
        +
    </Button>
</Position>

<Overlay.Container
    logic_id="aside-collapsing"
    dismissible
>
    <Overlay.Backdrop
        hidden={["desktop", "widescreen"]}
    />

    <Overlay.Section
        contents={["desktop", "widescreen"]}
        animation="slide"
        direction="left"
        alignment_x="left"
    >
        <Aside.Container
            palette="inverse"
            max_width="content-max"
            height="100"
        >
            <Aside.Header>
                <Anchor href="#">Kahi UI</Anchor>
                <Divider />
            </Aside.Header>

            <Aside.Section>
                <Menu.Container>
                    <Menu.Heading>
                        DISPLAY
                    </Menu.Heading>

                    <Menu.Button>
                        Badge
                        <Spacer />
                        <span>ICON</span>
                    </Menu.Button>

                    <Menu.Heading>
                        FEEDBACK
                    </Menu.Heading>

                    <Menu.Button>
                        Dot
                        <Spacer />
                        <span>ICON</span>
                    </Menu.Button>

                    <Menu.Button active>
                        Spinner
                        <Spacer />
                        <span>ICON</span>
                    </Menu.Button>
                </Menu.Container>
            </Aside.Section>

            <Aside.Footer>
                <Anchor href="#">
                    <Text is="small">v0.6.0</Text>
                </Anchor>
            </Aside.Footer>

            <Position
                variation={["container", "action"]}
                hidden={["desktop", "widescreen"]}
            >
                <Overlay.Button variation="clear">
                    -
                </Overlay.Button>
            </Position>
        </Aside.Container>
    </Overlay.Section>
</Overlay.Container>

Properties

Aside.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 Aside.Container appears when variation is set to sticky.
left (DEFAULT) right
variation Adjusts the Aside.Container to remain at the horizontal sides of the viewport, even when the parent element is scrolled.
sticky

Slots

Aside.Container

Name Description Types
default Default unnamed slot.
{}

Aside.Footer

Name Description Types
default Default unnamed slot.
{}

Aside.Header

Name Description Types
default Default unnamed slot.
{}

Aside.Section

Name Description Types
default Default unnamed slot.
{}