Popover

View Source

NOTE: Introduced feature in v0.2.11.

WARNING: This feature received a breaking change in v0.6.0.

Popover is typically used for hiding content that'll clip onto the page when activated via a button or something else.

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

<Popover.Container
    logic_id="popover-preview"
    dismissible
>
    <Popover.Button palette="accent">
        Open Menu
    </Popover.Button>

    <Popover.Section
        alignment_x="right"
        spacing="medium"
    >
        <Box
            variation="borders"
            elevation="high"
            padding="medium"
            radius="tiny"
        >
            <Menu.Container>
                <Menu.Button>
                    Copy
                    <Spacer
                        is="span"
                        spacing_y="medium"
                    />

                    <Text is="small">CTRL+C</Text>
                </Menu.Button>

                <Menu.Button>
                    Cut
                    <Spacer
                        is="span"
                        spacing_y="medium"
                    />

                    <Text is="small">CTRL+X</Text>
                </Menu.Button>

                <Menu.Heading />

                <Menu.Button>
                    Delete
                    <Spacer
                        is="span"
                        spacing_y="medium"
                    />

                    <Text is="small">DEL</Text>
                </Menu.Button>
            </Menu.Container>
        </Box>
    </Popover.Section>
</Popover.Container>

Imports

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

    const {
        Container,
        Button,
        Group,
        Section
    } = Popover;
</script>

Logic ID

You can make the Popover toggleable via the logic_id property, and then referencing that with a Button. Alternatively, <Popover.Button> can be used while inside a <Popover.Container> tree, which automatically inherits logic_id via Svelte Context.

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

<Popover.Container logic_id="popover-logic-id">
    <Popover.Button palette="accent">
        Open Popover
    </Popover.Button>

    <Popover.Section alignment_x="right">
        <Box
            palette="inverse"
            elevation="high"
            padding="medium"
            radius="tiny"
        >
            <Popover.Button
                palette="auto"
                variation="clear"
            >
                Dismiss
            </Popover.Button>
        </Box>
    </Popover.Section>
</Popover.Container>

Logic State

WARNING: This feature is only available in Javascript-enabled clients.

You can manually open / close the Popover via the logic_state property.

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

    let logic_state = false;
</script>

<Popover.Container
    logic_id="popover-logic-state"
    bind:logic_state
>
    <Popover.Button>
        Open TOGGABLE Popover
    </Popover.Button>

    <Popover.Section alignment_x="right">
        <Box
            palette="inverse"
            elevation="high"
            padding="medium"
            radius="tiny"
        >
            TOGGABLE Popover
            <br />

            <Button
                on:click={() =>
                    (logic_state = !logic_state)}
            >
                Toggle Popover
            </Button>
        </Box>
    </Popover.Section>
</Popover.Container>

Dismissible

NOTE: Introduced keybinding support in v0.4.13.

WARNING: This feature is only available in Javascript-enabled clients.

You can optionally have the Popover dismissible by clicking outside the <Popover.Section> child content, pressing the ESC key, or inner content losing focus, via the dismissible property.

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

<Popover.Container
    logic_id="popover-dismissible-disabled"
>
    <Popover.Button>
        Open NON-DISMISSIBLE Popover
    </Popover.Button>

    <Popover.Section alignment_x="right">
        <Box
            palette="inverse"
            elevation="high"
            padding="medium"
            radius="tiny"
        >
            NON-DISMISSIBLE Popover
        </Box>
    </Popover.Section>
</Popover.Container>

<Popover.Container
    logic_id="popover-dismissible-enabled"
    dismissible
>
    <Popover.Button>
        Open DISMISSIBLE Popover
    </Popover.Button>

    <Popover.Section alignment_x="right">
        <Box
            palette="inverse"
            elevation="high"
            padding="medium"
            radius="tiny"
        >
            DISMISSIBLE Popover
        </Box>
    </Popover.Section>
</Popover.Container>

Once

NOTE: Introduced feature in v0.4.11.

WARNING: This feature is only available in Javascript-enabled clients.

You can enable having the Popover dismissed whenever inner content is clicked via the once property.

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

<Popover.Container logic_id="popover-once-disabled">
    <Popover.Button>
        Open NON-ONCE Popover
    </Popover.Button>

    <Popover.Section alignment_x="right">
        <Box
            palette="inverse"
            elevation="high"
            padding="medium"
            radius="tiny"
        >
            NON-ONCE Popover
        </Box>
    </Popover.Section>
