Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-16 10:34:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add pagination sizes, Fix variables docs

Browse Source
This commit is contained in:
Jeremy Thomas
2017-03-13 16:52:01 +00:00
parent f725e9b3a0
commit dc672fd8df
9 changed files with 227 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -154,5 +154,73 @@ doc-subtab: pagination
{{pagination_right_example}}
{% endhighlight %}
<hr>
<h2 class="title">Sizes <span class="tag is-success">New!</span></h2>
<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>
{% capture pagination_small_example %}
<nav class="pagination is-small">
<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_small_example}}
</div>
{% capture pagination_medium_example %}
<nav class="pagination is-medium">
<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_medium_example}}
</div>
{% capture pagination_large_example %}
<nav class="pagination is-large">
<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_large_example}}
</div>
</div>
</section>