Paginator
Paginator
The six-paginator component allows navigation through paginated content.
This is the content for page one! You can control the pages through the arrows, or by clicking directly on the number of the page you need.
For all possible parameters, as well as events, check the docs for more details!
<div style="width: 100%; height: 200px; background-color: var(--six-color-web-rock-300)">
<div id="paginator-page-0"
style="display: grid; align-items: center; justify-content: center; text-align: center; height: 100%"
>
<p>
This is the content for page one! You can control the pages through the arrows, or by clicking directly on
the number of the page you need.
</p>
<p>For all possible parameters, as well as events, check the docs for more details!</p>
</div>
<div id="paginator-page-1" style="display: none">This is page 2</div>
<div id="paginator-page-2" style="display: none">This is page 3</div>
<div id="paginator-page-3" style="display: none">This is page 4</div>
<div id="paginator-page-4" style="display: none">This is page 5</div>
</div>
<six-paginator id="paginator-basic" total-pages="5" total-results="20"></six-paginator>
<script type="module">
const paginatorBasic = document.getElementById('paginator-basic');
const contentPages = document.querySelectorAll('[id^="paginator-page-"]');
paginatorBasic.addEventListener('six-paginator-page-changed', (event) => {
contentPages.forEach((page) => {
page.style.display = 'none';
});
contentPages[event.detail.idx].style.display = 'block';
});
</script>Basic example
The simplest version of the paginator requires total-pages and total-results as parameters
<six-paginator total-pages="20" total-results="500"></six-paginator>Setting the current page
Use the current-page attribute (0-based index) to control the active page.
<six-paginator total-pages="20" total-results="500" current-page="3"></six-paginator>Controlling the amount of pages shown and clamping
Use the length prop to define how many page numbers are displayed. By default, if the number of total pages is greater than the length parameter, the list will be clamped.
<six-paginator total-pages="20" total-results="500" length="5"></six-paginator>To override this behaviour, you can set the clamp parameter to false. This will show all available pages.
<six-paginator total-pages="12" total-results="500" clamp="false"></six-paginator>Results Per Page Options
By default, three values are shown to the user so that they can choose how many items to show at once. Pass a list to results-per-page-options and set a default using results-per-page. If no default is provided, the first value of the choices will be used.
<six-paginator id="paginator-options" total-pages="15" total-results="500" results-per-page="50">
</six-paginator>
<script type="module">
const paginatorOptions = document.getElementById('paginator-options');
paginatorOptions.resultsPerPageOptions = ['10', '20', '50', '100'];
</script>Disabled State
Use the disabled prop to disable all controls.
<six-paginator total-pages="10" total-results="500" disabled></six-paginator>Slot Customization
Use the left and right slots to override the default content.
<six-paginator total-pages="12" total-results="640">
<div slot="left">
<strong>Some custom content to the left</strong>
</div>
<div slot="right">It can be anything you want! A nice icon for example? <six-icon>house</six-icon></div>
</six-paginator>Events
The paginator emits the following events:
six-paginator-page-changed– Fired when the page changes. This can be either when the user click on a number directly, or by using one of the available arrows.six-paginator-results-per-page-changed– Fired when the user changes their selection for the number of items to show at once.
To see the events, open up the console try it yourself.
<six-paginator total-pages="8"
total-results="200"
onchange="console.log(event)"
id="events-example"
></six-paginator>
<script type="module">
const paginator = document.getElementById('events-example');
paginator.addEventListener('six-paginator-page-changed', (event) => {
console.log('Page changed event fired', event.detail);
});
paginator.addEventListener('six-paginator-results-per-page-changed', (event) => {
console.log('Results per page changed event fired', event.detail);
});
</script>Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
clamp | clamp | Clamp the page numbers when they exceed the specified length. | boolean | true |
currentPage | current-page | The current page being displayed. This must be 0 based | number | undefined | undefined |
disabled | disabled | Disable all controls. | boolean | false |
length | length | The number of clickable page numbers to show. | number | 9 |
resultsPerPage | results-per-page | The results per page. Value must be one provided in the resultsPerPageOption. Otherwise the first value from the options will be used. | number | undefined | undefined |
resultsPerPageOptions | -- | The possible results per page. Must be a list of integers. At least one value is required. | number[] | [12, 24, 48] |
totalPages (required) | total-pages | The total amount of pages. | number | undefined |
totalResults (required) | total-results | The total amount of results. | number | undefined |
Events
| Event | Description | Type |
|---|---|---|
six-paginator-page-changed | Emitted whenever the page changes. This can be either due to one of the arrows bein pressed, or an explicit click on a page number. | CustomEvent<SixPaginatorPageChangedPayload> |
six-paginator-results-per-page-changed | Emitted after the user selects a value from the results per page select. | CustomEvent<SixPaginatorResultsPerPageChangedPayload> |
Dependencies
Depends on
Graph
Copyright © 2021-present SIX-Group