@zebra-fed/zeta-web
    Preparing search index...

    Class ZetaGlobalHeader

    A header component which can contain branding, navigation, search, and user profile actions. Header will only allow a maximum of 6 menu items and 6 action items. Any additional items will be hidden. If you have a maximum amount (6) of menu and action items, the search bar will be hidden at a screen size of 1440px or smaller.

    menu-items - Slot for menu items on the left side of the header. Expects elements of type zeta-button or zeta-dropdown-menu-button.

    action-items - Slot for action items on the right side of the header. Expects elements of type zeta-icon-button or zeta-action-menu-button.

    user-avatar - Slot for user avatar. Input should be of type zeta-avatar. You must set the size prop to xxs.

    https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=23144-118110

    https://design.zebra.com/web/storybook/?path=/docs/components-global-header--docs

    <zeta-global-header
     platformName="Platform Name"
     name="Name"
     initials="RK"
     appSwitcher
     searchbar
     rounded
    >
    <zeta-button slot="menu-items"></zeta-button>
    <zeta-icon-button slot="action-items"></zeta-icon-button>
    <zeta-avatar slot="user-avatar" size="xxs">${this.initials}</zeta-avatar>
    </zeta-icon-button></zeta-global-header>

    Hierarchy

    • ContourableInterface<this> & LitElement<this>
      • ZetaGlobalHeader
    Index

    Other

    constructor actionItems appSwitcher initials menuItems name platformName rounded searchbar theme styles updated

    rendering

    render

    Other

    • Returns ZetaGlobalHeader

    actionItems: Node[]

    Slot for action items on the right side of the header. Expects elements of type zeta-icon-button or zeta-action-menu-button.

    appSwitcher: boolean = false

    Shows the app switcher icon. Make true to show the app switcher icon.

    initials: string = "RK"

    The initials to display within the user icon.

    menuItems: Node[]

    Slot for menu items on the left side of the header. Expects elements of type zeta-button or zeta-dropdown-menu-button.

    name: string = "Name"

    The name to show in the header, next to the user icon.

    platformName: string = "Platform Name"

    The platform name text on the header.

    rounded: boolean
    searchbar: boolean = false

    Shows the search bar. Make true to show the search bar.

    theme: string = "dark"

    Autoset the theme to dark mode for this component.

    styles: CSSResultGroup[] = ...

    • Checks the slots for items after the component has been updated. This ensures that any changes to the slotted content are detected and the state is updated accordingly.

      Returns void

    rendering

    • Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

      Returns TemplateResult<1>

    Settings

    Member Visibility

    On This Page

    Other
    rendering