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

Fix rounded tabs

Browse Source
This commit is contained in:
Jeremy Thomas
2017-12-04 13:45:14 +00:00
parent 267f2c137f
commit d6dd2cb023
3 changed files with 61 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
docs/documentation/components/tabs.html
View File

@@ -164,6 +164,37 @@ doc-subtab: tabs
</div>
{% endcapture %}
{% capture tabs_toggle_rounded_example %}
<div class="tabs is-toggle is-toggle-rounded">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
{% endcapture %}
{% capture tabs_fullwidth_example %}
<div class="tabs is-fullwidth">
<ul>
@@ -385,6 +416,14 @@ doc-subtab: tabs
{% include snippet.html content=tabs_toggle_example horizontal=true more=true %}
{% include elements/new-tag.html version="0.6.2" %}
<p class="content">
If you use both <code>is-toggle</code> and <code>is-toggle-rounded</code>, the first and last items will be <strong>rounded</strong>.
</p>
{% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
<p class="content">
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
</p>