Posición

De forma predeterminada, se muestra el logotipo y se implementan estilos para adaptarlo al diseño responsive. Si desea desactivar este comportamiento, utilice el atributo hide-logo para que el logotipo no se muestre.

Cuando la posición del encabezado es fixed, la dimensión del elemento no afecta al resto de la página.

<gstock-header></gstock-header>

Logotipo

Utilice el atributo hidden-logo para que el logotipo no se muestre. Por defecto, el logotipo se muestra y se implementan estilos para adaptarlo al diseño adaptable.

<gstock-header hidden-logo></gstock-header>

Título

Utilice el atributo title para establecer el título del encabezado. Encierre el texto entre llaves {T}est para resaltarlo.

<gstock-header title="{Header} Title"></gstock-header>

Contenido

Utilice el slot predeterminado para configurar el contenido del encabezado. Casi cualquier componente de Gstock, especialmente iconos, botones, botones con iconos, etc.

<gstock-header>
  <gstock-autocomplete slot="selector" value="test-00">
    <gstock-option value="test-00">Test panel admin</gstock-option>
    <gstock-option value="test-01">Test ceco 01</gstock-option>
    <gstock-option value="test-02">Test ceco 02 (CV)</gstock-option>
    <gstock-option value="test-03">Test ceco 03</gstock-option>
  </gstock-autocomplete>
  <gstock-icon icon="camera"></gstock-icon>
  <gstock-icon-button icon="bell" color="neutral" variant="plain" size="large">
    <gstock-badge pulse size="small" color="danger">5</gstock-badge>
  </gstock-icon-button>
  <gstock-icon-button icon="settings" color="neutral" variant="plain" size="large"></gstock-icon-button>
</gstock-header>

Avatar

Utilice el atributo avatar para mostrar un componente <gstock-avatar> al final del contenido.

<gstock-header avatar="S">
  <gstock-icon-button icon="bell" color="neutral" variant="plain" size="large">
    <gstock-badge pulse size="small" color="danger">5</gstock-badge>
  </gstock-icon-button>
  <gstock-icon-button icon="settings" color="neutral" variant="plain" size="large"></gstock-icon-button>
</gstock-header>

Menú desplegable

Utilice el evento gstock-toggle-menu-event para gestionar el menú desplegable.

<gstock-header></gstock-header>

<script type="module">
  
  const appHeader = document.querySelector("gstock-header");

  appHeader.addEventListener("gstock-toggle-menu-event", () => {
    alert('Toggle menu pressed!')
  });
</script>