mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
b21600c9d6* feat(types): loosen type for Carbon icons #806 * 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 * feat(types): loosen type for Carbon icons #806 * chore: update TreeView, HeaderAction icon types Co-authored-by: Daniel Miedzik <daniel.miedzik@gmail.com>
103 lines
2.7 KiB
Svelte
103 lines
2.7 KiB
Svelte
<script>
|
|
/** Set to `false` to hide the side nav by default */
|
|
export let expandedByDefault = true;
|
|
|
|
/** Set to `true` to open the side nav */
|
|
export let isSideNavOpen = false;
|
|
|
|
/**
|
|
* Specify the ARIA label for the header
|
|
* @type {string}
|
|
*/
|
|
export let uiShellAriaLabel = undefined;
|
|
|
|
/**
|
|
* Specify the `href` attribute
|
|
* @type {string}
|
|
*/
|
|
export let href = undefined;
|
|
|
|
/**
|
|
* Specify the company name
|
|
* @type {string}
|
|
*/
|
|
export let company = undefined;
|
|
|
|
/**
|
|
* Specify the platform name
|
|
* Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>)
|
|
*/
|
|
export let platformName = "";
|
|
|
|
/** Set to `true` to persist the hamburger menu */
|
|
export let persistentHamburgerMenu = false;
|
|
|
|
/**
|
|
* The window width (px) at which the SideNav is expanded and the hamburger menu is hidden
|
|
* 1056 represents the "large" breakpoint in pixels from the Carbon Design System:
|
|
* small: 320
|
|
* medium: 672
|
|
* large: 1056
|
|
* x-large: 1312
|
|
* max: 1584
|
|
*/
|
|
export let expansionBreakpoint = 1056;
|
|
|
|
/** 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("svelte").SvelteComponent}
|
|
*/
|
|
export let iconMenu = Menu20;
|
|
|
|
/**
|
|
* Specify the icon from `carbon-icons-svelte` to render for the opened state
|
|
* Defaults to `Close20`
|
|
* @type {typeof import("svelte").SvelteComponent}
|
|
*/
|
|
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";
|
|
|
|
let winWidth = undefined;
|
|
|
|
$: isSideNavOpen =
|
|
expandedByDefault &&
|
|
winWidth >= expansionBreakpoint &&
|
|
!persistentHamburgerMenu;
|
|
$: ariaLabel = company
|
|
? `${company} `
|
|
: "" + (uiShellAriaLabel || $$props["aria-label"] || platformName);
|
|
</script>
|
|
|
|
<svelte:window bind:innerWidth="{winWidth}" />
|
|
|
|
<header role="banner" aria-label="{ariaLabel}" class:bx--header="{true}">
|
|
<slot name="skip-to-content" />
|
|
{#if ($shouldRenderHamburgerMenu && winWidth < expansionBreakpoint) || persistentHamburgerMenu}
|
|
<HamburgerMenu
|
|
bind:isOpen="{isSideNavOpen}"
|
|
iconClose="{iconClose}"
|
|
iconMenu="{iconMenu}"
|
|
/>
|
|
{/if}
|
|
<a
|
|
href="{href}"
|
|
class:bx--header__name="{true}"
|
|
bind:this="{ref}"
|
|
{...$$restProps}
|
|
on:click
|
|
>
|
|
{#if company}
|
|
<span class:bx--header__name--prefix="{true}">{company} </span>
|
|
{/if}
|
|
<slot name="platform">{platformName}</slot>
|
|
</a>
|
|
<slot />
|
|
</header>
|