mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
1523ce8527
* Replace variables.json with colors.json and update related files accordingly * Add variables data files * Update variables include template and all related files to use new variables data * Fix mobile breakpoint id typo in responsivness docs page * Fix Liquid syntax error in made-with-bulma docs page * Update bulma sass files count in modular docs page * Use breakpoints data in responsiveness helpers docs page * Use breakpoints and variables data in typography helpers docs page * Add missing page titles in docs pages front matter
213 lines
7.8 KiB
HTML
213 lines
7.8 KiB
HTML
---
|
|
title: Pagination
|
|
layout: documentation
|
|
doc-tab: components
|
|
doc-subtab: pagination
|
|
---
|
|
|
|
{% capture pagination_example %}
|
|
<nav class="pagination" 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">…</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">…</span>
|
|
</li>
|
|
<li>
|
|
<a class="pagination-link" aria-label="Goto page 86">86</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
{% endcapture %}
|
|
|
|
{% capture pagination_options_example %}
|
|
<nav class="pagination" role="navigation" aria-label="pagination">
|
|
<a class="pagination-previous" title="This is the first page" disabled>Previous</a>
|
|
<a class="pagination-next">Next page</a>
|
|
<ul class="pagination-list">
|
|
<li>
|
|
<a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a>
|
|
</li>
|
|
<li>
|
|
<a class="pagination-link" aria-label="Goto page 2">2</a>
|
|
</li>
|
|
<li>
|
|
<a class="pagination-link" aria-label="Goto page 3">3</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
{% endcapture %}
|
|
|
|
{% capture pagination_centered_example %}
|
|
<nav class="pagination is-centered" 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">…</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">…</span></li>
|
|
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
|
</ul>
|
|
</nav>
|
|
{% endcapture %}
|
|
|
|
{% capture pagination_right_example %}
|
|
<nav class="pagination is-right" 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">…</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">…</span></li>
|
|
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
|
</ul>
|
|
</nav>
|
|
{% endcapture %}
|
|
|
|
{% capture pagination_small_example %}
|
|
<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">
|
|
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
|
<li><span class="pagination-ellipsis">…</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">…</span></li>
|
|
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
|
</ul>
|
|
</nav>
|
|
{% endcapture %}
|
|
|
|
{% capture pagination_medium_example %}
|
|
<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">
|
|
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
|
<li><span class="pagination-ellipsis">…</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">…</span></li>
|
|
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
|
</ul>
|
|
</nav>
|
|
{% endcapture %}
|
|
|
|
{% capture pagination_large_example %}
|
|
<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">
|
|
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
|
<li><span class="pagination-ellipsis">…</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">…</span></li>
|
|
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
|
</ul>
|
|
</nav>
|
|
{% endcapture %}
|
|
|
|
{% include subnav-components.html %}
|
|
|
|
<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>
|
|
|
|
{% include snippet.html content=pagination_example horizontal=true more=true %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
You can disable some links if they are not active, or change the amount of page numbers available.
|
|
</p>
|
|
</div>
|
|
|
|
{% include snippet.html content=pagination_options_example horizontal=true more=true %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
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.
|
|
</p>
|
|
</div>
|
|
|
|
{% include snippet.html content=pagination_centered_example horizontal=true more=true %}
|
|
|
|
{% include snippet.html content=pagination_right_example horizontal=true more=true %}
|
|
|
|
{% include anchor.html name="Sizes" %}
|
|
|
|
<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>
|
|
|
|
{% include snippet.html content=pagination_small_example horizontal=true more=true %}
|
|
|
|
{% include snippet.html content=pagination_medium_example horizontal=true more=true %}
|
|
|
|
{% include snippet.html content=pagination_large_example horizontal=true more=true %}
|
|
|
|
{% include variables.html type='component' %}
|
|
|
|
</div>
|
|
</section>
|