Pagination

Source

• Pagination.css

Example

<nav class="x-pagination" aria-label="pagination">
    <a class="x-button sm square muted pointer-events-none" href="#" aria-current="page">1</a>
    <a class="x-button sm square ghosted" href="#">2</a>
    <a class="x-button sm square ghosted" href="#">3</a>
    <a class="x-button sm square ghosted" href="#">4</a>
    <a class="x-button sm square ghosted">...</a>
    <a class="x-button sm square ghosted" href="#">30</a>
</nav>

More examples can be found in the Winduum docs.

Example CSS

@import "winduum/src/components/pagination/default.css" layer(utilities);

/* Example customization */
@layer utilities {
  .x-pagination.is-compact {
    padding: 0.5rem;
  }
}

Winduum CSS Code

winduum/src/components/pagination/default.css

.x-pagination {
  gap: var(--x-pagination-gap, calc(var(--spacing) * 1));
  display: flex;
  align-items: center;
}