</Popover.Container>

<Popover.Container
    logic_id="popover-once-enabled"
    once
>
    <Popover.Button>Open ONCE Popover</Popover.Button>

    <Popover.Section alignment_x="right">
        <Box
            palette="inverse"
            elevation="high"
            padding="medium"
            radius="tiny"
        >
            ONCE Popover
        </Box>
    </Popover.Section>
</Popover.Container>

Control

NOTE: Introduced feature in v0.6.2

You can alter the functionality of a <Popover.Container> Component to activate by focusing the inner content via the variation property.

<script>
    import {
        Box,
        Check,
        Menu,
        Popover,
        Spacer,
        TextInput,
    } from "@kahi-ui/framework";

    let searching = "";
</script>

<Popover.Container variation="control">
    <TextInput
        placeholder="...filter options"
        bind:value={searching}
    />

    <Popover.Section
        alignment_x="right"
        spacing="small"
    >
        <Box
            elevation="medium"
            padding="medium"
            variation="borders"
            radius="tiny"
        >
            <Menu.Container sizing="tiny">
                <Menu.Heading>Filter</Menu.Heading>

                <Menu.Label
                    for="popover-preview-control-cpus"
                    hidden={searching &&
                        !"cpus".includes(
                            searching.toLowerCase()
                        )}
                >
                    CPUs
                    <Spacer />
                    <Check
                        value="cpus"
                        palette="accent"
                        variation="flush"
                    />
                </Menu.Label>

                <Menu.Label
                    for="popover-preview-control-hard-drives"
                    hidden={searching &&
                        !"hard drives".includes(
                            searching.toLowerCase()
                        )}
                >
                    Hard Drives
                    <Spacer />
                    <Check
                        value="hard-drives"
                        palette="accent"
                        variation="flush"
                        state
                    />
                </Menu.Label>

                <Menu.Label
                    for="popover-preview-control-solid-state-drives"
                    hidden={searching &&
                        !"solid state drives".includes(
                            searching.toLowerCase()
                        )}
                >
                    Solid State Drives
                    <Spacer />
                    <Check
                        value="solid-state-drives"
                        palette="accent"
                        variation="flush"
                    />
                </Menu.Label>
            </Menu.Container>
        </Box>
    </Popover.Section>
</Popover.Container>

Tooltip

NOTE: Introduced feature in v0.6.0.

You can alter the functionality of a <Popover.Container> Component to activate by hovering or focusing the inner content via the variation property.

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

<Popover.Container variation="tooltip">
    Hover me!

    <Popover.Section
        alignment_x="right"
        spacing="nano"
        animation="fade"
    >
        <Box
            elevation="low"
            palette="neutral"
            padding="small"
            radius="nano"
        >
            I contain extra information!
        </Box>
    </Popover.Section>
</Popover.Container>

Plus some other text...

<br />
<br />

<Popover.Container variation="tooltip">
    <Button palette="accent">
        Some Undescriptive Button
    </Button>

    <Popover.Section
        alignment_x="right"
        spacing="nano"
        animation="fade"
    >
        <Box
            elevation="low"
            palette="neutral"
            padding="small"
            radius="nano"
        >
            I describe the button!
        </Box>
    </Popover.Section>
</Popover.Container>

Placement

You can adjust which side your content is placed on via the placement property.

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

<Popover.Container
    logic_id="popover-placement-right"
    dismissible
>
    <Popover.Button palette="accent">
        Open RIGHT Popover
    </Popover.Button>

    <Popover.Section
        alignment_y="bottom"
        placement="right"
        spacing="medium"
    >
        <Box
            palette="inverse"
            elevation="high"
            padding="medium"
            radius="tiny"
        >
            This is a RIGHT Popover.
        </Box>
    </Popover.Section>
</Popover.Container>

<Popover.Container
    logic_id="popover-placement-bottom"
    dismissible
>
    <Popover.Button palette="accent">
        Open BOTTOM Popover
    </Popover.Button>

    <Popover.Section
        alignment_x="right"
        spacing="medium"
    >
        <Box
            palette="inverse"
            elevation="high"
            padding="medium"
            radius="tiny"
        >
            This is a BOTTOM Popover.
        </Box>
    </Popover.Section>
</Popover.Container>

Alignment

You can align Popover which direction the child content breaks, via the alignment_x and alignment_y properties respectively.

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

