45 lines
920 B
Svelte
45 lines
920 B
Svelte
|
<svelte:options
|
||
|
|
customElement={{
|
||
|
|
props: {
|
||
|
|
button_aria_label: { attribute: "button-aria-label" },
|
||
|
|
button_class: { attribute: "button-class" },
|
||
|
|
},
|
||
|
|
tag: "basic-dropdown",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
type Props = {
|
||
|
|
button_aria_label?: string;
|
||
|
|
button_class?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
let { button_aria_label, button_class = "button--secondary" }: Props =
|
||
|
|
$props();
|
||
|
|
let popover_element: HTMLElement | undefined = $state();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<button
|
||
|
|
aria-label={button_aria_label}
|
||
|
|
class={["basic-dropdown__button", button_class]}
|
||
|
|
id="dropdown-button"
|
||
|
|
onclick={() => {
|
||
|
|
popover_element.showPopover();
|
||
|
|
}}
|
||
|
|
type="button"
|
||
|
|
>
|
||
|
|
<slot name="button-contents"></slot>
|
||
|
|
</button>
|
||
|
|
<div
|
||
|
|
aria-labelledby="dropdown-button"
|
||
|
|
bind:this={popover_element}
|
||
|
|
class="basic-dropdown__popover"
|
||
|
|
popover="auto"
|
||
|
|
>
|
||
|
|
<slot name="popover"></slot>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
@use "../../sass/main";
|
||
|
|
</style>
|