Flag
<gstock-flag>
|
GstockFlag
Ejemplos
Título
Use el atributo title para agregar un título al flag.
<gstock-flag title="Flag" open>Nothing fancy here, just a simple flag.</gstock-flag>Para un título personalizado con HTML, use el slot title.
<gstock-flag open>
<div class="title" slot="title">
<gstock-icon name="bell" size="small"></gstock-icon>
Flag
</div>
Nothing fancy here, just a simple flag.
</gstock-flag>
<style>
.title {
display: flex;
color: var(--gstock-color-text-brand);
align-items: center;
gap: var(--gstock-legacy-spacing-gap-sm);
}
</style>Duración
Utilice el atributo duration para ocultar automáticamente un flag después de un período de tiempo. Esto es útil para mensajes con bandera que no requieren reconocimiento.
<gstock-button>Show Flag</gstock-button>
<gstock-flag duration="3000" closable>
This flag will automatically hide itself after three seconds, unless you interact with it.
</gstock-flag>
<script type="module">
const flag = document.querySelector('gstock-flag');
const button = document.querySelector('gstock-button');
button.addEventListener('click', () => flag.show());
</script>Color
Utilice el atributo color para cambiar el color del flag.
<gstock-flag title="Your changes have been saved" color="success" open>
You can safely exit the app now.
</gstock-flag>
<br>
<gstock-flag title="Your settings have been updated" color="information" open>
Settings will take effect on next login.
</gstock-flag>
<br>
<gstock-flag title="Your session has ended" color="warning" open>
Please login again to continue.
</gstock-flag>
<br>
<gstock-flag title="Your account has been deleted" color="danger" open>
We're very sorry to see you go!
</gstock-flag>Cerrable
Agregue el atributo closable para mostrar un botón de cierre que ocultará el flag.
<gstock-flag title="Closable" open closable>You can close this flag any time!</gstock-flag>
<script type="module">
const flag = document.querySelector('gstock-flag');
flag.addEventListener('gstock-after-hide-event', () => {
setTimeout(() => (flag.open = true), 2000);
});
</script>Cuenta regresiva
Agregue el atributo countdown para mostrar una cuenta regresiva de duración que mostrará el flag.
<gstock-button class="rtl">RTL countdown</gstock-button>
<gstock-button class="ltr">LTR countdown</gstock-button>
<gstock-flag title="RTL Countdown" duration="4000" countdown="rtl" closable>
This is a flag with RTL countdown
</gstock-flag>
<gstock-flag title="LTR Countdown" duration="4000" countdown="ltr" closable>
This is a flag with LTR countdown
</gstock-flag>
<script type="module">
const flagRTL = document.querySelector('gstock-flag[countdown="rtl"]');
const flagLTR = document.querySelector('gstock-flag[countdown="ltr"]');
const buttonRTL = document.querySelector('gstock-button.rtl');
const buttonLRT = document.querySelector('gstock-button.ltr');
buttonRTL.addEventListener('click', () => flagRTL.show());
buttonLRT.addEventListener('click', () => flagLTR.show());
</script>Pausables
Agregue el atributo pauseable para mostrar un botón de pausa/reanudar que ocultará el flag.
<gstock-button>Show Flag</gstock-button>
<gstock-flag title="Pauseable" duration="6000" pauseable closable>
You can pause/resume this flag any time!
</gstock-flag>
<script type="module">
const flag = document.querySelector('gstock-flag');
const button = document.querySelector('gstock-button');
button.addEventListener('click', () => flag.show());
</script>Icono personalizado
Use el atributo icon para agregar un icono personalizado. De forma predeterminada, cuando se establece el atributo color, el flag mostrará el icono para ese color, pero puede personalizar un icono usando el atributo icon.
<gstock-flag title="Custom Icon" icon="bell" open>
Nothing fancy here, just a simple flag.
</gstock-flag>Para un icono personalizado con HTML, use el slot icon.
<gstock-flag title="Custom Icon" open>
<gstock-icon class="icon" slot="icon" name="bell"></gstock-icon>
Nothing fancy here, just a simple flag.
</gstock-flag>
<style>
.icon {
color: var(--gstock-legacy-color-semantic-warning-500);
}
</style>Notificaciones emergentes
Para mostrar un flag como una notificación emergente, o “toast”, cree el flag y llame a su método toast(). Esto moverá el flag fuera de su posición en el DOM y dentro de la pila de notificaciones emergentes donde se mostrará. Una vez descartado, se eliminará completamente del DOM. Para reutilizar una notificación emergente, guarde una referencia a ella y llame a toast() nuevamente más tarde.
Siempre debe usar el atributo closable para que los usuarios puedan descartar la notificación. También es común establecer una duration razonable cuando la notificación no requiere reconocimiento.
<gstock-button color="success">Success</gstock-button>
<gstock-button color="information">Information</gstock-button>
<gstock-button color="warning">Warning</gstock-button>
<gstock-button color="danger">Danger</gstock-button>
<gstock-flag title="Your changes have been saved" color="success" duration="5000" closable countdown="rtl" pauseable>
You can safely exit the app now.
</gstock-flag>
<gstock-flag title="Your settings have been updated" color="information" duration="5000" closable countdown="rtl" pauseable>
Settings will take effect on next login.
</gstock-flag>
<gstock-flag title="Your session has ended" color="warning" duration="5000" closable countdown="rtl" pauseable>
Please login again to continue.
</gstock-flag>
<gstock-flag title="Your account has been deleted" color="danger" duration="5000" closable countdown="rtl" pauseable>
We're very sorry to see you go!
</gstock-flag>
<script type="module">
['success', 'information', 'warning', 'danger'].map(color => {
const button = document.querySelector(`gstock-button[color="${color}"]`);
const flag = document.querySelector(`gstock-flag[color="${color}"]`);
button.addEventListener('click', () => flag.toast());
});
</script>Creación de notificaciones emergentes imperativamente
Para mayor comodidad, puede crear una utilidad que emita notificaciones emergentes con una llamada a función en lugar de componerlas en su HTML. Para hacer esto, genere el flag con JavaScript, agréguelo al cuerpo y llame al método toast() como se muestra en el siguiente ejemplo.
<gstock-button>Create Toast</gstock-button>
<script type="module">
const button = document.querySelector('gstock-button');
let count = 0;
// Always escape HTML for text arguments!
function escapeHtml(html) {
const div = document.createElement('div');
div.textContent = html;
return div.innerHTML;
}
// Custom function to emit toast notifications
function notify(message, type = 'info', duration = 3000) {
const flag = Object.assign(document.createElement('gstock-flag'), {
closable: true,
duration: duration,
type,
title: 'Flag',
innerHTML: escapeHtml(message),
});
document.body.append(flag);
return flag.toast();
}
button.addEventListener('click', () => {
notify(`This is custom toast #${++count}`);
});
</script>La pila de notificaciones emergentes
La pila de notificaciones emergentes es un elemento singleton de posición fija creado y gestionado internamente por el componente de flag. Se agregará y eliminará del DOM según sea necesario cuando se muestren notificaciones emergentes. Cuando más de una notificación emergente sea visible, se apilarán verticalmente en la pila de notificaciones emergentes.
De forma predeterminada, la pila de notificaciones emergentes se posiciona en la parte superior derecha de la ventana gráfica. Puede cambiar su posición apuntando a .gstock-toast-stack en su hoja de estilos. Para hacer que las notificaciones emergentes aparezcan en la parte superior izquierda de la ventana gráfica, por ejemplo, use los siguientes estilos.
.gstock-toast-stack {
left: 0;
right: auto;
}
Por diseño, no es posible mostrar notificaciones emergentes en más de una pila simultáneamente. Tal comportamiento es confuso y ofrece una mala experiencia de usuario.