@pnx-mixtape/pagination

pagination component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@pnx-mixtape/pagination
1.0.0-alpha.03 months ago3 years agoMinified + gzip package size for @pnx-mixtape/pagination in KB

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>