Application Header

<tpg-application-header></tpg-application-header>

Examples

Component

Vanilla JS

  <tpg-application-header>
      <tpg-truncate label="boomerang"></tpg-truncate>
      <tpg-quaternary-button label="One"></tpg-quaternary-button>
      <div style="display: flex; flex-direction: row-reverse; width: 100%">
          <tpg-quaternary-menu-button>
                <tpg-badge
                  slot="counter-badge"
                  type="accent"
                  emphasis="high"
                  label="10"
                  size="xxs"
                ></tpg-badge>
                <tpg-menu-item
                  label="Item 1">
                </tpg-menu-item>
                <tpg-menu-item
                  label="Item 2">
                </tpg-menu-item>
                <tpg-menu-item
                  label="Item 3">
                </tpg-menu-item>
          </tpg-quaternary-menu-button>
      </div>
  </tpg-application-header>
  <script>
      document.addEventListener('DOMContentLoaded', ()=>{
        const qmb = document.querySelector('tpg-quaternary-menu-button');
        qmb.iconTemplate = tpgIconMenu;
      });
  </script>

React

  function SomeComponent() {
    return (
      <>
        <tpg-application-header>
          <tpg-truncate label="boomerang"></tpg-truncate>
          <tpg-quaternary-button label="One"></tpg-quaternary-button>
          <div
            style={{
              display: "flex",
              flexDirection: "row-reverse",
              width: "100%",
            }}
          >
            <tpg-quaternary-menu-button iconTemplate={tpgIconMenu}>
              <tpg-badge
                slot="counter-badge"
                type="accent"
                emphasis="high"
                label="10"
                size="xxs"
              ></tpg-badge>
              <tpg-menu-item label="Item 1"></tpg-menu-item>
              <tpg-menu-item label="Item 2"></tpg-menu-item>
              <tpg-menu-item label="Item 3"></tpg-menu-item>
            </tpg-quaternary-menu-button>
          </div>
        </tpg-application-header>
      </>
    );
  }

Tables

Properties

Attribute	Property	Description	Type	Default Value
No properties found.

Events

Event name	Reactjs attribute	Description
No events found.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
	Accepts generic content

CSS Parts

Attribute	Description
content	part for adding styling to the default slot

Sandbox