mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
191 lines
4.2 KiB
HTML
191 lines
4.2 KiB
HTML
|
---
|
||
|
layout: cypress
|
||
|
title: Components/Tabs
|
||
|
---
|
||
|
|
||
|
{% capture content_text %}
|
||
|
<ul>
|
||
|
<li class="is-active"><a>Pictures</a></li>
|
||
|
<li><a>Music</a></li>
|
||
|
<li><a>Videos</a></li>
|
||
|
<li><a>Documents</a></li>
|
||
|
</ul>
|
||
|
{% endcapture %}
|
||
|
|
||
|
{% capture content_icons %}
|
||
|
<ul>
|
||
|
<li class="is-active">
|
||
|
<a>
|
||
|
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||
|
<span>Pictures</span>
|
||
|
</a>
|
||
|
</li>
|
||
|
<li>
|
||
|
<a>
|
||
|
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||
|
<span>Music</span>
|
||
|
</a>
|
||
|
</li>
|
||
|
<li>
|
||
|
<a>
|
||
|
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||
|
<span>Videos</span>
|
||
|
</a>
|
||
|
</li>
|
||
|
<li>
|
||
|
<a>
|
||
|
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||
|
<span>Documents</span>
|
||
|
</a>
|
||
|
</li>
|
||
|
</ul>
|
||
|
{% endcapture %}
|
||
|
|
||
|
<div id="tabs-lists" class="tabs">
|
||
|
<ul class="is-left">
|
||
|
<li class="is-active"><a>Pictures</a></li>
|
||
|
<li><a>Music</a></li>
|
||
|
<li><a>Videos</a></li>
|
||
|
<li><a>Documents</a></li>
|
||
|
</ul>
|
||
|
|
||
|
<ul class="is-center">
|
||
|
<li class="is-active"><a>Pictures</a></li>
|
||
|
<li><a>Music</a></li>
|
||
|
<li><a>Videos</a></li>
|
||
|
<li><a>Documents</a></li>
|
||
|
</ul>
|
||
|
|
||
|
<ul class="is-right">
|
||
|
<li class="is-active"><a>Pictures</a></li>
|
||
|
<li><a>Music</a></li>
|
||
|
<li><a>Videos</a></li>
|
||
|
<li><a>Documents</a></li>
|
||
|
</ul>
|
||
|
</div>
|
||
|
|
||
|
<div id="tabs" class="tabs">
|
||
|
{{ content_text }}
|
||
|
</div>
|
||
|
|
||
|
<div id="tabs-centered" class="tabs is-centered">
|
||
|
{{ content_text }}
|
||
|
</div>
|
||
|
|
||
|
<div id="tabs-right" class="tabs is-right">
|
||
|
{{ content_text }}
|
||
|
</div>
|
||
|
|
||
|
<div id="tabs-small" class="tabs is-small">
|
||
|
{{ content_text }}
|
||
|
</div>
|
||
|
|
||
|
<div id="tabs-medium" class="tabs is-medium">
|
||
|
{{ content_text }}
|
||
|
</div>
|
||
|
|
||
|
<div id="tabs-large" class="tabs is-large">
|
||
|
{{ content_text }}
|
||
|
</div>
|
||
|
|
||
|
<div id="tabs-boxed" class="tabs is-boxed">
|
||
|
{{ content_icons }}
|
||
|
</div>
|
||
|
|
||
|
<div id="tabs-toggle" class="tabs is-toggle">
|
||
|
{{ content_icons }}
|
||
|
</div>
|
||
|
|
||
|
<div id="tabs-toggle-rounded" class="tabs is-toggle is-toggle-rounded">
|
||
|
<ul>
|
||
|
<li class="is-active">
|
||
|
<a>
|
||
|
<span class="icon is-small"><i class="fas fa-image"></i></span>
|
||
|
<span>Pictures</span>
|
||
|
</a>
|
||
|
</li>
|
||
|
<li>
|
||
|
<a>
|
||
|
<span class="icon is-small"><i class="fas fa-music"></i></span>
|
||
|
<span>Music</span>
|
||
|
</a>
|
||
|
</li>
|
||
|
<li>
|
||
|
<a>
|
||
|
<span class="icon is-small"><i class="fas fa-film"></i></span>
|
||
|
<span>Videos</span>
|
||
|
</a>
|
||
|
</li>
|
||
|
<li>
|
||
|
<a>
|
||
|
<span class="icon is-small"><i class="fas fa-file-alt"></i></span>
|
||
|
<span>Documents</span>
|
||
|
</a>
|
||
|
</li>
|
||
|
</ul>
|
||
|
</div>
|
||
|
|
||
|
<div id="tabs-fullwidth" class="tabs is-fullwidth">
|
||
|
<ul>
|
||
|
<li>
|
||
|
<a>
|
||
|
<span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
|
||
|
<span>Left</span>
|
||
|
</a>
|
||
|
</li>
|
||
|
<li>
|
||
|
<a>
|
||
|
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
|
||
|
<span>Up</span>
|
||
|
</a>
|
||
|
</li>
|
||
|
<li>
|
||
|
<a>
|
||
|
<span>Right</span>
|
||
|
<span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
|
||
|
</a>
|
||
|
</li>
|
||
|
</ul>
|
||
|
</div>
|
||
|
|
||
|
<div id="tabs-centered-boxed" class="tabs is-centered is-boxed">
|
||
|
{{ content_icons }}
|
||
|
</div>
|
||
|
|
||
|
<div id="tabs-toggle-fullwidth" class="tabs is-toggle is-fullwidth">
|
||
|
{{ content_icons }}
|
||
|
</div>
|
||
|
|
||
|
<div id="tabs-centered-boxed-medium" class="tabs is-centered is-boxed is-medium">
|
||
|
{{ content_icons }}
|
||
|
</div>
|
||
|
|
||
|
<div id="tabs-toggle-fullwidth-large" class="tabs is-toggle is-fullwidth is-large">
|
||
|
<ul>
|
||
|
<li class="is-active">
|
||
|
<a>
|
||
|
<span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||
|
<span>Pictures</span>
|
||
|
</a>
|
||
|
</li>
|
||
|
<li>
|
||
|
<a>
|
||
|
<span class="icon"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||
|
<span>Music</span>
|
||
|
</a>
|
||
|
</li>
|
||
|
<li>
|
||
|
<a>
|
||
|
<span class="icon"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||
|
<span>Videos</span>
|
||
|
</a>
|
||
|
</li>
|
||
|
<li>
|
||
|
<a>
|
||
|
<span class="icon"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||
|
<span>Documents</span>
|
||
|
</a>
|
||
|
</li>
|
||
|
</ul>
|
||
|
</div>
|