Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/components/paginationgroup.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# PaginationGroup
Navigates a finite collection of numbered pages.
```html
<noora-pagination-group current-page="2" number-of-pages="10"></noora-pagination-group>
```
## Attributes
| 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. |
## Events
| Event | Type | Description |
| --- | --- | --- |
| `noora-page-change` | `CustomEvent<{ page: number }>` | Emitted when a page control is activated. |
## Styling parts
| 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.
## Page positions
Compare the first, middle, last, and second page positions.
```html
<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>
```
## Page counts
Show ellipsis behavior across small and large collections.
```html
<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>
```
## Edge cases
Handle one-page, two-page, and near-boundary collections.
```html
<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>
```