mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
40 lines
979 B
Svelte
40 lines
979 B
Svelte
<script>
|
|
/**
|
|
* Specify the ARIA label for the button
|
|
* @type {string}
|
|
*/
|
|
export let ariaLabel = undefined;
|
|
|
|
/** Set to `true` to toggle the open state */
|
|
export let isOpen = false;
|
|
|
|
/**
|
|
* Obtain a reference to the HTML button element
|
|
* @type {null | HTMLButtonElement}
|
|
*/
|
|
export let ref = null;
|
|
|
|
import { fly } from "svelte/transition";
|
|
import Close20 from "carbon-icons-svelte/lib/Close20";
|
|
import Menu20 from "carbon-icons-svelte/lib/Menu20";
|
|
import { Icon } from "../../Icon";
|
|
</script>
|
|
|
|
<button
|
|
type="button"
|
|
bind:this="{ref}"
|
|
title="Open menu"
|
|
aria-label="{ariaLabel}"
|
|
class:bx--header__action="{true}"
|
|
class:bx--header__menu-trigger="{true}"
|
|
class:bx--header__menu-toggle="{true}"
|
|
{...$$restProps}
|
|
transition:fly="{{ x: -200, delay: 50, duration: 250 }}"
|
|
on:click
|
|
on:click="{() => (isOpen = !isOpen)}"
|
|
>
|
|
<Icon
|
|
title="{isOpen ? 'Close' : 'Open Menu'}"
|
|
render="{isOpen ? Close20 : Menu20}"
|
|
/>
|
|
</button>
|