Pagination

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages. It includes truncation and default index selection.

Code


                                                        
                                                        
                                                            <template>
                                                          <w-stack direction="column" gap="large">
                                                            <w-pagination current="1" pages="20" truncate-at="5"></w-pagination>
                                                          </w-stack>
                                                        </template>
                                                        
                                                        <script type="module">
                                                        const pagination = document.querySelector('w-pagination');
                                                        
                                                        function paginate(pageNum) {
                                                          const { detail: page } = pageNum;
                                                          pagination.setAttribute('current', page[0]);
                                                        }
                                                        
                                                        pagination.addEventListener('change', paginate);
                                                        </script>

Props

Name	Description	Type	Values
current	Specifies current page	number
pages Required	Number of pages	number
truncate-at	Number buttons/pages (excluding "Previous" and "Next")	number
translations	Object with all necessary translations. You can find a list of required translations in config.js	object	{ prevBtnAriaLabel, prevBtnLabel, nextBtnAriaLabel, nextBtnLabel }

Events

Name	Description	Type
change	Emits current page	{ "names": [ "String" ] }