Header
<gstock-header>
|
GstockHeader
Examples
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.
<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>Menú de usuario
Utilice el slot user-menu para añadir un menú desplegable que se abre al hacer clic en el avatar.
<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>Botón de menú
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.
<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>