mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Add meta to components
This commit is contained in:
Jeremy Thomas
@@ -2,22 +2,57 @@
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: tabs
|
||||
variables:
|
||||
- name: $tabs-border-bottom-color
|
||||
value: $border
|
||||
- name: $tabs-border-bottom-style
|
||||
value: solid
|
||||
- name: $tabs-border-bottom-width
|
||||
value: 1px
|
||||
- name: $tabs-link-color
|
||||
value: $text
|
||||
- name: $tabs-link-hover-border-bottom-color
|
||||
value: $text-strong
|
||||
- name: $tabs-link-hover-color
|
||||
value: $text-strong
|
||||
- name: $tabs-link-active-border-bottom-color
|
||||
value: $primary
|
||||
- name: $tabs-link-active-color
|
||||
value: $primary
|
||||
- name: $tabs-link-padding
|
||||
value: 0.5em 1em
|
||||
- name: $tabs-boxed-link-radius
|
||||
value: $radius
|
||||
- name: $tabs-boxed-link-hover-background-color
|
||||
value: $background
|
||||
- name: $tabs-boxed-link-hover-border-bottom-color
|
||||
value: $border
|
||||
- name: $tabs-boxed-link-active-background-color
|
||||
value: $white
|
||||
- name: $tabs-boxed-link-active-border-color
|
||||
value: $border
|
||||
- name: $tabs-boxed-link-active-border-bottom-color
|
||||
value: transparent !important
|
||||
- name: $tabs-toggle-link-border-color
|
||||
value: $border
|
||||
- name: $tabs-toggle-link-border-style
|
||||
value: solid
|
||||
- name: $tabs-toggle-link-border-width
|
||||
value: 1px
|
||||
- name: $tabs-toggle-link-hover-background-color
|
||||
value: $background
|
||||
- name: $tabs-toggle-link-hover-border-color
|
||||
value: $border-hover
|
||||
- name: $tabs-toggle-link-radius
|
||||
value: $radius
|
||||
- name: $tabs-toggle-link-active-background-color
|
||||
value: $primary
|
||||
- name: $tabs-toggle-link-active-border-color
|
||||
value: $primary
|
||||
- name: $tabs-toggle-link-active-color
|
||||
value: $primary-invert
|
||||
---
|
||||
|
||||
{% include subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Tabs</h1>
|
||||
<h2 class="subtitle">Simple responsive horizontal navigation <strong>tabs</strong>, with different styles</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p><strong>Tabs</strong> only require a <code>tabs</code> container and a <code><ul></code> list.<br>
|
||||
The <strong>default</strong> tabs style has a single border at the bottom.</p>
|
||||
</div>
|
||||
|
||||
{% capture tabs_example %}
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
@@ -28,21 +63,7 @@ doc-subtab: tabs
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{tabs_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Alignment</h3>
|
||||
<div class="content">
|
||||
<p>
|
||||
To align the tabs list, use the <code>is-centered</code> or <code>is-right</code> modifier on the <code>.tabs</code> container:
|
||||
</p>
|
||||
</div>
|
||||
{% capture tabs_centered_example %}
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
@@ -53,12 +74,6 @@ doc-subtab: tabs
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_centered_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{tabs_centered_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
{% capture tabs_right_example %}
|
||||
<div class="tabs is-right">
|
||||
@@ -70,19 +85,6 @@ doc-subtab: tabs
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_right_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{tabs_right_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Icons</h3>
|
||||
<div class="content">
|
||||
<p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% capture tabs_icons_example %}
|
||||
<div class="tabs is-centered">
|
||||
@@ -114,19 +116,7 @@ doc-subtab: tabs
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_icons_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{tabs_icons_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Sizes</h3>
|
||||
<div class="content">
|
||||
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
|
||||
</div>
|
||||
{% capture tabs_small_example %}
|
||||
<div class="tabs is-small">
|
||||
<ul>
|
||||
@@ -137,12 +127,6 @@ doc-subtab: tabs
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_small_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{tabs_small_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
{% capture tabs_medium_example %}
|
||||
<div class="tabs is-medium">
|
||||
@@ -154,12 +138,6 @@ doc-subtab: tabs
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_medium_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{tabs_medium_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
{% capture tabs_large_example %}
|
||||
<div class="tabs is-large">
|
||||
@@ -171,19 +149,7 @@ doc-subtab: tabs
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_large_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{tabs_large_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Styles</h3>
|
||||
<div class="content">
|
||||
If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
|
||||
</div>
|
||||
{% capture tabs_boxed_example %}
|
||||
<div class="tabs is-boxed">
|
||||
<ul>
|
||||
@@ -214,16 +180,7 @@ doc-subtab: tabs
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_boxed_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{tabs_boxed_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<p class="content">
|
||||
If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
|
||||
</p>
|
||||
{% capture tabs_toggle_example %}
|
||||
<div class="tabs is-toggle">
|
||||
<ul>
|
||||
@@ -254,16 +211,7 @@ doc-subtab: tabs
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_toggle_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{tabs_toggle_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<p class="content">
|
||||
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
|
||||
</p>
|
||||
{% capture tabs_fullwidth_example %}
|
||||
<div class="tabs is-fullwidth">
|
||||
<ul>
|
||||
@@ -288,19 +236,7 @@ doc-subtab: tabs
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_fullwidth_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{tabs_fullwidth_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Combining</h3>
|
||||
<div class="content">
|
||||
<p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
|
||||
</div>
|
||||
{% capture tabs_centered_boxed_example %}
|
||||
<div class="tabs is-centered is-boxed">
|
||||
<ul>
|
||||
@@ -331,12 +267,6 @@ doc-subtab: tabs
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_centered_boxed_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{tabs_centered_boxed_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
{% capture tabs_toggle_fullwidth_example %}
|
||||
<div class="tabs is-toggle is-fullwidth">
|
||||
@@ -368,12 +298,6 @@ doc-subtab: tabs
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_toggle_fullwidth_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{tabs_toggle_fullwidth_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
{% capture tabs_centered_boxed_medium_example %}
|
||||
<div class="tabs is-centered is-boxed is-medium">
|
||||
@@ -405,12 +329,6 @@ doc-subtab: tabs
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_centered_boxed_medium_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{tabs_centered_boxed_medium_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
{% capture tabs_toggle_fullwidth_large_example %}
|
||||
<div class="tabs is-toggle is-fullwidth is-large">
|
||||
@@ -442,12 +360,146 @@ doc-subtab: tabs
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_toggle_fullwidth_large_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{tabs_toggle_fullwidth_large_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
{% include subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Tabs</h1>
|
||||
<h2 class="subtitle">Simple responsive horizontal navigation <strong>tabs</strong>, with different styles</h2>
|
||||
{%
|
||||
include meta.html
|
||||
since="0.4.4"
|
||||
colors=false
|
||||
sizes=true
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p><strong>Tabs</strong> only require a <code>tabs</code> container and a <code><ul></code> list.<br>
|
||||
The <strong>default</strong> tabs style has a single border at the bottom.</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
{{tabs_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_example}}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Alignment</h3>
|
||||
<div class="content">
|
||||
<p>
|
||||
To align the tabs list, use the <code>is-centered</code> or <code>is-right</code> modifier on the <code>.tabs</code> container:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
{{tabs_centered_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_centered_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
{{tabs_right_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_right_example}}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Icons</h3>
|
||||
<div class="content">
|
||||
<p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
{{tabs_icons_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_icons_example}}{% endhighlight %}
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="sizes" class="title" style="padding-top: 1.5rem;">
|
||||
Sizes
|
||||
</h3>
|
||||
<div class="content">
|
||||
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
{{tabs_small_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_small_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
{{tabs_medium_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_medium_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
{{tabs_large_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_large_example}}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Styles</h3>
|
||||
<div class="content">
|
||||
If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
{{tabs_boxed_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_boxed_example}}{% endhighlight %}
|
||||
|
||||
<p class="content">
|
||||
If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
|
||||
</p>
|
||||
|
||||
<div class="example">
|
||||
{{tabs_toggle_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_toggle_example}}{% endhighlight %}
|
||||
|
||||
<p class="content">
|
||||
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
|
||||
</p>
|
||||
|
||||
<div class="example">
|
||||
{{tabs_fullwidth_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_fullwidth_example}}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Combining</h3>
|
||||
<div class="content">
|
||||
<p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
{{tabs_centered_boxed_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_centered_boxed_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
{{tabs_toggle_fullwidth_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_toggle_fullwidth_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
{{tabs_centered_boxed_medium_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_centered_boxed_medium_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
{{tabs_toggle_fullwidth_large_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_toggle_fullwidth_large_example}}{% endhighlight %}
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user