ractive-paginator
An easy to use Ractive component that handles pagination.
Demo
Install
npm install ractive-paginator --save
Usage
Add the component to your Ractive instance:
Ractive.extend({
...
components: {
paginator: require('ractive-paginator')
},
...
});
Use it
<paginator items='{{things}}'>
<div class='thing'>
{{.}}
</div>
</paginator>
The content inside the <paginator> take is what gets iterated just like an {{#each}} loop. The context is each item passed into items.
Includes minimal styling under the class .ractive-paginator. Styles are included in the javascript and added to the page on load.
API
Properties
items: Array of items that are paginated
perpage: How many items to display per page (default 30)
page: the current page
lastPage: how many pages total based off the number of items and perpage
Methods
previousPage: Go to the previous page
nextPage: Go to the next page
gotoPage: Go to a specific page
:)
Open to PRs and stuff. I'm around.