noora/docs/components/paginationgroup.md
Navigates a finite collection of numbered pages.
<noora-pagination-group current-page="2" number-of-pages="10"></noora-pagination-group>
| Attribute | Type or allowed values | Default | Description |
|---|---|---|---|
current-page | number | 1 | Sets the selected page. |
number-of-pages | number | 1 | Sets the total page count. |
href-template | string | None | Sets link locations by replacing {page} with the page number. |
| Event | Type | Description |
|---|---|---|
noora-page-change | CustomEvent<{ page: number }> | Emitted when a page control is activated. |
| Part | Description |
|---|---|
pagination | The pagination container. |
page | Each page control. |
previous | The previous-page control. |
next | The next-page control. |
Page activation emits a noora-page-change event.
Compare the first, middle, last, and second page positions.
<noora-pagination-group current-page="1" number-of-pages="12"></noora-pagination-group>
<noora-pagination-group current-page="6" number-of-pages="12"></noora-pagination-group>
<noora-pagination-group current-page="12" number-of-pages="12"></noora-pagination-group>
<noora-pagination-group current-page="2" number-of-pages="12"></noora-pagination-group>
Show ellipsis behavior across small and large collections.
<noora-pagination-group current-page="3" number-of-pages="5"></noora-pagination-group>
<noora-pagination-group current-page="25" number-of-pages="50"></noora-pagination-group>
<noora-pagination-group current-page="500" number-of-pages="999"></noora-pagination-group>
Handle one-page, two-page, and near-boundary collections.
<noora-pagination-group current-page="1" number-of-pages="1"></noora-pagination-group>
<noora-pagination-group current-page="1" number-of-pages="2"></noora-pagination-group>
<noora-pagination-group current-page="2" number-of-pages="2"></noora-pagination-group>
<noora-pagination-group current-page="3" number-of-pages="20"></noora-pagination-group>
<noora-pagination-group current-page="18" number-of-pages="20"></noora-pagination-group>