Actions

View Source

NOTE: Introduced feature in v0.4.11.

As a limitation of Svelte, you cannot use on Components. So the Framework provides a special syntax to support forwarding actions to a Component's main elements.

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

    let clicked = false;
</script>

<Box
    palette={clicked ? "affirmative" : "negative"}
    padding="small"
    actions={[
        [
            click_outside,
            {on_click_outside: () => (clicked = false)},
        ],
    ]}
    on:click={() => (clicked = true)}
>
    {clicked
        ? "I was clicked inside!"
        : "I am currently not clicked..."}
</Box>