mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Component links
This commit is contained in:
Jeremy Thomas
parent
0f9d338f66
commit
e75fd365e3
@ -43,9 +43,54 @@
|
||||
"button": {
|
||||
"name": "Button",
|
||||
"path": "/documentation/elements/button"
|
||||
},
|
||||
"components": {
|
||||
"name": "Components",
|
||||
"path": "/documentation/components"
|
||||
},
|
||||
"components-breadcrumb": {
|
||||
"name": "Breadcrumb",
|
||||
"path": "/documentation/components/breadcrumb"
|
||||
},
|
||||
"components-card": {
|
||||
"name": "Card",
|
||||
"path": "/documentation/components/card"
|
||||
},
|
||||
"components-dropdown": {
|
||||
"name": "Dropdown",
|
||||
"path": "/documentation/components/dropdown"
|
||||
},
|
||||
"components-menu": {
|
||||
"name": "Menu",
|
||||
"path": "/documentation/components/menu"
|
||||
},
|
||||
"components-message": {
|
||||
"name": "Message",
|
||||
"path": "/documentation/components/message"
|
||||
},
|
||||
"components-modal": {
|
||||
"name": "Modal",
|
||||
"path": "/documentation/components/modal"
|
||||
},
|
||||
"components-navbar": {
|
||||
"name": "Navbar",
|
||||
"path": "/documentation/components/navbar"
|
||||
},
|
||||
"components-pagination": {
|
||||
"name": "Pagination",
|
||||
"path": "/documentation/components/pagination"
|
||||
},
|
||||
"components-panel": {
|
||||
"name": "Panel",
|
||||
"path": "/documentation/components/panel"
|
||||
},
|
||||
"components-tabs": {
|
||||
"name": "Tabs",
|
||||
"path": "/documentation/components/tabs"
|
||||
}
|
||||
},
|
||||
"order": {
|
||||
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"]
|
||||
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
|
||||
"components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"]
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,21 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
subtitle: "A simple <strong>breadcrumb</strong> component to improve your navigation experience"
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: breadcrumb
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-breadcrumb
|
||||
meta:
|
||||
- since: "0.4.3"
|
||||
- variables: true
|
||||
- colors: false
|
||||
- sizes: true
|
||||
---
|
||||
|
||||
{% include subnav/subnav-components.html %}
|
||||
|
||||
{% capture breadcrumb_example %}
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
@ -156,77 +165,57 @@ doc-subtab: breadcrumb
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
<p>The <strong>breadcrumb</strong> component only requires a <code>.breadcrumb</code> container and a <code>ul</code> list.</p>
|
||||
<p>The dividers are automatically created in the content of the <code>::before</code> pseudo-element of <code>li</code> tags.</p>
|
||||
<p>You can inform the current page using the <code>is-active</code> modifier in a <code>li</code> tag. It will disable the navigation of inner links.</p>
|
||||
</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>
|
||||
{% include snippet.html content=breadcrumb_example horizontal=true clipped=true %}
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="Alignment" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <strong>breadcrumb</strong> component only requires a <code>.breadcrumb</code> container and a <code>ul</code> list.</p>
|
||||
<p>The dividers are automatically created in the content of the <code>::before</code> pseudo-element of <code>li</code> tags.</p>
|
||||
<p>You can inform the current page using the <code>is-active</code> modifier in a <code>li</code> tag. It will disable the navigation of inner links.</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>For alternative alignments, use the <code>is-centered</code> and <code>is-right</code> modifiers on the <code>.breadcrumb</code> container.</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
{% include snippet.html content=breadcrumb_example horizontal=true clipped=true %}
|
||||
{% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}
|
||||
|
||||
{% include anchor.html name="Alignment" %}
|
||||
{% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>For alternative alignments, use the <code>is-centered</code> and <code>is-right</code> modifiers on the <code>.breadcrumb</code> container.</p>
|
||||
</div>
|
||||
{% include anchor.html name="Icons" %}
|
||||
|
||||
{% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}
|
||||
<div class="content">
|
||||
<p>You can use any of the <a href="https://fontawesome.com/" target="_blank">Font Awesome</a> <strong>icons</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %}
|
||||
{% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
|
||||
|
||||
{% include anchor.html name="Icons" %}
|
||||
{% include anchor.html name="Alternative separators" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can use any of the <a href="https://fontawesome.com/" target="_blank">Font Awesome</a> <strong>icons</strong>.</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>You can choose between <strong>4 additional separators</strong>: <code>has-arrow-separator</code> <code>has-bullet-separator</code> <code>has-dot-separator</code> and <code>has-succeeds-separator</code>.</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
|
||||
{% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
|
||||
|
||||
{% include anchor.html name="Alternative separators" %}
|
||||
{% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can choose between <strong>4 additional separators</strong>: <code>has-arrow-separator</code> <code>has-bullet-separator</code> <code>has-dot-separator</code> and <code>has-succeeds-separator</code>.</p>
|
||||
</div>
|
||||
{% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
|
||||
|
||||
{% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
|
||||
{% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
|
||||
|
||||
{% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
{% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
|
||||
<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>
|
||||
|
||||
{% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
|
||||
{% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
{% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
|
||||
|
||||
<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>
|
||||
{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
|
||||
|
||||
{% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %}
|
||||
|
||||
{% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
|
||||
|
||||
{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
@ -1,8 +1,18 @@
|
||||
---
|
||||
title: Card
|
||||
subtile: "An all-around flexible and composable component"
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: card
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-card
|
||||
meta:
|
||||
- variables: true
|
||||
- colors: false
|
||||
- sizes: false
|
||||
---
|
||||
|
||||
{% capture card_example %}
|
||||
@ -89,102 +99,84 @@ doc-subtab: card
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Card</h1>
|
||||
<h2 class="subtitle">An all-around flexible and composable component</h2>
|
||||
{%
|
||||
include meta.html
|
||||
variables=true
|
||||
colors=false
|
||||
sizes=false
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>The <strong>card</strong> component comprises several elements that you can mix and match:</p>
|
||||
<div class="content">
|
||||
<p>The <strong>card</strong> component comprises several elements that you can mix and match:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>card</code>: the main container
|
||||
<ul>
|
||||
<li>
|
||||
<code>card</code>: the main container
|
||||
<code>card-header</code>: a horizontal bar with a shadow
|
||||
<ul>
|
||||
<li>
|
||||
<code>card-header</code>: a horizontal bar with a shadow
|
||||
<ul>
|
||||
<li>
|
||||
<code>card-header-title</code>: a left-aligned bold text
|
||||
</li>
|
||||
<li>
|
||||
<code>card-header-icon</code>: a placeholder for an icon
|
||||
</li>
|
||||
</ul>
|
||||
<code>card-header-title</code>: a left-aligned bold text
|
||||
</li>
|
||||
<li>
|
||||
<code>card-image</code>: a fullwidth container for a responsive image
|
||||
<code>card-header-icon</code>: a placeholder for an icon
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<code>card-image</code>: a fullwidth container for a responsive image
|
||||
</li>
|
||||
<li>
|
||||
<code>card-content</code>: a multi-purpose container for <em>any</em> other element
|
||||
</li>
|
||||
<li>
|
||||
<code>card-footer</code>: a horizontal list of controls
|
||||
<ul>
|
||||
<li>
|
||||
<code>card-content</code>: a multi-purpose container for <em>any</em> other element
|
||||
</li>
|
||||
<li>
|
||||
<code>card-footer</code>: a horizontal list of controls
|
||||
<ul>
|
||||
<li>
|
||||
<code>card-footer-item</code>: a repeatable list item
|
||||
</li>
|
||||
</ul>
|
||||
<code>card-footer-item</code>: a repeatable list item
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">New</span>
|
||||
<span class="tag is-info">0.5.3</span>
|
||||
</div>
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">New</span>
|
||||
<span class="tag is-info">0.5.3</span>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_example}}
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{card_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_header_example}}
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{card_header_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_title_example}}
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{card_title_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_example}}
|
||||
</div>
|
||||
</section>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{card_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_header_example}}
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{card_header_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_title_example}}
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{card_title_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
@ -1,8 +1,18 @@
|
||||
---
|
||||
title: Dropdown
|
||||
subtitle: "An interactive <strong>dropdown menu</strong> for discoverable content"
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: dropdown
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-dropdown
|
||||
meta:
|
||||
- colors: false
|
||||
- sizes: false
|
||||
- variables: true
|
||||
---
|
||||
|
||||
{% capture dropdown_example %}
|
||||
@ -188,161 +198,138 @@ doc-subtab: dropdown
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<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>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>dropdown</code> component is a container for a dropdown button and a dropdown menu.
|
||||
</p>
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>dropdown</code> component is a container for a dropdown button and a dropdown menu.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>dropdown</code> the <strong>main</strong> container
|
||||
<ul>
|
||||
<li>
|
||||
<code>dropdown</code> the <strong>main</strong> container
|
||||
<code>dropdown-trigger</code> the container for a <code>button</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>dropdown-menu</code> the toggable menu, <strong>hidden</strong> by default
|
||||
<ul>
|
||||
<li>
|
||||
<code>dropdown-trigger</code> the container for a <code>button</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>dropdown-menu</code> the toggable menu, <strong>hidden</strong> by default
|
||||
<code>dropdown-content</code> the dropdown <strong>box</strong>, with a white background and a shadow
|
||||
<ul>
|
||||
<li>
|
||||
<code>dropdown-content</code> the dropdown <strong>box</strong>, with a white background and a shadow
|
||||
<ul>
|
||||
<li>
|
||||
<code>dropdown-item</code> each <strong>single item</strong> of the dropdown, which can either be a <code>a</code> or a <code>div</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>dropdown-divider</code> a <strong>horizontal line</strong> to separate dropdown items
|
||||
</li>
|
||||
</ul>
|
||||
<code>dropdown-item</code> each <strong>single item</strong> of the dropdown, which can either be a <code>a</code> or a <code>div</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>dropdown-divider</code> a <strong>horizontal line</strong> to separate dropdown items
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{dropdown_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
{% highlight html %}{{dropdown_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{dropdown_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
{% highlight html %}{{dropdown_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Dropdown content" %}
|
||||
{% include anchor.html name="Dropdown content" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
While the <code>dropdown-item</code> can be used as an anchor link <code><a></code>, you can also use a <code><div></code> and insert almost <strong>any type of content</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
While the <code>dropdown-item</code> can be used as an anchor link <code><a></code>, you can also use a <code><div></code> and insert almost <strong>any type of content</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{dropdown_content_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_content_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{dropdown_content_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_content_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Hoverable or Toggable" %}
|
||||
{% include anchor.html name="Hoverable or Toggable" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>dropdown</code> component has <strong>2 additional modifiers</strong>
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-hoverable</code>: the dropdown will show up when <strong>hovering</strong> the <code>dropdown-trigger</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-active</code>: the dropdown will show up <strong>all the time</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>dropdown</code> component has <strong>2 additional modifiers</strong>
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-hoverable</code>: the dropdown will show up when <strong>hovering</strong> the <code>dropdown-trigger</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-active</code>: the dropdown will show up <strong>all the time</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="message is-success">
|
||||
<p class="message-body">
|
||||
While the CSS <code>:hover</code> implementation works perfectly, the <code>is-active</code> class is available for users who want to control the display of the dropdown with <strong>JavaScript</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="message is-success">
|
||||
<p class="message-body">
|
||||
While the CSS <code>:hover</code> implementation works perfectly, the <code>is-active</code> class is available for users who want to control the display of the dropdown with <strong>JavaScript</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{dropdown_click_example}}{{dropdown_info_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{dropdown_click_example}}{{dropdown_info_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Right aligned" %}
|
||||
{% include anchor.html name="Right aligned" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add the <code>is-right</code> modifier to have a <strong>right-aligned</strong> dropdown.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add the <code>is-right</code> modifier to have a <strong>right-aligned</strong> dropdown.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
{{dropdown_left_example}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
{{dropdown_right_example}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
{{dropdown_left_example}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_right_example}}{% endhighlight %}
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
{{dropdown_right_example}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Dropup" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{ dropdown_up_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_up_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_right_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Dropup" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{ dropdown_up_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_up_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
@ -1,8 +1,18 @@
|
||||
---
|
||||
title: Menu
|
||||
subtitle: "A simple <strong>menu</strong>, for any type of vertical navigation"
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: menu
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-menu
|
||||
meta:
|
||||
- colors: false
|
||||
- sizes: false
|
||||
- variables: true
|
||||
---
|
||||
|
||||
{% capture menu_example %}
|
||||
@ -42,24 +52,6 @@ doc-subtab: menu
|
||||
</aside>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-components.html %}
|
||||
{% include snippet.html content=menu_example size="one-third" %}
|
||||
|
||||
<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>
|
||||
|
||||
{% include snippet.html content=menu_example size="one-third" %}
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
@ -1,8 +1,18 @@
|
||||
---
|
||||
title: Message
|
||||
subtitle: "Colored <strong>message</strong> blocks, to emphasize part of your page"
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: message
|
||||
meta:
|
||||
- colors: true
|
||||
- sizes: true
|
||||
- variables: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-message
|
||||
---
|
||||
|
||||
{% capture message_example %}
|
||||
@ -108,48 +118,28 @@ doc-subtab: message
|
||||
{% endfor %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-components.html %}
|
||||
{% include snippet.html content=message_example %}
|
||||
|
||||
<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
|
||||
%}
|
||||
{% include anchor.html name="Colors" %}
|
||||
|
||||
<hr>
|
||||
{% include snippet.html content=message_colors_example %}
|
||||
|
||||
{% include snippet.html content=message_example %}
|
||||
{% include anchor.html name="Message body only" %}
|
||||
|
||||
{% include anchor.html name="Colors" %}
|
||||
<div class="content">
|
||||
<p>You can <strong>omit</strong> the message header:</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=message_colors_example %}
|
||||
{% include snippet.html content=message_body_example %}
|
||||
|
||||
{% include anchor.html name="Message body only" %}
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can <strong>omit</strong> the message header:</p>
|
||||
</div>
|
||||
{% include snippet.html content=message_small %}
|
||||
|
||||
{% include snippet.html content=message_body_example %}
|
||||
{% include snippet.html content=message_normal %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
{% include snippet.html content=message_medium %}
|
||||
|
||||
{% include snippet.html content=message_small %}
|
||||
{% include snippet.html content=message_large %}
|
||||
|
||||
{% include snippet.html content=message_normal %}
|
||||
|
||||
{% include snippet.html content=message_medium %}
|
||||
|
||||
{% include snippet.html content=message_large %}
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
@ -1,8 +1,18 @@
|
||||
---
|
||||
title: Modal
|
||||
subtitle: "A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want"
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: modal
|
||||
meta:
|
||||
- colors: false
|
||||
- sizes: false
|
||||
- variables: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-modal
|
||||
---
|
||||
|
||||
{% capture modal %}
|
||||
@ -46,91 +56,73 @@ doc-subtab: modal
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/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>
|
||||
|
||||
<div class="content">
|
||||
<p>The modal structure is very simple:</p>
|
||||
<div class="content">
|
||||
<p>The modal structure is very simple:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>modal</code>: the main container
|
||||
<ul>
|
||||
<li>
|
||||
<code>modal</code>: the main container
|
||||
<ul>
|
||||
<li>
|
||||
<code>modal-background</code>: a transparent overlay that can act as a click target to close the modal
|
||||
</li>
|
||||
<li>
|
||||
<code>modal-content</code>: a horizontally and vertically centered container, with a maximum width of 640px, in which you can include <em>any</em> content
|
||||
</li>
|
||||
<li>
|
||||
<code>modal-close</code>: a simple cross located in the top right corner
|
||||
</li>
|
||||
</ul>
|
||||
<code>modal-background</code>: a transparent overlay that can act as a click target to close the modal
|
||||
</li>
|
||||
<li>
|
||||
<code>modal-content</code>: a horizontally and vertically centered container, with a maximum width of 640px, in which you can include <em>any</em> content
|
||||
</li>
|
||||
<li>
|
||||
<code>modal-close</code>: a simple cross located in the top right corner
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<button class="button is-primary is-large modal-button" data-target="modal" aria-haspopup="true">Launch example modal</button>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<button class="button is-primary is-large modal-button" data-target="modal" aria-haspopup="true">Launch example modal</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ modal }}{% 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>
|
||||
</div>
|
||||
|
||||
<div class="message is-danger">
|
||||
<div class="message-header">
|
||||
No JavaScript
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Bulma does <strong>not</strong> include any JavaScript interaction. You will have to implement the class toggle yourself.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Image modal</h3>
|
||||
|
||||
<div class="content">
|
||||
<p>Because a modal can contain <strong>anything you want</strong>, you can very simply use it to build an image gallery for example:</p>
|
||||
<p>
|
||||
<a class="button is-primary is-large modal-button" data-target="modal-bis">Launch image modal</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ image_modal }}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Modal card</h3>
|
||||
|
||||
<div class="content">
|
||||
<p>If you want a more classic modal, with a <strong>head</strong>, a <strong>body</strong> and a <strong>foot</strong>, use the <code>modal-card</code>.</p>
|
||||
<p>
|
||||
<button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch card modal</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ modal_card }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="message is-danger">
|
||||
<div class="message-header">
|
||||
No JavaScript
|
||||
</div>
|
||||
</section>
|
||||
<div class="message-body">
|
||||
Bulma does <strong>not</strong> include any JavaScript interaction. You will have to implement the class toggle yourself.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Image modal</h3>
|
||||
|
||||
<div class="content">
|
||||
<p>Because a modal can contain <strong>anything you want</strong>, you can very simply use it to build an image gallery for example:</p>
|
||||
<p>
|
||||
<a class="button is-primary is-large modal-button" data-target="modal-bis">Launch image modal</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ image_modal }}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Modal card</h3>
|
||||
|
||||
<div class="content">
|
||||
<p>If you want a more classic modal, with a <strong>head</strong>, a <strong>body</strong> and a <strong>foot</strong>, use the <code>modal-card</code>.</p>
|
||||
<p>
|
||||
<button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch card modal</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ modal_card }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
<div id="modal" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,8 +1,18 @@
|
||||
---
|
||||
title: Pagination
|
||||
subtitle: "A responsive, usable, and flexible <strong>pagination</strong>"
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: pagination
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-pagination
|
||||
meta:
|
||||
- colors: false
|
||||
- sizes: true
|
||||
- variables: true
|
||||
---
|
||||
|
||||
{% capture pagination_example %}
|
||||
@ -149,90 +159,72 @@ doc-subtab: pagination
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/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>
|
||||
<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-previous</code> and <code>pagination-next</code> for incremental navigation
|
||||
<code>pagination-link</code> for the page numbers
|
||||
</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>
|
||||
<code>pagination-ellipsis</code> for range separators
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
All elements are optional so you can compose your pagination as you wish.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
All elements are optional so you can compose your pagination as you wish.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=pagination_example horizontal=true more=true %}
|
||||
{% include snippet.html content=pagination_example horizontal=true more=true %}
|
||||
|
||||
<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="content">
|
||||
<p>
|
||||
You can disable some links if they are not active, or change the amount of page numbers available.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=pagination_options_example horizontal=true more=true %}
|
||||
{% include snippet.html content=pagination_options_example horizontal=true more=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
By default on <strong>tablet</strong>, 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="content">
|
||||
<p>
|
||||
By default on <strong>tablet</strong>, 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>
|
||||
|
||||
{% include snippet.html content=pagination_centered_example horizontal=true more=true %}
|
||||
{% include snippet.html content=pagination_centered_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=pagination_right_example horizontal=true more=true %}
|
||||
{% include snippet.html content=pagination_right_example horizontal=true more=true %}
|
||||
|
||||
{% include anchor.html name="Styles" %}
|
||||
{% include anchor.html name="Styles" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.6.2" %}
|
||||
{% include elements/new-tag.html version="0.6.2" %}
|
||||
|
||||
<p class="content">
|
||||
Add the <code>is-rounded</code> modifier to have rounded pagination items.
|
||||
</p>
|
||||
<p class="content">
|
||||
Add the <code>is-rounded</code> modifier to have rounded pagination items.
|
||||
</p>
|
||||
|
||||
{% include snippet.html content=pagination_rounded_example horizontal=true more=true %}
|
||||
{% include snippet.html content=pagination_rounded_example horizontal=true more=true %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{% include snippet.html content=pagination_small_example horizontal=true more=true %}
|
||||
{% include snippet.html content=pagination_small_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=pagination_medium_example horizontal=true more=true %}
|
||||
{% include snippet.html content=pagination_medium_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=pagination_large_example horizontal=true more=true %}
|
||||
{% include snippet.html content=pagination_large_example horizontal=true more=true %}
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
@ -1,8 +1,18 @@
|
||||
---
|
||||
title: Panel
|
||||
subtitle: "A composable <strong>panel</strong>, for compact controls"
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: panel
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-panel
|
||||
meta:
|
||||
- colors: false
|
||||
- sizes: false
|
||||
- variables: true
|
||||
---
|
||||
|
||||
{% capture panel_example %}
|
||||
@ -73,50 +83,32 @@ doc-subtab: panel
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/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>
|
||||
<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>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>
|
||||
<li><code>control</code></li>
|
||||
<li><code>input</code></li>
|
||||
<li><code>button</code></li>
|
||||
<li><code>panel-icon</code></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>
|
||||
</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>
|
||||
|
||||
{% include snippet.html content=panel_example size="one-third" %}
|
||||
{% include snippet.html content=panel_example size="one-third" %}
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
@ -1,8 +1,18 @@
|
||||
---
|
||||
title: Tabs
|
||||
subtitle: "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles"
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: tabs
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-tabs
|
||||
meta:
|
||||
- colors: false
|
||||
- sizes: true
|
||||
- variables: true
|
||||
---
|
||||
|
||||
{% capture tabs_example %}
|
||||
@ -344,107 +354,88 @@ doc-subtab: tabs
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-components.html %}
|
||||
<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>
|
||||
|
||||
<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
|
||||
%}
|
||||
{% include snippet.html content=tabs_example horizontal=true %}
|
||||
|
||||
<hr>
|
||||
{% include snippet.html content=tabs_example horizontal=true more=true %}
|
||||
|
||||
<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>
|
||||
{% include anchor.html name="Alignment" %}
|
||||
|
||||
{% include snippet.html content=tabs_example horizontal=true %}
|
||||
<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>
|
||||
|
||||
{% include snippet.html content=tabs_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_centered_example horizontal=true more=true %}
|
||||
|
||||
{% include anchor.html name="Alignment" %}
|
||||
{% include snippet.html content=tabs_right_example horizontal=true more=true %}
|
||||
|
||||
<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>
|
||||
{% include anchor.html name="Icons" %}
|
||||
|
||||
{% include snippet.html content=tabs_centered_example horizontal=true more=true %}
|
||||
<div class="content">
|
||||
<p>You can use any of the <a href="http://fontawesome.io/">Font Awesome</a> <strong>icons</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=tabs_right_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
|
||||
|
||||
{% include anchor.html name="Icons" %}
|
||||
{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can use any of the <a href="http://fontawesome.io/">Font Awesome</a> <strong>icons</strong>.</p>
|
||||
</div>
|
||||
{% include anchor.html name="Sizes" %}
|
||||
<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>
|
||||
|
||||
{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_small_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_medium_example horizontal=true more=true %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
<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>
|
||||
{% include snippet.html content=tabs_large_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=tabs_small_example horizontal=true more=true %}
|
||||
{% include anchor.html name="Styles" %}
|
||||
|
||||
{% include snippet.html content=tabs_medium_example horizontal=true more=true %}
|
||||
<div class="content">
|
||||
If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=tabs_large_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_boxed_example horizontal=true more=true %}
|
||||
|
||||
{% include anchor.html name="Styles" %}
|
||||
<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="content">
|
||||
If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
|
||||
</div>
|
||||
{% include snippet.html content=tabs_toggle_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=tabs_boxed_example horizontal=true more=true %}
|
||||
{% include elements/new-tag.html version="0.6.2" %}
|
||||
|
||||
<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>
|
||||
<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_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/new-tag.html version="0.6.2" %}
|
||||
<p class="content">
|
||||
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
|
||||
</p>
|
||||
|
||||
<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_fullwidth_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
|
||||
{% include anchor.html name="Combining" %}
|
||||
|
||||
<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="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>
|
||||
|
||||
{% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
|
||||
|
||||
{% include anchor.html name="Combining" %}
|
||||
{% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
|
||||
|
||||
<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>
|
||||
{% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user