mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Add meta to components
This commit is contained in:
Jeremy Thomas
parent
24bc5ed795
commit
28856f6388
@ -1,5 +1,13 @@
|
||||
<div class="field is-grouped">
|
||||
|
||||
{% if include.new %}
|
||||
<div class="control">
|
||||
<div class="tags">
|
||||
<span class="tag is-primary">New!</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.since %}
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
|
||||
@ -139,28 +139,17 @@ variables:
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<div class="columns" style="margin-bottom: -0.75rem !important;">
|
||||
<div class="column">
|
||||
<h1 class="title">Breadcrumb</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple <strong>breadcrumb</strong> component to improve your navigation experience
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
since="0.4.3"
|
||||
variables=true
|
||||
colors=false
|
||||
sizes=true
|
||||
%}
|
||||
</div>
|
||||
|
||||
<div class="column is-narrow">
|
||||
<p class="tags has-addons">
|
||||
<span class="tag is-success">New!</span>
|
||||
<span class="tag is-info">0.4.3</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="title">Breadcrumb</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple <strong>breadcrumb</strong> component to improve your navigation experience
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
since="0.4.3"
|
||||
variables=true
|
||||
colors=false
|
||||
sizes=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
@ -245,7 +234,7 @@ variables:
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="sizes" class="title">
|
||||
<h3 id="sizes" class="title" style="padding-top: 1.5rem;">
|
||||
Sizes
|
||||
</h3>
|
||||
|
||||
|
||||
@ -2,6 +2,31 @@
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: dropdown
|
||||
variables:
|
||||
- name: $dropdown-content-background-color
|
||||
value: $white
|
||||
- name: $dropdown-content-arrow
|
||||
value: $link
|
||||
- name: $dropdown-content-offset
|
||||
value: 4px
|
||||
- name: $dropdown-content-radius
|
||||
value: $radius
|
||||
- name: $dropdown-content-shadow
|
||||
value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
- name: $dropdown-content-z
|
||||
value: 20
|
||||
- name: $dropdown-item-color
|
||||
value: $grey-dark
|
||||
- name: $dropdown-item-hover-color
|
||||
value: $black
|
||||
- name: $dropdown-item-hover-background-color
|
||||
value: $background
|
||||
- name: $dropdown-item-active-color
|
||||
value: $primary-invert
|
||||
- name: $dropdown-item-active-background-color
|
||||
value: $primary
|
||||
- name: $dropdown-divider-background-color
|
||||
value: $border
|
||||
---
|
||||
|
||||
{% capture dropdown_example %}
|
||||
@ -172,21 +197,18 @@ doc-subtab: dropdown
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<div class="columns" style="margin-bottom: -0.75rem !important;">
|
||||
<div class="column">
|
||||
<h1 class="title">Dropdown</h1>
|
||||
<h2 class="subtitle">
|
||||
An interactive <strong>dropdown menu</strong> for discoverable content
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="column is-narrow">
|
||||
<p class="content">
|
||||
<span class="tag is-success">New!</span>
|
||||
<span class="tag is-info">0.4.4</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="title">Dropdown</h1>
|
||||
<h2 class="subtitle">
|
||||
An interactive <strong>dropdown menu</strong> for discoverable content
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
new=true
|
||||
since="0.4.4"
|
||||
colors=false
|
||||
sizes=false
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
@ -318,5 +340,8 @@ doc-subtab: dropdown
|
||||
{% highlight html %}{{dropdown_right_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -10,6 +10,12 @@ doc-subtab: level
|
||||
<div class="container">
|
||||
<h1 class="title">Level</h1>
|
||||
<h2 class="subtitle">A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=false
|
||||
sizes=false
|
||||
variables=false
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
@ -10,6 +10,12 @@ doc-subtab: media-object
|
||||
<div class="container">
|
||||
<h1 class="title">Media Object</h1>
|
||||
<h2 class="subtitle">The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=false
|
||||
sizes=false
|
||||
variables=false
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
@ -2,17 +2,25 @@
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: menu
|
||||
variables:
|
||||
- name: $menu-item-color
|
||||
value: $text
|
||||
- name: $menu-item-radius
|
||||
value: $radius-small
|
||||
- name: $menu-item-hover-color
|
||||
value: $text-strong
|
||||
- name: $menu-item-hover-background-color
|
||||
value: $background
|
||||
- name: $menu-item-active-color
|
||||
value: $link-invert
|
||||
- name: $menu-item-active-background-color
|
||||
value: $link
|
||||
- name: $menu-list-border-left
|
||||
value: 1px solid $border
|
||||
- name: $menu-label-color
|
||||
value: $text-light
|
||||
---
|
||||
|
||||
{% include subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Menu</h1>
|
||||
<h2 class="subtitle">A simple <strong>menu</strong>, for any type of vertical navigation</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
{% capture menu_example %}
|
||||
<aside class="menu">
|
||||
<p class="menu-label">
|
||||
@ -49,16 +57,32 @@ doc-subtab: menu
|
||||
</ul>
|
||||
</aside>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
{{menu_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{menu_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Menu</h1>
|
||||
<h2 class="subtitle">A simple <strong>menu</strong>, for any type of vertical navigation</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=false
|
||||
sizes=false
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
{{menu_example}}
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{menu_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -2,19 +2,33 @@
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: message
|
||||
variables:
|
||||
- name: $message-background-color
|
||||
value: $background
|
||||
- name: $message-radius
|
||||
value: $radius
|
||||
- name: $message-header-background-color
|
||||
value: $text
|
||||
- name: $message-header-color
|
||||
value: $text-invert
|
||||
- name: $message-header-padding
|
||||
value: 0.5em 0.75em
|
||||
- name: $message-header-radius
|
||||
value: $radius
|
||||
- name: $message-body-border
|
||||
value: 1px solid $border
|
||||
- name: $message-body-color
|
||||
value: $text
|
||||
- name: $message-body-padding
|
||||
value: 1em 1.25em
|
||||
- name: $message-body-radius
|
||||
value: $radius
|
||||
- name: $message-body-pre-background-color
|
||||
value: $white
|
||||
- name: $message-body-pre-code-background-color
|
||||
value: transparent
|
||||
---
|
||||
|
||||
{% include subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Messages</h1>
|
||||
<h2 class="subtitle">
|
||||
Colored <strong>message</strong> blocks, to emphasize part of your page
|
||||
</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
{% capture message_example %}
|
||||
<article class="message">
|
||||
<div class="message-header">
|
||||
@ -80,23 +94,7 @@ doc-subtab: message
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
{{message_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="subtitle">Message body only</h3>
|
||||
<div class="content">
|
||||
<p>You can <strong>omit</strong> the message header:</p>
|
||||
</div>
|
||||
{% capture message_body_example %}
|
||||
<article class="message">
|
||||
<div class="message-body">
|
||||
@ -134,16 +132,49 @@ doc-subtab: message
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_body_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
{{message_body_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Messages</h1>
|
||||
<h2 class="subtitle">
|
||||
Colored <strong>message</strong> blocks, to emphasize part of your page
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=true
|
||||
sizes=true
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{message_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="subtitle">Message body only</h3>
|
||||
<div class="content">
|
||||
<p>You can <strong>omit</strong> the message header:</p>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_body_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{message_body_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -2,14 +2,104 @@
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: modal
|
||||
variables:
|
||||
- name: $modal-z
|
||||
value: 20
|
||||
- name: $modal-background-background-color
|
||||
value: rgba($black, 0.86)
|
||||
- name: $modal-content-width
|
||||
value: 640px
|
||||
- name: $modal-content-margin-mobile
|
||||
value: 20px
|
||||
- name: $modal-content-spacing-mobile
|
||||
value: 160px
|
||||
- name: $modal-content-spacing-tablet
|
||||
value: 40px
|
||||
- name: $modal-close-dimensions
|
||||
value: 40px
|
||||
- name: $modal-close-right
|
||||
value: 20px
|
||||
- name: $modal-close-top
|
||||
value: 20px
|
||||
- name: $modal-card-spacing
|
||||
value: 40px
|
||||
- name: $modal-card-head-background-color
|
||||
value: $background
|
||||
- name: $modal-card-head-border-bottom
|
||||
value: 1px solid $border
|
||||
- name: $modal-card-head-padding
|
||||
value: 20px
|
||||
- name: $modal-card-head-radius
|
||||
value: $radius-large
|
||||
- name: $modal-card-title-color
|
||||
value: $text-strong
|
||||
- name: $modal-card-title-line-height
|
||||
value: 1
|
||||
- name: $modal-card-title-size
|
||||
value: $size-4
|
||||
- name: $modal-card-foot-radius
|
||||
value: $radius-large
|
||||
- name: $modal-card-foot-border-top
|
||||
value: 1px solid $border
|
||||
- name: $modal-card-body-background-color
|
||||
value: $white
|
||||
- name: $modal-card-body-padding
|
||||
value: 20px
|
||||
---
|
||||
|
||||
{% capture modal %}
|
||||
<div class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<!-- Any other Bulma elements you want -->
|
||||
</div>
|
||||
<button class="modal-close is-large"></button>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture image_modal %}
|
||||
<div class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<p class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png">
|
||||
</p>
|
||||
</div>
|
||||
<button class="modal-close is-large"></button>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture modal_card %}
|
||||
<div class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Modal title</p>
|
||||
<button class="delete"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<!-- Content ... -->
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<a class="button is-success">Save changes</a>
|
||||
<a class="button">Cancel</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Modal</h1>
|
||||
<h2 class="subtitle">A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=false
|
||||
sizes=false
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
@ -36,15 +126,7 @@ doc-subtab: modal
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<!-- Any other Bulma elements you want -->
|
||||
</div>
|
||||
<button class="modal-close is-large"></button>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
{% highlight html %}{{ modal }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>To <strong>activate</strong> the modal, just add the <code>is-active</code> modifier on the <code>.modal</code> container</p>
|
||||
@ -70,17 +152,7 @@ doc-subtab: modal
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<p class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png">
|
||||
</p>
|
||||
</div>
|
||||
<button class="modal-close is-large"></button>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
{% highlight html %}{{ image_modal }}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
@ -93,24 +165,9 @@ doc-subtab: modal
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Modal title</p>
|
||||
<button class="delete"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<!-- Content ... -->
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<a class="button is-success">Save changes</a>
|
||||
<a class="button">Cancel</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
{% highlight html %}{{ modal_card }}{% endhighlight %}
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -2,6 +2,61 @@
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: navbar
|
||||
variables:
|
||||
- name: $navbar-background-color
|
||||
value: $white
|
||||
- name: $navbar-height
|
||||
value: 3.25rem
|
||||
- name: $navbar-item-color
|
||||
value: $grey-dark
|
||||
- name: $navbar-item-hover-color
|
||||
value: $black
|
||||
- name: $navbar-item-hover-background-color
|
||||
value: $background
|
||||
- name: $navbar-item-active-color
|
||||
value: $black
|
||||
- name: $navbar-item-active-background-color
|
||||
value: transparent
|
||||
- name: $navbar-tab-hover-background-color
|
||||
value: transparent
|
||||
- name: $navbar-tab-hover-border-bottom-color
|
||||
value: $primary
|
||||
- name: $navbar-tab-active-color
|
||||
value: $primary
|
||||
- name: $navbar-tab-active-background-color
|
||||
value: transparent
|
||||
- name: $navbar-tab-active-border-bottom-color
|
||||
value: $primary
|
||||
- name: $navbar-tab-active-border-bottom-style
|
||||
value: solid
|
||||
- name: $navbar-tab-active-border-bottom-width
|
||||
value: 3px
|
||||
- name: $navbar-dropdown-background-color
|
||||
value: $white
|
||||
- name: $navbar-dropdown-border-top
|
||||
value: 1px solid $border
|
||||
- name: $navbar-dropdown-offset
|
||||
value: -4px
|
||||
- name: $navbar-dropdown-arrow
|
||||
value: $link
|
||||
- name: $navbar-dropdown-radius
|
||||
value: $radius-large
|
||||
- name: $navbar-dropdown-z
|
||||
value: 20
|
||||
- name: $navbar-dropdown-boxed-radius
|
||||
value: $radius-large
|
||||
- name: $navbar-dropdown-boxed-shadow
|
||||
value: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
- name: $navbar-dropdown-item-hover-color
|
||||
value: $black
|
||||
- name: $navbar-dropdown-item-hover-background-color
|
||||
value: $background
|
||||
- name: $navbar-dropdown-item-active-color
|
||||
value: $primary
|
||||
- name: $navbar-dropdown-item-active-background-color
|
||||
value: $background
|
||||
- name: $navbar-divider-background-color
|
||||
value: $border
|
||||
---
|
||||
|
||||
{% include subnav-components.html %}
|
||||
@ -382,22 +437,18 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<div class="columns" style="margin-bottom: -0.75rem !important;">
|
||||
<div class="column">
|
||||
<h1 class="title">Navbar</h1>
|
||||
<h2 class="subtitle">
|
||||
A responsive horizontal <strong>navbar</strong> that can supports images, links, buttons, and dropdowns
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="column is-narrow">
|
||||
<p class="content">
|
||||
<span class="tag is-success">New!</span>
|
||||
<span class="tag is-info">0.4.3</span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="title">Navbar</h1>
|
||||
<h2 class="subtitle">
|
||||
A responsive horizontal <strong>navbar</strong> that can supports images, links, buttons, and dropdowns
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
new=true
|
||||
since="0.4.3"
|
||||
colors=false
|
||||
sizes=false
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
@ -856,5 +907,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -2,42 +2,45 @@
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: pagination
|
||||
variables:
|
||||
- name: $pagination-color
|
||||
value: $grey-darker
|
||||
- name: $pagination-background
|
||||
value: $white
|
||||
- name: $pagination-border-color
|
||||
value: $grey-lighter
|
||||
- name: $pagination-margin
|
||||
value: -0.25rem
|
||||
- name: $pagination-hover-color
|
||||
value: $link-hover
|
||||
- name: $pagination-hover-border-color
|
||||
value: $link-hover-border
|
||||
- name: $pagination-focus-color
|
||||
value: $link-focus
|
||||
- name: $pagination-focus-border-color
|
||||
value: $link-focus-border
|
||||
- name: $pagination-active-color
|
||||
value: $link-active
|
||||
- name: $pagination-active-border-color
|
||||
value: $link-active-border
|
||||
- name: $pagination-disabled-color
|
||||
value: $grey
|
||||
- name: $pagination-disabled-background-color
|
||||
value: $grey-lighter
|
||||
- name: $pagination-disabled-border-color
|
||||
value: $grey-lighter
|
||||
- name: $pagination-current-color
|
||||
value: $link-invert
|
||||
- name: $pagination-current-background-color
|
||||
value: $link
|
||||
- name: $pagination-current-border-color
|
||||
value: $link
|
||||
- name: $pagination-ellipsis-color
|
||||
value: $grey-light
|
||||
- name: $pagination-shadow-inset
|
||||
value: inset 0 1px 2px rgba($black, 0
|
||||
---
|
||||
|
||||
{% include subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Pagination</h1>
|
||||
<h2 class="subtitle">A responsive, usable, and flexible <strong>pagination</strong></h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<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>
|
||||
|
||||
{% capture pagination_example %}
|
||||
<nav class="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
@ -67,18 +70,6 @@ doc-subtab: pagination
|
||||
</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">
|
||||
@ -97,18 +88,6 @@ doc-subtab: pagination
|
||||
</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">
|
||||
@ -125,12 +104,6 @@ doc-subtab: pagination
|
||||
</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">
|
||||
@ -147,20 +120,6 @@ doc-subtab: pagination
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{pagination_right_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{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">
|
||||
@ -178,10 +137,6 @@ doc-subtab: pagination
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="example">
|
||||
{{pagination_small_example}}
|
||||
</div>
|
||||
|
||||
{% capture pagination_medium_example %}
|
||||
<nav class="pagination is-medium">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
@ -198,10 +153,6 @@ doc-subtab: pagination
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="example">
|
||||
{{pagination_medium_example}}
|
||||
</div>
|
||||
|
||||
{% capture pagination_large_example %}
|
||||
<nav class="pagination is-large">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
@ -218,9 +169,106 @@ doc-subtab: pagination
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Pagination</h1>
|
||||
<h2 class="subtitle">A responsive, usable, and flexible <strong>pagination</strong></h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=false
|
||||
sizes=true
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="example">
|
||||
{{pagination_centered_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{pagination_centered_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
{{pagination_right_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{pagination_right_example}}{% endhighlight %}
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h2 id="sizes" class="title" style="padding-top: 1.5rem;">
|
||||
Sizes
|
||||
</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>
|
||||
|
||||
<div class="example">
|
||||
{{pagination_small_example}}
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
{{pagination_medium_example}}
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
{{pagination_large_example}}
|
||||
</div>
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -2,62 +2,66 @@
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: panel
|
||||
variables:
|
||||
- name: $panel-item-border
|
||||
value: 1px solid $border
|
||||
- name: $panel-heading-background-color
|
||||
value: $background
|
||||
- name: $panel-heading-color
|
||||
value: $text-strong
|
||||
- name: $panel-heading-line-height
|
||||
value: 1.25
|
||||
- name: $panel-heading-padding
|
||||
value: 0.5em 0.75em
|
||||
- name: $panel-heading-radius
|
||||
value: $radius
|
||||
- name: $panel-heading-size
|
||||
value: 1.25em
|
||||
- name: $panel-heading-weight
|
||||
value: $weight-light
|
||||
- name: $panel-tab-border-bottom
|
||||
value: 1px solid $border
|
||||
- name: $panel-tab-active-border-bottom-color
|
||||
value: $link-active-border
|
||||
- name: $panel-tab-active-color
|
||||
value: $link-active
|
||||
- name: $panel-list-item-color
|
||||
value: $text
|
||||
- name: $panel-list-item-hover-color
|
||||
value: $link
|
||||
- name: $panel-block-color
|
||||
value: $text-strong
|
||||
- name: $panel-block-hover-background-color
|
||||
value: $background
|
||||
- name: $panel-block-active-border-left-color
|
||||
value: $link
|
||||
- name: $panel-block-active-color
|
||||
value: $link-active
|
||||
- name: $panel-block-active-icon-color
|
||||
value: $link
|
||||
- name: $panel-icon-color
|
||||
value: $text-light
|
||||
---
|
||||
|
||||
{% include subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Panel</h1>
|
||||
<h2 class="subtitle">A composable <strong>panel</strong>, for compact controls</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>panel</code> is container for several types:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>panel-heading</code> as the first child
|
||||
</li>
|
||||
<li>
|
||||
<code>panel-tabs</code> for navigation
|
||||
</li>
|
||||
<li>
|
||||
<code>panel-block</code> which can contain other elements, like:
|
||||
<ul>
|
||||
<li><code>control</code></li>
|
||||
<li><code>input</code></li>
|
||||
<li><code>button</code></li>
|
||||
<li><code>panel-icon</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
The <code>panel-block</code> can be an anchor tag <code><a></code> or a label <code><label></code> with a checkbox inside.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% capture panel_example %}
|
||||
<nav class="panel">
|
||||
<p class="panel-heading">
|
||||
Repositories
|
||||
repositories
|
||||
</p>
|
||||
<div class="panel-block">
|
||||
<p class="control has-icons-left">
|
||||
<input class="input is-small" type="text" placeholder="Search">
|
||||
<input class="input is-small" type="text" placeholder="search">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<p class="panel-tabs">
|
||||
<a class="is-active">All</a>
|
||||
<a>Public</a>
|
||||
<a>Private</a>
|
||||
<a>Sources</a>
|
||||
<a>Forks</a>
|
||||
<a class="is-active">all</a>
|
||||
<a>public</a>
|
||||
<a>private</a>
|
||||
<a>sources</a>
|
||||
<a>forks</a>
|
||||
</p>
|
||||
<a class="panel-block is-active">
|
||||
<span class="panel-icon">
|
||||
@ -87,7 +91,7 @@ doc-subtab: panel
|
||||
<span class="panel-icon">
|
||||
<i class="fa fa-code-fork"></i>
|
||||
</span>
|
||||
daniellowtw/infBoard
|
||||
daniellowtw/infboard
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
@ -97,25 +101,67 @@ doc-subtab: panel
|
||||
</a>
|
||||
<label class="panel-block">
|
||||
<input type="checkbox">
|
||||
Remember me
|
||||
remember me
|
||||
</label>
|
||||
<div class="panel-block">
|
||||
<button class="button is-primary is-outlined is-fullwidth">
|
||||
Reset all filters
|
||||
reset all filters
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Panel</h1>
|
||||
<h2 class="subtitle">A composable <strong>panel</strong>, for compact controls</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=false
|
||||
sizes=false
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>panel</code> is container for several types:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>panel-heading</code> as the first child
|
||||
</li>
|
||||
<li>
|
||||
<code>panel-tabs</code> for navigation
|
||||
</li>
|
||||
<li>
|
||||
<code>panel-block</code> which can contain other elements, like:
|
||||
<ul>
|
||||
<li><code>control</code></li>
|
||||
<li><code>input</code></li>
|
||||
<li><code>button</code></li>
|
||||
<li><code>panel-icon</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
The <code>panel-block</code> can be an anchor tag <code><a></code> or a label <code><label></code> with a checkbox inside.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
{{panel_example}}
|
||||
{{panel_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{panel_example}}
|
||||
{% endhighlight %}
|
||||
{% highlight html %}{{panel_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user