vuejs-pagination-semantic-ui
1.0.0 • Public • Published Vue Pagination for Semantic-UI ⚡️
- This is on GitHub so let me know if I've messed it somewhere, give me a star ⭐️ if you like it, 🍻
- Server-side paging component in vue, template based on Semantic-UI.
✅ Installation 👌
$ npm install vuejs-pagination-semantic-ui
✅ Usage 🎓
import pagination from 'vuejs-pagination-semantic-ui'
new Vue({
el: '#app',,
components: { pagination }
data () {
return {
total: 1000,
pageSize: 50,
paginationOptions: {
offset: 2,
previousText: 'Prev',
nextText: 'Next',
alwaysShowPrevNext: true
}
}
},
methods: {
pageChanged (page) {
console.log(page)
}
}
})
✅ Example 🍀
<body id="app">
<pagination :total="total" :page-size="pageSize" :callback="pageChanged" :options="paginationOptions">
</pagination>
</body>
✅ 📖 Props:
| Name |
Type |
Default |
Required |
Description |
| total |
Number |
|
true |
Total items in server side |
| pageSize |
Number |
|
true |
Number of items in page |
| callback |
Function |
|
true |
Callback function used to load data for selected page |
✅ 📖 Options:
| Name |
String |
Default |
Description |
| offset |
Number |
3 |
Left and right offset of pagination numbers to display |
| previousText |
String |
« |
Change default previous button text |
| nextText |
String |
» |
Change default next button text |
| alwaysShowPrevNext |
Boolean |
false |
Show prev/next button even if on first/last page |
NPM :octocat:
License 📖
Package Sidebar
Install
npm i vuejs-pagination-semantic-ui
Weekly Downloads