mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

add closeIcon attribute to HeaderAction

Browse source
This commit is contained in:
Daniel Miedzik 2021-10-15 18:20:25 +02:00
commit fc9e8a6926
5 changed files with 29 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -1613,6 +1613,7 @@ export interface HeaderActionSlideTransition {
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| closeIcon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the close icon from `carbon-icons-svelte` to render |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
| transition | <code>let</code> | No | <code>false &#124; HeaderActionSlideTransition</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`)<br />Set to `false` to disable the transition |

10
docs/src/COMPONENT_API.json
View file

@ -4379,6 +4379,16 @@
"constant": false,
"reactive": false
},
{
"name": "closeIcon",
"kind": "let",
"description": "Specify the close icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "text",
"kind": "let",

6
docs/src/pages/framed/UIShell/HeaderUtilities.svelte
View file

@ -32,7 +32,11 @@
</div>
<HeaderUtilities>
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
<HeaderAction bind:isOpen="{isOpen1}" icon="{UserAvatarFilledAlt20}">
<HeaderAction
bind:isOpen="{isOpen1}"
icon="{UserAvatarFilledAlt20}"
closeIcon="{UserAvatarFilledAlt20}"
>
<HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>

9
src/UIShell/GlobalHeader/HeaderAction.svelte
View file

@ -12,6 +12,12 @@
*/
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
* Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>)
@ -63,7 +69,8 @@
dispatch(isOpen ? 'open' : 'close');
}}"
>
<Icon render="{icon}" />
<Icon render="{icon}" style="{isOpen ? 'display: none' : ''}" />
<Icon render="{closeIcon}" style="{!isOpen ? 'display: none' : ''}" />
<slot name="text">
{#if text}<span>{text}</span>{/if}
</slot>

5
types/UIShell/GlobalHeader/HeaderAction.d.ts vendored
View file

@ -20,6 +20,11 @@ export interface HeaderActionProps
*/
icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/**
* Specify the close icon from `carbon-icons-svelte` to render
*/
closeIcon?: typeof import("carbon-icons-svelte").CarbonIcon;
/**
* Specify the text
* Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>)