library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
f23012edbd
bulma/docs/documentation/components/pagination.html
bstashio afcdb7dbcc Update references to variables in docs (#1238) 
* Update navbar variables in component docs page

* Update pagination variables in component docs page

* Update tabs variables in component docs page

* Update button variables in element docs page

* Update table variables in element docs page

* Update title variables in element docs page

* Update variables template to support layout

* Add section variables in relevant docs page

* Add footer variables in relevant docs page

* Update variables template to support custom messages

* Add form generic variables in relevant docs page

* Update derived variables in relevant docs page

* Add generic variables to variables docs page

* Update sass files count in docs Modular page
2017-10-02 19:23:35 +01:00

245 lines
8.7 KiB
HTML
Raw Blame History

---
layout: documentation
doc-tab: components
doc-subtab: pagination
variables:
- name: $pagination-color
value: $grey-darker
- name: $pagination-border-color
value: $grey-lighter
- name: $pagination-margin
value: -0.25rem
- name: $pagination-hover-color
value: $link-hover
- name: $pagination-hover-border-color
value: $link-hover-border
- name: $pagination-focus-color
value: $link-focus
- name: $pagination-focus-border-color
value: $link-focus-border
- name: $pagination-active-color
value: $link-active
- name: $pagination-active-border-color
value: $link-active-border
- name: $pagination-disabled-color
value: $grey
- name: $pagination-disabled-background-color
value: $grey-lighter
- name: $pagination-disabled-border-color
value: $grey-lighter
- name: $pagination-current-color
value: $link-invert
- name: $pagination-current-background-color
value: $link
- name: $pagination-current-border-color
value: $link
- name: $pagination-ellipsis-color
value: $grey-light
---
{% 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">&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_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">&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_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">&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 %}
<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">&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_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">&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_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">&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 %}
{% 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 clipped=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 clipped=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 clipped=true %}
{% include snippet.html content=pagination_right_example horizontal=true clipped=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 clipped=true %}
{% include snippet.html content=pagination_medium_example horizontal=true clipped=true %}
{% include snippet.html content=pagination_large_example horizontal=true clipped=true %}
{% include variables.html %}
</div>
</section>
Reference in New Issue View Git Blame Copy Permalink