Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-19 03:44:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

Component links

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-09 13:18:46 +01:00
parent 0f9d338f66
commit e75fd365e3
11 changed files with 1110 additions and 1160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
docs/documentation/components/pagination.html
View File

@@ -1,8 +1,18 @@
---
title: Pagination
subtitle: "A responsive, usable, and flexible <strong>pagination</strong>"
layout: documentation
doc-tab: components
doc-subtab: pagination
breadcrumb:
- home
- documentation
- components
- components-pagination
meta:
- colors: false
- sizes: true
- variables: true
---
{% capture pagination_example %}
@@ -149,90 +159,72 @@ doc-subtab: pagination
</nav>
{% endcapture %}
{% include subnav/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>
<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-previous</code> and <code>pagination-next</code> for incremental navigation
<code>pagination-link</code> for the page numbers
</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>
<code>pagination-ellipsis</code> for range separators
</li>
</ul>
<p>
All elements are optional so you can compose your pagination as you wish.
</p>
</div>
</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 %}
{% 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>
<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 %}
{% 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>
<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_centered_example horizontal=true more=true %}
{% include snippet.html content=pagination_right_example horizontal=true more=true %}
{% include snippet.html content=pagination_right_example horizontal=true more=true %}
{% include anchor.html name="Styles" %}
{% include anchor.html name="Styles" %}
{% include elements/new-tag.html version="0.6.2" %}
{% 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>
<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 %}
{% include snippet.html content=pagination_rounded_example horizontal=true more=true %}
{% include anchor.html name="Sizes" %}
{% 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>
<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_small_example horizontal=true more=true %}
{% include snippet.html content=pagination_medium_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 snippet.html content=pagination_large_example horizontal=true more=true %}
{% include variables.html type='component' %}
</div>
</section>
{% include variables.html type='component' %}