@pnx-mixtape/pagination

pagination component

Usage no npm install needed!

<script type="module">
  import pnxMixtapePagination from 'https://cdn.skypack.dev/@pnx-mixtape/pagination';
</script>

README

@pnx-mixtape/pagination

Documentation and examples: Pagination

Installation

npm install @pnx-mixtape/pagination --save

How to use

CSS

  • PostCSS workflow: @import '@pnx-mixtape/pagination';
  • Sass/Eyeglass: @import 'mixtape-pagination';
  • Native CSS: @import url('dist/pagination.css');
  • Link tag: <link href="dist/pagination.css" rel="stylesheet" type="text/css">

HTML

<nav aria-label="Pagination" class="pagination" role="navigation">
  <ul class="pagination__items">
    <li class="pagination__previous"><a href="#" class="icon icon--arrow-left">Previous</a></li>
    <li class="pagination__item"><a href="#">1</a></li>
    <li aria-current="page" class="pagination__item pagination__item--active">2</li>
    <li class="pagination__next"><a href="#" class="icon icon--arrow-right">Next</a></li>
  </ul>
</nav>