Source code

src/showcase/pages/components/pagination.html

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

Download source

<!--
Demonstrate the pagination 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":"componentPagination"}'
  ></include>
  <div class="catalog-grid">
    <article class="card">
      <header class="card-header"><h2 x-text="$t('componentPagination')"></h2></header>
      <div class="card-body">
        <nav :aria-label="$t('pagination')">
          <ul class="pagination mb-2">
            <li class="page-item" :class="{ disabled: page === 1 }">
              <button
                class="page-link"
                @click="page = page - 1"
                :disabled="page === 1"
                x-text="$t('previous')"
              ></button>
            </li>
            <template x-for="number in [1,2,3]" :key="number">
              <li class="page-item" :class="{ active: page === number }">
                <button
                  class="page-link"
                  :aria-current="page === number ? 'page' : false"
                  @click="page = number"
                  x-text="number"
                ></button>
              </li>
            </template>
            <li class="page-item" :class="{ disabled: page === 3 }">
              <button
                class="page-link"
                @click="page = page + 1"
                :disabled="page === 3"
                x-text="$t('next')"
              ></button>
            </li>
          </ul>
        </nav>
        <p class="text-muted">
          <span x-text="$t('galleryPage')"></span>
          :
          <output x-text="page"></output>
        </p>
      </div>
    </article>
  </div>
</section>