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>