Header

<gstock-header> | GstockHeader

Ejemplos

Básico

Utilice el slot logo para colocar un logotipo en el header (por ejemplo <gstock-logo slot="logo">). El componente se adapta automáticamente a distintos tamaños de pantalla.

<gstock-header>
  <gstock-icon-button slot="toggle-menu" icon="menu" variant="plain"></gstock-icon-button>
  <gstock-logo slot="logo"></gstock-logo>
</gstock-header>

Título

Utilice el atributo title para mostrar el nombre de la sección o aplicación. Encierre texto entre llaves {} para resaltarlo con el color de acento, por ejemplo {Header} Title.

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

Contenido

Utilice el slot predeterminado para añadir acciones al header. Los componentes más habituales son gstock-icon-button y gstock-badge.

Test panel admin

Test ceco 01

Test ceco 02 (CV)

Test ceco 03

<gstock-header>
  <gstock-logo slot="logo"></gstock-logo>
  <gstock-autocomplete 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-button icon="bell" color="neutral" variant="plain" size="large">
    <gstock-badge pulse size="small" color="danger" placement="top-end">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 slot avatar para colocar un avatar en el header (por ejemplo <gstock-avatar slot="avatar" initials="SF" size="large">). Cuando se combina con el slot user-menu, el avatar actúa como disparador de un menú desplegable.

<gstock-header>
  <gstock-logo slot="logo"></gstock-logo>
  <gstock-icon-button icon="bell" color="neutral" variant="plain" size="large">
    <gstock-badge pulse size="small" color="danger" placement="top-end">5</gstock-badge>
  </gstock-icon-button>
  <gstock-icon-button icon="settings" color="neutral" variant="plain" size="large"></gstock-icon-button>
  <gstock-avatar slot="avatar" color="mint" initials="S" size="large"></gstock-avatar>
</gstock-header>

Utilice el slot user-menu para añadir un menú desplegable que se abre al hacer clic en el avatar.

Settings

Logout

<gstock-header>
  <gstock-logo slot="logo"></gstock-logo>
  <gstock-icon-button icon="bell" color="neutral" variant="plain" size="large">
    <gstock-badge pulse size="small" color="danger" placement="top-end">5</gstock-badge>
  </gstock-icon-button>
  <gstock-icon-button icon="settings" color="neutral" variant="plain" size="large"></gstock-icon-button>
  <gstock-avatar slot="avatar" color="mint" initials="S" size="large"></gstock-avatar>
  <gstock-menu slot="user-menu">
    <gstock-menu-item suffix="settings">Settings</gstock-menu-item>
    <gstock-divider></gstock-divider>
    <gstock-menu-item suffix="log-out">Logout</gstock-menu-item>
  </gstock-menu>
</gstock-header>

El botón de menú se proporciona a través del slot toggle-menu. Al ser un elemento externo, puede escuchar directamente el evento click sobre él para abrir o cerrar la navegación lateral.

<gstock-header>
  <gstock-icon-button slot="toggle-menu" icon="menu" variant="plain"></gstock-icon-button>
  <gstock-logo slot="logo"></gstock-logo>
</gstock-header>

<script type="module">
  
  const toggleMenu = document.querySelector('[slot="toggle-menu"]');

  toggleMenu.addEventListener('click', () => {
    alert('Toggle menu pressed!');
  });
</script>

Ejemplo completo

Un header con todas las funcionalidades: título, acciones con iconos, badge de notificaciones, avatar con menú de usuario y menú de opciones adicionales para pantallas pequeñas.

Test MASTER

Test CECO 01

Test CECOVE 01 (CV)

Test CECO 02

Settings

Logout

Help

Academy

<gstock-header title="{ce}ntro de\n{co}mpras">
  <gstock-icon-button slot="toggle-menu" icon="menu" variant="plain"></gstock-icon-button>
  <gstock-logo slot="logo"></gstock-logo>
  <gstock-autocomplete filterable value="test-00">
    <gstock-option value="test-00">Test MASTER</gstock-option>
    <gstock-option value="test-01">Test CECO 01</gstock-option>
    <gstock-option value="test-02">Test CECOVE 01 (CV)</gstock-option>
    <gstock-option value="test-03">Test CECO 02</gstock-option>
  </gstock-autocomplete>
  <gstock-icon-button icon="help-circle" label="Help" color="neutral" variant="plain" size="large"></gstock-icon-button>
  <gstock-icon-button icon="book-open" label="Academy" color="neutral" variant="plain" size="large"></gstock-icon-button>
  <gstock-icon-button icon="bell" label="Notifications" color="neutral" variant="plain" size="large">
    <gstock-badge pulse size="small" color="danger" placement="top-end">3</gstock-badge>
  </gstock-icon-button>
  <gstock-avatar slot="avatar" color="mint" initials="S" size="large"></gstock-avatar>
  <gstock-menu slot="user-menu">
    <gstock-menu-item suffix="settings">Settings</gstock-menu-item>
    <gstock-divider></gstock-divider>
    <gstock-menu-item suffix="log-out">Logout</gstock-menu-item>
  </gstock-menu>
  <gstock-menu slot="more-menu">
    <gstock-menu-item suffix="help-circle">Help</gstock-menu-item>
    <gstock-menu-item suffix="book-open">Academy</gstock-menu-item>
  </gstock-menu>
</gstock-header>