Interactive styling + Event modifiers

[hhhapz]

👋🏽 Hey there

2 questions:

1. how does one handle styling different states for a component, i.e on active, on hover, etc.?
2. I saw there are html5 modifiers, are events and binding also supported?

[novacbn]

1. I am not sure what you mean by this specifically. But you can just style things via classes and such. Just make sure to use :global:

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

<Button class="my-button">Click Me</Button>

<style>
    :global(button.my-button:hover) {
        color: red;
    }
</style>

2. Yep, Components that have forwarded events have them documented in their API Reference section. (click "Events" tab)

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

<Switch
    on:click={() => alert("clicked")}
/>