Banner
<gstock-banner>
|
GstockBanner
Examples
Mensaje
Use el slot predeterminado para agregar un mensaje al banner.
<gstock-banner>Nada especial aquí, solo un banner simple y básico.</gstock-banner>Color
Utilice el atributo color para cambiar el color del banner.
<div class="banner-container">
<gstock-banner color="success">
Sus cambios han sido guardados. Puede salir de la aplicación de forma segura.
</gstock-banner>
<gstock-banner color="information">
Sus ajustes han sido actualizados. Los cambios tendrán efecto en el próximo inicio de sesión.
</gstock-banner>
<gstock-banner color="warning">
Su sesión ha finalizado. Por favor inicie sesión nuevamente para continuar.
</gstock-banner>
<gstock-banner color="danger">
Su cuenta ha sido eliminada. ¡Lamentamos mucho verle partir!
</gstock-banner>
</div>
<style>
.banner-container {
display: flex;
flex-direction: column;
gap: var(--gstock-space-gap-md);
}
</style>Icono
Use el atributo icon para agregar un icono personalizado. De forma predeterminada, cuando se establece el atributo color, el banner mostrará el icono para ese color, pero puede personalizar un icono usando el atributo icon.
<gstock-banner icon="bell">
Este es un banner simple con un icono personalizado de campana.
</gstock-banner>Para un icono personalizado con HTML, use el slot icon.
<gstock-banner>
<gstock-icon class="custom-icon" slot="icon" name="bell"></gstock-icon>
Este es un banner con un icono personalizado usando el slot icon.
</gstock-banner>
<style>
.custom-icon {
color: var(--gstock-color-icon-warning);
}
</style>Título
Use el atributo title o el slot title para agregar un título al banner.
<div class="banner-container">
<gstock-banner title="Título del banner">
Este es un banner con título usando el atributo title.
</gstock-banner>
<gstock-banner color="success">
<span slot="title">Operación exitosa</span>
Sus cambios han sido guardados correctamente.
</gstock-banner>
<gstock-banner color="information">
<strong slot="title">Información importante</strong>
Por favor lea este mensaje con atención.
</gstock-banner>
</div>
<style>
.banner-container {
display: flex;
flex-direction: column;
gap: var(--gstock-space-gap-md);
}
</style>El título se alinea correctamente con y sin iconos, manteniendo un espaciado consistente.
<div class="banner-container">
<gstock-banner title="Banner sin icono">
Este banner tiene título pero no tiene icono. El padding debe ser consistente.
</gstock-banner>
<gstock-banner color="information" title="Banner con icono de color">
Este banner tiene título y el icono por defecto del color. El espaciado debe verse correcto.
</gstock-banner>
<gstock-banner icon="bell" title="Banner con icono personalizado">
Este banner tiene título y un icono personalizado. Todo debe estar alineado correctamente.
</gstock-banner>
<gstock-banner>
<gstock-icon slot="icon" name="settings"></gstock-icon>
<span slot="title">Banner con icono en slot</span>
Este banner usa slots para el icono y el título. El padding debe ser perfecto.
</gstock-banner>
</div>
<style>
.banner-container {
display: flex;
flex-direction: column;
gap: var(--gstock-space-gap-md);
}
</style>Acciones
Use el slot actions para agregar botones u otros elementos interactivos al banner. Esto es útil para ofrecer acciones rápidas al usuario directamente desde el mensaje.
<div class="banner-actions-stack">
<gstock-banner color="information" title="Nueva versión disponible">
Se ha publicado una nueva versión del sistema. Revise los cambios antes de actualizar.
<gstock-button slot="actions" color="information" size="small">Actualizar</gstock-button>
</gstock-banner>
<gstock-banner color="warning" title="Acción requerida">
Hay elementos pendientes de revisión en su inventario.
<gstock-button slot="actions" color="warning" size="small">Revisar</gstock-button>
<gstock-icon-button slot="actions" color="warning" icon="eye" size="small"></gstock-icon-button>
</gstock-banner>
<gstock-banner color="danger" closable title="Error en la sincronización">
No se pudieron sincronizar 3 productos con el sistema externo.
<gstock-button slot="actions" color="danger" size="small">Reintentar</gstock-button>
</gstock-banner>
<gstock-banner color="success">
Operación completada con éxito.
<gstock-button slot="actions" color="success" size="small">Ver detalles</gstock-button>
</gstock-banner>
</div>
<style>
.banner-actions-stack {
display: flex;
flex-direction: column;
gap: var(--gstock-space-gap-md);
}
</style>Cerrable
Use el atributo closable para mostrar un botón de cerrar que permite al usuario descartar el banner. En este ejemplo, los banners reaparecen automáticamente 1 segundo después de cerrarlos para demostrar la funcionalidad.
<div id="container" class="banner-container">
<gstock-banner id="banner-1" closable>
Este es un banner que se puede cerrar. Haz clic en el icono X para cerrarlo.
</gstock-banner>
<gstock-banner id="banner-2" color="warning" closable>
<span slot="title">Advertencia importante</span>
Su sesión expirará en 5 minutos. Por favor guarde su trabajo.
</gstock-banner>
<gstock-banner id="banner-3" color="information" closable title="Nueva función disponible">
Hemos añadido nuevas funcionalidades. Haga clic aquí para conocer más.
</gstock-banner>
</div>
<script type="module">
customElements.whenDefined('gstock-banner').then(() => {
const banners = document.querySelectorAll('gstock-banner');
banners.forEach(banner => {
const closeButton = banner.shadowRoot.querySelector('.banner__close-button');
if (closeButton) {
closeButton.addEventListener('click', () => {
setTimeout(() => {
const baseElement = banner.shadowRoot.querySelector('[part~="base"]');
if (baseElement) {
baseElement.style.display = '';
}
}, 1000);
});
}
});
});
</script>
<style>
.banner-container {
display: flex;
flex-direction: column;
gap: var(--gstock-space-gap-md);
}
</style>Variante
Use el atributo variant para cambiar la variante del banner. Las variantes disponibles son default y bold.
<div class="banner-container">
<gstock-banner variant="default" color="information" title="Variante Default">
Esta es la variante por defecto del componente banner.
</gstock-banner>
<gstock-banner variant="bold" color="information" title="Variante Bold">
Esta es la variante bold del componente banner con mayor contraste visual.
</gstock-banner>
</div>
<style>
.banner-container {
display: flex;
flex-direction: column;
gap: var(--gstock-space-gap-md);
}
</style>La variante bold puede combinarse con cualquier color para crear banners de alto contraste visual, ideales para mensajes importantes que necesitan destacar.
<div class="banner-container">
<gstock-banner variant="bold" title="Banner Neutral Bold">
Esta es la variante bold del banner neutral con mayor contraste visual.
</gstock-banner>
<gstock-banner variant="bold" color="success" title="Banner Success Bold">
Esta es la variante bold del banner de éxito con mayor contraste visual.
</gstock-banner>
<gstock-banner variant="bold" color="information" title="Banner Information Bold">
Esta es la variante bold del banner de información con mayor contraste visual.
</gstock-banner>
<gstock-banner variant="bold" color="warning" title="Banner Warning Bold">
Esta es la variante bold del banner de advertencia con mayor contraste visual.
</gstock-banner>
<gstock-banner variant="bold" color="danger" title="Banner Danger Bold">
Esta es la variante bold del banner de peligro con mayor contraste visual.
</gstock-banner>
</div>
<style>
.banner-container {
display: flex;
flex-direction: column;
gap: var(--gstock-space-gap-md);
}
</style>La variante bold también funciona correctamente sin definir color (neutral), ofreciendo un contraste mejorado.
<div class="banner-container">
<gstock-banner variant="default" title="Banner Neutral Default">
Esta es la variante default del banner sin color definido (neutral).
</gstock-banner>
<gstock-banner variant="bold" title="Banner Neutral Bold">
Esta es la variante bold del banner sin color definido (neutral) con mejor contraste.
</gstock-banner>
<gstock-banner variant="bold" icon="info" title="Banner Neutral Bold con Icono">
El icono también tiene buen contraste en la variante bold neutral.
</gstock-banner>
</div>
<style>
.banner-container {
display: flex;
flex-direction: column;
gap: var(--gstock-space-gap-md);
}
</style>