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

feat(ui-shell): allow custom hamburger menu icons

Browse source
This commit is contained in:
Eric Y Liu 2021-05-02 15:35:43 -07:00
commit 3620f94f97
5 changed files with 78 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

22
COMPONENT_INDEX.md
View file

@ -1505,16 +1505,18 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------------------- | :--------------- | :------- | :----------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| isSideNavOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav |
| expandedByDefault | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
| uiShellAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the header |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| company | <code>let</code> | No | <code>string</code> | -- | Specify the company name |
| platformName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., &lt;span slot="platform"&gt;...&lt;/span&gt;) |
| persistentHamburgerMenu | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| isSideNavOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav |
| expandedByDefault | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
| uiShellAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the header |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| company | <code>let</code> | No | <code>string</code> | -- | Specify the company name |
| platformName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., &lt;span slot="platform"&gt;...&lt;/span&gt;) |
| persistentHamburgerMenu | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
| iconMenu | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the closed state<br />Defaults to `Menu20` |
| iconClose | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the opened state<br />Defaults to `Close20` |
### Slots

18
docs/src/COMPONENT_API.json
View file

@ -3787,6 +3787,24 @@
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "iconMenu",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render for the closed state\nDefaults to `Menu20`",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "iconClose",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render for the opened state\nDefaults to `Close20`",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [

22
src/UIShell/GlobalHeader/Header.svelte
View file

@ -35,6 +35,22 @@
/** Obtain a reference to the HTML anchor element */
export let ref = null;
/**
* Specify the icon from `carbon-icons-svelte` to render for the closed state
* Defaults to `Menu20`
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/
export let iconMenu = Menu20;
/**
* Specify the icon from `carbon-icons-svelte` to render for the opened state
* Defaults to `Close20`
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/
export let iconClose = Close20;
import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte";
import { shouldRenderHamburgerMenu } from "../navStore";
import HamburgerMenu from "../SideNav/HamburgerMenu.svelte";
@ -52,7 +68,11 @@
<header role="banner" aria-label="{ariaLabel}" class:bx--header="{true}">
<slot name="skip-to-content" />
{#if ($shouldRenderHamburgerMenu && winWidth < 1056) || persistentHamburgerMenu}
<HamburgerMenu bind:isOpen="{isSideNavOpen}" />
<HamburgerMenu
bind:isOpen="{isSideNavOpen}"
iconClose="{iconClose}"
iconMenu="{iconMenu}"
/>
{/if}
<a
href="{href}"

16
src/UIShell/SideNav/HamburgerMenu.svelte
View file

@ -8,6 +8,20 @@
/** Set to `true` to toggle the open state */
export let isOpen = false;
/**
* Specify the icon from `carbon-icons-svelte` to render for the closed state
* Defaults to `Menu20`
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/
export let iconMenu = Menu20;
/**
* Specify the icon from `carbon-icons-svelte` to render for the opened state
* Defaults to `Close20`
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/
export let iconClose = Close20;
/** Obtain a reference to the HTML button element */
export let ref = null;
@ -27,5 +41,5 @@
on:click
on:click="{() => (isOpen = !isOpen)}"
>
<svelte:component this="{isOpen ? Close20 : Menu20}" />
<svelte:component this="{isOpen ? iconClose : iconMenu}" />
</button>

12
types/UIShell/GlobalHeader/Header.d.ts vendored
View file

@ -48,6 +48,18 @@ export interface HeaderProps
* @default null
*/
ref?: null | HTMLAnchorElement;
/**
* Specify the icon from `carbon-icons-svelte` to render for the closed state
* Defaults to `Menu20`
*/
iconMenu?: typeof import("carbon-icons-svelte").CarbonIcon;
/**
* Specify the icon from `carbon-icons-svelte` to render for the opened state
* Defaults to `Close20`
*/
iconClose?: typeof import("carbon-icons-svelte").CarbonIcon;
}
export default class Header extends SvelteComponentTyped<