Source code

src/showcase/pages/components/alerts.html

This file is included in this documentation build. It is displayed as code and is not executed.

Download source

<!--
Demonstrate the alerts & toasts component on its own lazy route.

@author Laurent Declercq l.declercq@agon-innovation.ch
@version 20260921
-->
<section x-data="componentCatalog" class="component-library">
  <include
    src="partials/components/page-header.html"
    locals='{"title":"componentAlerts"}'
  ></include>
  <div class="catalog-grid">
    <article class="card">
      <header class="card-header"><h2 x-text="$t('galleryAlerts')"></h2></header>
      <div class="card-body">
        <div class="demo-stack">
          <template x-for="tone in ['success','info','warning','danger']" :key="tone">
            <div class="alert mb-0" :class="'alert-' + tone">
              <span class="badge me-2" :data-tone="tone" x-text="$t(tone)"></span>
              <span x-text="$t('galleryNotice')"></span>
            </div>
          </template>
          <div
            class="alert alert-success mb-0 d-flex align-items-center justify-content-between"
            x-show="notice"
          >
            <span x-text="$t('galleryNotice')"></span>
            <button
              class="btn btn-ghost icon-button"
              :aria-label="$t('galleryDismiss')"
              @click="notice = false"
            >
              <span x-icon="'close'"></span>
            </button>
          </div>
          <button
            class="btn btn-secondary"
            x-show="!notice"
            @click="notice = true"
            x-text="$t('reset')"
          ></button>
          <div class="demo-row">
            <template x-for="tone in ['success','info','warning','danger']" :key="tone">
              <button
                class="btn btn-secondary btn-sm"
                @click="$store.toasts.push($t('toastExample'), tone)"
                x-text="$t(tone)"
              ></button>
            </template>
          </div>
        </div>
      </div>
    </article>
  </div>
</section>