Source code

src/showcase/pages/components/dialog.html

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

Download source

<!--
Demonstrate standard, draggable, fullscreen, and scrollable dialogs on a 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":"componentDialog"}'
  ></include>
  <div class="catalog-grid">
    <article class="card">
      <header class="card-header"><h2 x-text="$t('dialogStandard')"></h2></header>
      <div class="card-body">
        <p class="text-muted" x-text="$t('dialogStandardDescription')"></p>
        <button
          class="btn btn-primary"
          @click="$dispatch('dialog-open', { id: 'example-dialog' })"
          x-text="$t('openDialog')"
        ></button>
      </div>
    </article>
    <include
      src="{{ uiRoot }}/dialog.html"
      locals='{"id":"example-dialog","title":"sampleDialog","content":"partials/sample-dialog.html","layout":"standard"}'
    ></include>
    <article class="card">
      <header class="card-header"><h2 x-text="$t('dialogDraggable')"></h2></header>
      <div class="card-body">
        <p class="text-muted" x-text="$t('dialogDraggableDescription')"></p>
        <button
          class="btn btn-primary"
          @click="$dispatch('dialog-open', { id: 'draggable-dialog' })"
          x-text="$t('openDraggableDialog')"
        ></button>
      </div>
    </article>
    <include
      src="{{ uiRoot }}/dialog.html"
      locals='{"id":"draggable-dialog","title":"dialogDraggable","content":"partials/sample-dialog.html","layout":"draggable"}'
    ></include>
    <article class="card">
      <header class="card-header"><h2 x-text="$t('dialogFullscreen')"></h2></header>
      <div class="card-body">
        <p class="text-muted" x-text="$t('dialogFullscreenDescription')"></p>
        <button
          class="btn btn-primary"
          @click="$dispatch('dialog-open', { id: 'fullscreen-dialog' })"
          x-text="$t('openFullscreenDialog')"
        ></button>
      </div>
    </article>
    <include
      src="{{ uiRoot }}/dialog.html"
      locals='{"id":"fullscreen-dialog","title":"dialogFullscreen","content":"partials/sample-scroll-dialog.html","layout":"fullscreen"}'
    ></include>
    <article class="card">
      <header class="card-header"><h2 x-text="$t('dialogScrollable')"></h2></header>
      <div class="card-body">
        <p class="text-muted" x-text="$t('dialogScrollableDescription')"></p>
        <button
          class="btn btn-primary"
          @click="$dispatch('dialog-open', { id: 'scrollable-dialog' })"
          x-text="$t('openScrollableDialog')"
        ></button>
      </div>
    </article>
    <include
      src="{{ uiRoot }}/dialog.html"
      locals='{"id":"scrollable-dialog","title":"dialogScrollable","content":"partials/sample-scroll-dialog.html","layout":"scrollable"}'
    ></include>
  </div>
</section>