<Popover.Container
    logic_id="popover-alignment-x-right"
    dismissible
>
    <Popover.Button palette="accent">
        Open RIGHT X Popover
    </Popover.Button>

    <Popover.Section
        alignment_x="right"
        spacing="medium"
    >
        <Box
            palette="inverse"
            elevation="high"
            padding="medium"
            radius="tiny"
        >
            This is a RIGHT X Popover.
        </Box>
    </Popover.Section>
</Popover.Container>

<Popover.Container
    logic_id="popover-alignment-x-center"
    dismissible
>
    <Popover.Button palette="accent">
        Open CENTER X Popover
    </Popover.Button>

    <Popover.Section spacing="medium">
        <Box
            palette="inverse"
            elevation="high"
            padding="medium"
            radius="tiny"
        >
            This is a CENTER X Popover.
        </Box>
    </Popover.Section>
</Popover.Container>

<Popover.Container
    logic_id="popover-alignment-x-left"
    dismissible
>
    <Popover.Button palette="accent">
        Open LEFT X Popover
    </Popover.Button>

    <Popover.Section
        alignment_x="left"
        spacing="medium"
    >
        <Box
            palette="inverse"
            elevation="high"
            padding="medium"
            radius="tiny"
        >
            This is a LEFT X Popover.
        </Box>
    </Popover.Section>
</Popover.Container>

<Spacer spacing="huge" />

<Popover.Container
    logic_id="popover-alignment-y-top"
    dismissible
>
    <Popover.Button palette="accent">
        Open TOP Y Popover
    </Popover.Button>

    <Popover.Section
        placement="right"
        alignment_y="top"
        spacing="medium"
    >
        <Box
            palette="inverse"
            elevation="high"
            padding="medium"
            radius="tiny"
        >
            This is a TOP Y Popover.
        </Box>
    </Popover.Section>
</Popover.Container>

<Popover.Container
    logic_id="popover-alignment-y-center"
    dismissible
>
    <Popover.Button palette="accent">
        Open CENTER Y Popover
    </Popover.Button>

    <Popover.Section
        placement="right"
        spacing="medium"
    >
        <Box
            palette="inverse"
            elevation="high"
            padding="medium"
            radius="tiny"
        >
            This is a CENTER Y Popover.
        </Box>
    </Popover.Section>
</Popover.Container>

<Popover.Container
    logic_id="popover-alignment-y-bottom"
    dismissible
>
    <Popover.Button palette="accent">
        Open BOTTOM Y Popover
    </Popover.Button>

    <Popover.Section
        placement="right"
        alignment_y="bottom"
        spacing="medium"
    >
        <Box
            palette="inverse"
            elevation="high"
            padding="medium"
            radius="tiny"
        >
            This is a BOTTOM Y Popover.
        </Box>
    </Popover.Section>
</Popover.Container>

Properties

Popover.Container

Name Description Types
logic_id Renders a as sibling before child , which controls the visible state via CSS.
string
logic_state Controls the visible state of the whenever logic_id is set.
boolean
focus_target Configures the element given focus when logic_state is active. Otherwise, the first focusable element found will be used.
null HTMLElement string
dismissible Enables the user to press ESC to dismiss. Also enables dismissing via inner content losing focus or clicking outside of .
boolean
once Enables dismissing of the whenever inner content is clicked.
boolean
variation Alters the functionality of the to activate via hovering and / or focusing.
control tooltip

Popover.Section

Name Description Types
animation Selects the animation to be ran whenever logic_state is active.
clip (DEFAULT) fade scale slide
placement Adjusts where the child content will be placed within the along the vertical axis.
top left bottom (DEFAULT) right
alignment_x (top/bottom PLACEMENT ONLY) Adjusts where the child content will be placed within the along the horizontal axis.
center (DEFAULT) left right
alignment_y (left/right PLACEMENT ONLY) Adjusts where the child content will be placed within the along the vertical axis.
center (DEFAULT) bottom top

Events

Popover.Container

Name Description Types
active Fires whenever the is activated.
CustomEvent<void>
dismiss Fires whenever the is dismissed.
CustomEvent<void>

Slots

Popover.Container

Name Description Types
default Default unnamed slot.
{}

Popover.Button

Name Description Types
default Default unnamed slot.
{}

Popover.Group

Name Description Types
default Default unnamed slot.
{}

Popover.Section

Name Description Types
default Default unnamed slot.
{}