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

Fix pagination

Browse Source
This commit is contained in:
Jeremy Thomas
2016-10-30 22:31:54 +00:00
parent 9d48eff270
commit 3c48f5b3c3
3 changed files with 441 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,63 +13,158 @@ doc-subtab: pagination
<hr>
<div class="example">
<nav class="pagination">
<a class="button">Previous</a>
<a class="button">Next page</a>
<ul>
<li>
<a class="button">1</a>
</li>
<li>
<span>...</span>
</li>
<li>
<a class="button">45</a>
</li>
<li>
<a class="button is-primary">46</a>
</li>
<li>
<a class="button">47</a>
</li>
<li>
<span>...</span>
</li>
<li>
<a class="button">86</a>
</li>
</ul>
</nav>
<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>
{% highlight html %}
{% capture pagination_example %}
<nav class="pagination">
<a class="button">Previous</a>
<a class="button">Next page</a>
<ul>
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a class="button">1</a>
<a class="pagination-link">1</a>
</li>
<li>
<span>...</span>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="button">45</a>
<a class="pagination-link">45</a>
</li>
<li>
<a class="button is-primary">46</a>
<a class="pagination-link is-current">46</a>
</li>
<li>
<a class="button">47</a>
<a class="pagination-link">47</a>
</li>
<li>
<span>...</span>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="button">86</a>
<a class="pagination-link">86</a>
</li>
</ul>
</nav>
{% endcapture %}
<div class="example">
{{pagination_example}}
</div>
{% highlight html %}
{{pagination_example}}
{% endhighlight %}
<div class="content">
<p>
You can disable some links if they are not active, or change the amount of page numbers available.
</p>
</div>
{% capture pagination_options_example %}
<nav class="pagination">
<a class="pagination-previous is-disabled">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a class="pagination-link is-current">1</a>
</li>
<li>
<a class="pagination-link">2</a>
</li>
<li>
<a class="pagination-link">3</a>
</li>
<li>
<a class="pagination-link">4</a>
</li>
<li>
<a class="pagination-link">5</a>
</li>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link">86</a>
</li>
</ul>
</nav>
{% endcapture %}
<div class="example">
{{pagination_options_example}}
</div>
{% highlight html %}
{{pagination_options_example}}
{% endhighlight %}
<div class="content">
<p>
By default, 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>
{% capture pagination_centered_example %}
<nav class="pagination is-centered">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link">1</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
<li><a class="pagination-link">45</a></li>
<li><a class="pagination-link is-current">46</a></li>
<li><a class="pagination-link">47</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
<li><a class="pagination-link">86</a></li>
</ul>
</nav>
{% endcapture %}
<div class="example">
{{pagination_centered_example}}
</div>
{% highlight html %}
{{pagination_centered_example}}
{% endhighlight %}
{% capture pagination_right_example %}
<nav class="pagination is-right">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link">1</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
<li><a class="pagination-link">45</a></li>
<li><a class="pagination-link is-current">46</a></li>
<li><a class="pagination-link">47</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
<li><a class="pagination-link">86</a></li>
</ul>
</nav>
{% endcapture %}
<div class="example">
{{pagination_right_example}}
</div>
{% highlight html %}
{{pagination_right_example}}
{% endhighlight %}
</div>
</section>