Pagination(ui_pagination)Bootstrap Logo

UiBibz::Ui::Core::Navigations::Pagination

Pagination is a component to allow navigation between multiple pages.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

ui_pagination options, html_options do |n|
  # by variable
  n.link content, options, html_options
  # or by block
  n.link options, html_options do
    content
  end
end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • justify[boolean]
  • position[symbol](:left, :center, :right)
  • size[symbol](:lg, :md, :sm)(use component size method)
  • stacked[boolean]
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)
  • type[symbol](:tabs, :pills, :links)

Items

The allowed items for this component are:
  • html[html/string]Insert html as a component
  • link(inherit of link)

Examples

Some examples explain how to use the options present in the component.

Pagination

ui_pagination do |n|
  n.link '«', url: '#<<', state: :disabled
  n.link 1, url: '#<<', state: :active
  n.link 2, url: '#2', class: 'my-link'
  n.link 3, url: '#3', class: 'my-link'
  n.link 4, url: '#4', class: 'my-link'
  n.link 5, url: '#5', class: 'my-link'
  n.link 6, url: '#6', class: 'my-link'
  n.link '»', url: '#>>'
end

<ul class="pagination">
  <li class="disabled page-item">
    <a class="page-link" href="#&lt;&lt;">«</a>
  </li>
  <li class="active page-item">
    <a class="page-link" href="#&lt;&lt;">1</a>
  </li>
  <li class="my-link page-item">
    <a class="page-link" href="#2">2</a>
  </li>
  <li class="my-link page-item">
    <a class="page-link" href="#3">3</a>
  </li>
  <li class="my-link page-item">
    <a class="page-link" href="#4">4</a>
  </li>
  <li class="my-link page-item">
    <a class="page-link" href="#5">5</a>
  </li>
  <li class="my-link page-item">
    <a class="page-link" href="#6">6</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#&gt;&gt;">»</a>
  </li>
</ul>

Size

The size option has following symbols for argument:
  • :lg
  • :md
  • :sm
ui_pagination size: :lg do |n|
  n.link '«', url: '#<<', state: :disabled
  n.link 1, url: '#<<', state: :active
  n.link 2, url: '#2', class: 'my-link'
  n.link 3, url: '#3', class: 'my-link'
  n.link 4, url: '#4', class: 'my-link'
  n.link 5, url: '#5', class: 'my-link'
  n.link 6, url: '#6', class: 'my-link'
  n.link '»', url: '#>>'
end
ui_pagination size: :md do |n|
  n.link '«', url: '#<<', state: :disabled
  n.link 1, url: '#<<', state: :active
  n.link 2, url: '#2', class: 'my-link'
  n.link 3, url: '#3', class: 'my-link'
  n.link 4, url: '#4', class: 'my-link'
  n.link 5, url: '#5', class: 'my-link'
  n.link 6, url: '#6', class: 'my-link'
  n.link '»', url: '#>>'
end
ui_pagination size: :sm do |n|
  n.link '«', url: '#<<', state: :disabled
  n.link 1, url: '#<<', state: :active
  n.link 2, url: '#2', class: 'my-link'
  n.link 3, url: '#3', class: 'my-link'
  n.link 4, url: '#4', class: 'my-link'
  n.link 5, url: '#5', class: 'my-link'
  n.link 6, url: '#6', class: 'my-link'
  n.link '»', url: '#>>'
end

<ul class="pagination pagination-lg">
  <li class="disabled page-item">
    <a class="page-link" href="#&lt;&lt;">«</a>
  </li>
  <li class="active page-item">
    <a class="page-link" href="#&lt;&lt;">1</a>
  </li>
  <li class="my-link page-item">
    <a class="page-link" href="#2">2</a>
  </li>
  <li class="my-link page-item">
    <a class="page-link" href="#3">3</a>
  </li>
  <li class="my-link page-item">
    <a class="page-link" href="#4">4</a>
  </li>
  <li class="my-link page-item">
    <a class="page-link" href="#5">5</a>
  </li>
  <li class="my-link page-item">
    <a class="page-link" href="#6">6</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#&gt;&gt;">»</a>
  </li>
</ul>

Position

The position option has following symbols for argument:
  • :left
  • :center
  • :right
ui_pagination size: :left do |n|
  n.link '«', url: '#<<', state: :disabled
  n.link 1, url: '#<<', state: :active
  n.link 2, url: '#2', class: 'my-link'
  n.link 3, url: '#3', class: 'my-link'
  n.link 4, url: '#4', class: 'my-link'
  n.link 5, url: '#5', class: 'my-link'
  n.link 6, url: '#6', class: 'my-link'
  n.link '»', url: '#>>'
end

ui_pagination size: :center do |n|
  n.link '«', url: '#<<', state: :disabled
  n.link 1, url: '#<<', state: :active
  n.link 2, url: '#2', class: 'my-link'
  n.link 3, url: '#3', class: 'my-link'
  n.link 4, url: '#4', class: 'my-link'
  n.link 5, url: '#5', class: 'my-link'
  n.link 6, url: '#6', class: 'my-link'
  n.link '»', url: '#>>'
end

ui_pagination size: :right do |n|
  n.link '«', url: '#<<', state: :disabled
  n.link 1, url: '#<<', state: :active
  n.link 2, url: '#2', class: 'my-link'
  n.link 3, url: '#3', class: 'my-link'
  n.link 4, url: '#4', class: 'my-link'
  n.link 5, url: '#5', class: 'my-link'
  n.link 6, url: '#6', class: 'my-link'
  n.link '»', url: '#>>'
end


<ul class="pagination">
  <li class="disabled page-item">
    <a class="page-link" href="#&lt;&lt;">«</a>
  </li>
  <li class="active page-item">
    <a class="page-link" href="#&lt;&lt;">1</a>
  </li>
  <li class="my-link page-item">
    <a class="page-link" href="#2">2</a>
  </li>
  <li class="my-link page-item">
    <a class="page-link" href="#3">3</a>
  </li>
  <li class="my-link page-item">
    <a class="page-link" href="#4">4</a>
  </li>
  <li class="my-link page-item">
    <a class="page-link" href="#5">5</a>
  </li>
  <li class="my-link page-item">
    <a class="page-link" href="#6">6</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#&gt;&gt;">»</a>
  </li>
</ul>