Semantic UI Template for Paginate (Almost) Anything
If you’ve tried using Michael Bromley’s AngularJS Pagination Directive in a Semantic UI site, you’ll probably notice that the pagination control renders like a regular unordered list.
Pagination Directive
The directive is part of a collection of utils available on GitHub and can be installed from bower or npm, whichever suits your project best.
The directive replaces the use of ng-repeat
for the page content, and includes a new directive to represent a set of page navigation buttons.
The control is designed for use in Bootstrap, which will be fine for the common case, but can be modified to use a custom template making it
very flexible - nice work Michael!
New Template
I’m a big fan of Semantic UI, and love how simple it is to style my AngularJS sites. Once I noticed the styles were broken, I started digging. The solution is quick and simple, and involves creating a custom template for the page navigation directive to use Semantic UI. I’ve based this off the pagination example in the tables documentation.
Copy this template and save it in your project next to your other templates/views/partials as dirPagination.tpl.html
.
Reference the Template
To use the template, reference it in the pagination control directive as follows.
Once you’re done, your pagination controls should look like this, and function in exactly the same way as the vanilla Bootstrap version. If there are updates to the directive, you may have to fix some things, but I’ll try keep this up to date if anything does change.
Demo Site
The original repository includes a demo of the directive on Plunker which I’ve forked and updated with this template. Take a look at the demo to see it in action!
Enjoy!