Flag

<gstock-flag> | GstockFlag

Título

Use el atributo title para agregar un título al flag.

Nothing fancy here, just a simple 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.

Flag
Nothing fancy here, just a simple flag. 
<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.

Show Flag This flag will automatically hide itself after three seconds, unless you interact with it. 
<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.

You can safely exit the app now.
Settings will take effect on next login.
Please login again to continue.
We’re very sorry to see you go! 
<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.

You can close this flag any time! 
<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.

RTL countdown LTR countdown This is a flag with RTL countdown This is a flag with LTR countdown 
<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.

Show Flag You can pause/resume this flag any time! 
<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.

Nothing fancy here, just a simple flag. 
<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.

Nothing fancy here, just a simple flag. 
<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.

Success Information Warning Danger You can safely exit the app now. Settings will take effect on next login. Please login again to continue. We’re very sorry to see you go! 
<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.

Create Toast 
<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;
}