Paginations

Standard pagination

= ui.nfg :pagination, class: 'my-4' do
  = ui.nfg :page_item, body: 'Previous', href: '#test'
  = ui.nfg :page_item, body: '1', href: '#test'
  = ui.nfg :page_item, body: '2', href: '#test'
  = ui.nfg :page_item, body: '3', href: '#test'
  = ui.nfg :page_item, body: '4', href: '#test'
  = ui.nfg :page_item, body: 'Next', href: '#test'

<nav>
  <ul class="pagination my-4">
    <li class="page-item"><a class="page-link" href="#test">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#test">1</a></li>
    <li class="page-item"><a class="page-link" href="#test">2</a></li>
    <li class="page-item"><a class="page-link" href="#test">3</a></li>
    <li class="page-item"><a class="page-link" href="#test">4</a></li>
    <li class="page-item"><a class="page-link" href="#test">Next</a></li>
  </ul>
</nav>

Pagination with active page items

= ui.nfg :pagination, class: 'my-4' do
  = ui.nfg :page_item, body: 'Previous'
  = ui.nfg :page_item, body: '1', active: true
  = ui.nfg :page_item, body: '2'
  = ui.nfg :page_item, body: '3'
  = ui.nfg :page_item, body: '4'
  = ui.nfg :page_item, body: 'Next'

<nav>
  <ul class="pagination my-4">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1<span class="sr-only">(current)</span></a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Pagination with disabled page items

= ui.nfg :pagination, class: 'my-4' do
  = ui.nfg :page_item, body: 'Previous'
  = ui.nfg :page_item, body: '1'
  = ui.nfg :page_item, body: '2', active: true
  = ui.nfg :page_item, body: '3', disabled: true
  = ui.nfg :page_item, body: '4', disabled: true
  = ui.nfg :page_item, body: 'Next', disabled: true

<nav>
  <ul class="pagination my-4">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2<span class="sr-only">(current)</span></a></li>
    <li class="page-item disabled"><a class="page-link" tabindex="-1" href="#">3</a></li>
    <li class="page-item disabled"><a class="page-link" tabindex="-1" href="#">4</a></li>
    <li class="page-item disabled"><a class="page-link" tabindex="-1" href="#">Next</a></li>
  </ul>
</nav>

Pagination with sizing

= ui.nfg :pagination, size: :sm, class: 'my-4' do
  = ui.nfg :page_item, body: 'Previous'
  = ui.nfg :page_item, body: '1', active: true
  = ui.nfg :page_item, body: '2'
  = ui.nfg :page_item, body: '3'
  = ui.nfg :page_item, body: '4'
  = ui.nfg :page_item, body: 'Next', disabled: true

<nav>
  <ul class="pagination my-4 pagination-sm">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1<span class="sr-only">(current)</span></a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item disabled"><a class="page-link" tabindex="-1" href="#">Next</a></li>
  </ul>
</nav>

= ui.nfg :pagination, class: 'my-4' do
  = ui.nfg :page_item, body: 'Previous'
  = ui.nfg :page_item, body: '1', active: true
  = ui.nfg :page_item, body: '2'
  = ui.nfg :page_item, body: '3'
  = ui.nfg :page_item, body: '4'
  = ui.nfg :page_item, body: 'Next', disabled: true

<nav>
  <ul class="pagination my-4">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1<span class="sr-only">(current)</span></a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item disabled"><a class="page-link" tabindex="-1" href="#">Next</a></li>
  </ul>
</nav>

= ui.nfg :pagination, size: :lg, class: 'my-4' do
  = ui.nfg :page_item, body: 'Previous'
  = ui.nfg :page_item, body: '1', active: true
  = ui.nfg :page_item, body: '2'
  = ui.nfg :page_item, body: '3'
  = ui.nfg :page_item, body: '4'
  = ui.nfg :page_item, body: 'Next', disabled: true

<nav>
  <ul class="pagination my-4 pagination-lg">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1<span class="sr-only">(current)</span></a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item disabled"><a class="page-link" tabindex="-1" href="#">Next</a></li>
  </ul>
</nav>

Pagination with alignment

Right alignment

= ui.nfg :pagination, right: true, class: 'my-4' do
  = ui.nfg :page_item, body: 'Previous'
  = ui.nfg :page_item, body: '1', active: true
  = ui.nfg :page_item, body: '2'
  = ui.nfg :page_item, body: '3'
  = ui.nfg :page_item, body: '4'
  = ui.nfg :page_item, body: 'Next', disabled: true

<nav>
  <ul class="pagination my-4 justify-content-end">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1<span class="sr-only">(current)</span></a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item disabled"><a class="page-link" tabindex="-1" href="#">Next</a></li>
  </ul>
</nav>

Center alignment

= ui.nfg :pagination, center: true, class: 'my-4' do
  = ui.nfg :page_item, body: 'Previous'
  = ui.nfg :page_item, body: '1', active: true
  = ui.nfg :page_item, body: '2'
  = ui.nfg :page_item, body: '3'
  = ui.nfg :page_item, body: '4'
  = ui.nfg :page_item, body: 'Next', disabled: true

<nav>
  <ul class="pagination my-4 justify-content-center">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1<span class="sr-only">(current)</span></a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item disabled"><a class="page-link" tabindex="-1" href="#">Next</a></li>
  </ul>
</nav>