bulma/docs/documentation/components/pagination.html

239 lines
8.9 KiB
HTML
Raw Normal View History

---
title: Pagination
layout: documentation
doc-tab: components
doc-subtab: pagination
---
2016-10-30 22:31:54 +00:00
{% capture pagination_example %}
2017-08-21 12:00:30 +00:00
<nav class="pagination" role="navigation" aria-label="pagination">
2016-10-30 22:31:54 +00:00
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
2017-08-21 12:00:30 +00:00
<a class="pagination-link" aria-label="Goto page 1">1</a>
2016-10-30 22:31:54 +00:00
</li>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
2017-08-21 12:00:30 +00:00
<a class="pagination-link" aria-label="Goto page 45">45</a>
2016-10-30 22:31:54 +00:00
</li>
<li>
2017-08-21 12:00:30 +00:00
<a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
2016-10-30 22:31:54 +00:00
</li>
<li>
2017-08-21 12:00:30 +00:00
<a class="pagination-link" aria-label="Goto page 47">47</a>
2016-10-30 22:31:54 +00:00
</li>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
2017-08-21 12:00:30 +00:00
<a class="pagination-link" aria-label="Goto page 86">86</a>
2016-10-30 22:31:54 +00:00
</li>
</ul>
</nav>
{% endcapture %}
{% capture pagination_options_example %}
2017-08-21 12:00:30 +00:00
<nav class="pagination" role="navigation" aria-label="pagination">
<a class="pagination-previous" title="This is the first page" disabled>Previous</a>
2016-10-30 22:31:54 +00:00
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
2017-08-21 12:00:30 +00:00
<a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a>
</li>
<li>
2017-08-21 12:00:30 +00:00
<a class="pagination-link" aria-label="Goto page 2">2</a>
</li>
<li>
2017-08-21 12:00:30 +00:00
<a class="pagination-link" aria-label="Goto page 3">3</a>
</li>
</ul>
</nav>
2016-10-30 22:31:54 +00:00
{% endcapture %}
{% capture pagination_centered_example %}
2017-08-21 12:00:30 +00:00
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
2016-10-30 22:31:54 +00:00
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
2017-08-21 12:00:30 +00:00
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
2016-10-30 22:31:54 +00:00
<li><span class="pagination-ellipsis">&hellip;</span></li>
2017-08-21 12:00:30 +00:00
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
2016-10-30 22:31:54 +00:00
<li><span class="pagination-ellipsis">&hellip;</span></li>
2017-08-21 12:00:30 +00:00
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
2016-10-30 22:31:54 +00:00
</ul>
</nav>
{% endcapture %}
{% capture pagination_right_example %}
2017-08-21 12:00:30 +00:00
<nav class="pagination is-right" role="navigation" aria-label="pagination">
2016-10-30 22:31:54 +00:00
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
2017-08-21 12:00:30 +00:00
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
2016-10-30 22:31:54 +00:00
<li><span class="pagination-ellipsis">&hellip;</span></li>
2017-08-21 12:00:30 +00:00
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
2016-10-30 22:31:54 +00:00
<li><span class="pagination-ellipsis">&hellip;</span></li>
2017-08-21 12:00:30 +00:00
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
2016-10-30 22:31:54 +00:00
</ul>
</nav>
{% endcapture %}
2017-12-04 13:39:15 +00:00
{% capture pagination_rounded_example %}
<nav class="pagination is-rounded" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
</ul>
</nav>
{% endcapture %}
{% capture pagination_small_example %}
2017-08-21 12:00:30 +00:00
<nav class="pagination is-small" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
2017-08-21 12:00:30 +00:00
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
2017-08-21 12:00:30 +00:00
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
2017-08-21 12:00:30 +00:00
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
</ul>
</nav>
{% endcapture %}
{% capture pagination_medium_example %}
2017-08-21 12:00:30 +00:00
<nav class="pagination is-medium" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
2017-08-21 12:00:30 +00:00
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
2017-08-21 12:00:30 +00:00
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
2017-08-21 12:00:30 +00:00
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
</ul>
</nav>
{% endcapture %}
{% capture pagination_large_example %}
2017-08-21 12:00:30 +00:00
<nav class="pagination is-large" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
2017-08-21 12:00:30 +00:00
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
2017-08-21 12:00:30 +00:00
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
2017-08-21 12:00:30 +00:00
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
</ul>
</nav>
{% endcapture %}
2018-03-26 13:46:39 +00:00
{% include subnav/subnav-components.html %}
2017-07-28 22:27:59 +00:00
<section class="section">
<div class="container">
<h1 class="title">Pagination</h1>
<h2 class="subtitle">A responsive, usable, and flexible <strong>pagination</strong></h2>
{%
include meta.html
colors=false
sizes=true
variables=true
%}
<hr>
<div class="content">
<p>
The pagination component consists of several elements:
</p>
<ul>
<li>
<code>pagination-previous</code> and <code>pagination-next</code> for incremental navigation
</li>
<li>
<code>pagination-list</code> which displays page items:
<ul>
<li>
<code>pagination-link</code> for the page numbers
</li>
<li>
<code>pagination-ellipsis</code> for range separators
</li>
</ul>
</li>
</ul>
<p>
All elements are optional so you can compose your pagination as you wish.
</p>
</div>
2017-10-09 14:38:12 +00:00
{% include snippet.html content=pagination_example horizontal=true more=true %}
2017-07-28 22:27:59 +00:00
<div class="content">
<p>
You can disable some links if they are not active, or change the amount of page numbers available.
</p>
</div>
2017-10-09 14:38:12 +00:00
{% include snippet.html content=pagination_options_example horizontal=true more=true %}
2017-07-28 22:27:59 +00:00
<div class="content">
<p>
2017-09-05 12:09:20 +00:00
By default on <strong>tablet</strong>, the list is located on the left, and the previous/next buttons on the right. But you can change the <strong>order</strong> of these elements by using the <code>is-centered</code> and <code>is-right</code> modifiers.
2017-07-28 22:27:59 +00:00
</p>
</div>
2017-10-09 14:38:12 +00:00
{% include snippet.html content=pagination_centered_example horizontal=true more=true %}
2017-07-28 22:27:59 +00:00
2017-10-09 14:38:12 +00:00
{% include snippet.html content=pagination_right_example horizontal=true more=true %}
2017-07-28 22:27:59 +00:00
2017-12-04 13:39:15 +00:00
{% include anchor.html name="Styles" %}
{% include elements/new-tag.html version="0.6.2" %}
<p class="content">
Add the <code>is-rounded</code> modifier to have rounded pagination items.
</p>
{% include snippet.html content=pagination_rounded_example horizontal=true more=true %}
2017-08-30 20:33:49 +00:00
{% include anchor.html name="Sizes" %}
2017-07-28 22:27:59 +00:00
<p class="content">
The pagination comes in <strong>3 additional sizes</strong>.<br>
You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or <code>is-large</code> to the <code>pagination</code> component.
</p>
2017-10-09 14:38:12 +00:00
{% include snippet.html content=pagination_small_example horizontal=true more=true %}
2017-07-28 22:27:59 +00:00
2017-10-09 14:38:12 +00:00
{% include snippet.html content=pagination_medium_example horizontal=true more=true %}
2017-07-28 22:27:59 +00:00
2017-10-09 14:38:12 +00:00
{% include snippet.html content=pagination_large_example horizontal=true more=true %}
{% include variables.html type='component' %}
2017-07-28 22:27:59 +00:00
</div>
</section>