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
components/pagination-group.json
{
"name": "PaginationGroup",
"tagName": "noora-pagination-group",
"elementClassName": "NooraPaginationGroup",
"className": "noora-pagination-group",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Navigates a finite collection of numbered pages.",
"usage": "<noora-pagination-group current-page=\"2\" number-of-pages=\"10\"></noora-pagination-group>",
"attributes": [
{
"name": "current-page",
"property": "currentPage",
"type": "number",
"default": 1,
"description": "Sets the selected page."
},
{
"name": "number-of-pages",
"property": "numberOfPages",
"type": "number",
"default": 1,
"description": "Sets the total page count."
},
{
"name": "href-template",
"property": "hrefTemplate",
"type": "string",
"description": "Sets link locations by replacing `{page}` with the page number."
}
],
"readonlyProperties": [],
"slots": [],
"cssParts": [
{
"name": "pagination",
"description": "The pagination container."
},
{
"name": "page",
"description": "Each page control."
},
{
"name": "previous",
"description": "The previous-page control."
},
{
"name": "next",
"description": "The next-page control."
}
],
"events": [
{
"name": "noora-page-change",
"type": "CustomEvent<{ page: number }>",
"description": "Emitted when a page control is activated."
}
],
"notes": ["Page activation emits a `noora-page-change` event."],
"examples": [
{
"id": "basic",
"title": "Page positions",
"description": "Compare the first, middle, last, and second page positions.",
"markup": "<noora-pagination-group current-page=\"1\" number-of-pages=\"12\"></noora-pagination-group>\n<noora-pagination-group current-page=\"6\" number-of-pages=\"12\"></noora-pagination-group>\n<noora-pagination-group current-page=\"12\" number-of-pages=\"12\"></noora-pagination-group>\n<noora-pagination-group current-page=\"2\" number-of-pages=\"12\"></noora-pagination-group>"
},
{
"id": "page-counts",
"title": "Page counts",
"description": "Show ellipsis behavior across small and large collections.",
"markup": "<noora-pagination-group current-page=\"3\" number-of-pages=\"5\"></noora-pagination-group>\n<noora-pagination-group current-page=\"25\" number-of-pages=\"50\"></noora-pagination-group>\n<noora-pagination-group current-page=\"500\" number-of-pages=\"999\"></noora-pagination-group>"
},
{
"id": "edge-cases",
"title": "Edge cases",
"description": "Handle one-page, two-page, and near-boundary collections.",
"markup": "<noora-pagination-group current-page=\"1\" number-of-pages=\"1\"></noora-pagination-group>\n<noora-pagination-group current-page=\"1\" number-of-pages=\"2\"></noora-pagination-group>\n<noora-pagination-group current-page=\"2\" number-of-pages=\"2\"></noora-pagination-group>\n<noora-pagination-group current-page=\"3\" number-of-pages=\"20\"></noora-pagination-group>\n<noora-pagination-group current-page=\"18\" number-of-pages=\"20\"></noora-pagination-group>"
}
]
}