Pagination
<div id="wrapper"> <ef-pagination page-size="5" total-items="32"></ef-pagination> </div>
#wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
margin-right: 100px;
}
ef-pagination is used when content is divided into separate pages to display the page numbers and enable navigation between them. The component should be positioned at the bottom right of the content.
Basic usage
The pagination component requires the mandatory attributes, page-size and total-items. It will use these to calculate the number of total pages.
By default, pagination will set the initial page to the first page but you can change that using the page attribute.
<div id="wrapper"> <ef-pagination page="3" page-size="5" total-items="32"></ef-pagination> </div>
#wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
margin-right: 100px;
}
<ef-pagination page="3" page-size="5" total-items="32"></ef-pagination>Disabled
To disable pagination, use the disabled attribute.
<div id="wrapper"> <ef-pagination disabled page-size="5" total-items="32"></ef-pagination> </div>
#wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
margin-right: 100px;
}
<ef-pagination disabled page-size="5" total-items="32"></ef-pagination>Responsive width
The page description section will be hidden if the width of the component is less than the break point, defined by the theme. You can override this value using the CSS variable, --responsive-width.
For example, to hide the page description when the width is less than 400px;
<div id="wrapper"> <ef-pagination page-size="5" total-items="32"></ef-pagination> </div>
#wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
margin-right: 100px;
}
ef-pagination {
width: 390px;
---responsive-width: 400;
}
ef-pagination {
---responsive-width: 400;
}Page changed
The pagination component will fire page-changed with the value of the new page in e.detail.value.
<div id="wrapper"> <ef-pagination id="pagination" page-size="5" total-items="32"></ef-pagination> </div> <div id="console"> Page = <span id="text"></span> </div>
var pagination = document.getElementById('pagination');
pagination.addEventListener('page-changed', function(e) {
var text = document.getElementById('text');
text.textContent = e.detail.value;
});
#wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
margin-right: 100px;
}
#console {
display: flex;
align-items: center;
justify-content: center;
}
<ef-pagination id="pagination" page-size="5" total-items="32"></ef-pagination>
<script>
var pagination = document.getElementById('pagination');
pagination.addEventListener('page-changed', function (e) { console.log(e.detail.value) });
</script>