mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
Add closeIcon option and remove stopPropagation on:click in HeaderAction (#840)
* Remove stopPropagation on:click Remove stopPropagation on:click helps when you have more then one acction to switch between actions tabs * fix bug for default icon * add closeIcon attribute to HeaderAction
This commit is contained in:
parent
e7322acaae
commit
1581bc0122
5 changed files with 48 additions and 5 deletions
|
@ -10,7 +10,13 @@
|
|||
* Specify the icon from `carbon-icons-svelte` to render
|
||||
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
|
||||
*/
|
||||
export let icon = undefined;
|
||||
export let icon = AppSwitcher20;
|
||||
|
||||
/**
|
||||
* Specify the close icon from `carbon-icons-svelte` to render
|
||||
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
|
||||
*/
|
||||
export let closeIcon = Close20;
|
||||
|
||||
/**
|
||||
* Specify the text
|
||||
|
@ -58,12 +64,13 @@
|
|||
class:action-text="{text}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:click|stopPropagation="{() => {
|
||||
on:click="{() => {
|
||||
isOpen = !isOpen;
|
||||
dispatch(isOpen ? 'open' : 'close');
|
||||
}}"
|
||||
>
|
||||
<Icon render="{icon || (isOpen ? Close20 : AppSwitcher20)}" />
|
||||
<Icon render="{icon}" style="{isOpen ? 'display: none' : ''}" />
|
||||
<Icon render="{closeIcon}" style="{!isOpen ? 'display: none' : ''}" />
|
||||
<slot name="text">
|
||||
{#if text}<span>{text}</span>{/if}
|
||||
</slot>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue