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">
|
||||
|
||||
<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>
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
|
||||
<hr>
|
||||
{% include snippet.html content=breadcrumb_example horizontal=true clipped=true %}
|
||||
<hr>
|
||||
{% include snippet.html content=breadcrumb_example horizontal=true clipped=true %}
|
||||
|
||||
{% include anchor.html name="Alignment" %}
|
||||
{% include anchor.html name="Alignment" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}
|
||||
{% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}
|
||||
|
||||
{% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %}
|
||||
{% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %}
|
||||
|
||||
{% include anchor.html name="Icons" %}
|
||||
{% include anchor.html name="Icons" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
|
||||
{% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
|
||||
{% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
|
||||
|
||||
{% include anchor.html name="Alternative separators" %}
|
||||
{% include anchor.html name="Alternative separators" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
|
||||
{% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
|
||||
|
||||
{% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
|
||||
{% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
|
||||
|
||||
{% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
|
||||
{% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
|
||||
|
||||
{% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
|
||||
{% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
|
||||
{% include snippet.html content=breadcrumb_small_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_medium_example horizontal=true clipped=true %}
|
||||
|
||||
{% include snippet.html content=breadcrumb_large_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,22 +99,7 @@ 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">
|
||||
<div class="content">
|
||||
<p>The <strong>card</strong> component comprises several elements that you can mix and match:</p>
|
||||
<ul>
|
||||
<li>
|
||||
@ -138,53 +133,50 @@ doc-subtab: card
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tags has-addons">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">New</span>
|
||||
<span class="tag is-info">0.5.3</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_example}}
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{card_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% 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,27 +198,7 @@ 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">
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>dropdown</code> component is a container for a dropdown button and a dropdown menu.
|
||||
</p>
|
||||
@ -238,37 +228,37 @@ doc-subtab: dropdown
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<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>
|
||||
|
||||
{% include anchor.html name="Dropdown content" %}
|
||||
{% include anchor.html name="Dropdown content" %}
|
||||
|
||||
<div class="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>
|
||||
|
||||
<div class="columns">
|
||||
<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>
|
||||
|
||||
{% include anchor.html name="Hoverable or Toggable" %}
|
||||
{% include anchor.html name="Hoverable or Toggable" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>dropdown</code> component has <strong>2 additional modifiers</strong>
|
||||
</p>
|
||||
@ -280,32 +270,32 @@ doc-subtab: dropdown
|
||||
<code>is-active</code>: the dropdown will show up <strong>all the time</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message is-success">
|
||||
<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>
|
||||
|
||||
<div class="columns">
|
||||
<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>
|
||||
|
||||
{% include anchor.html name="Right aligned" %}
|
||||
{% include anchor.html name="Right aligned" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add the <code>is-right</code> modifier to have a <strong>right-aligned</strong> dropdown.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
@ -323,26 +313,23 @@ doc-subtab: dropdown
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_right_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Dropup" %}
|
||||
{% include anchor.html name="Dropup" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
|
||||
<div class="columns">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% 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" %}
|
||||
|
||||
{% include snippet.html content=message_colors_example %}
|
||||
|
||||
{% include anchor.html name="Message body only" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>You can <strong>omit</strong> the message header:</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=message_body_example %}
|
||||
{% include snippet.html content=message_body_example %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
{% include snippet.html content=message_small %}
|
||||
{% include snippet.html content=message_small %}
|
||||
|
||||
{% include snippet.html content=message_normal %}
|
||||
{% include snippet.html content=message_normal %}
|
||||
|
||||
{% include snippet.html content=message_medium %}
|
||||
{% include snippet.html content=message_medium %}
|
||||
|
||||
{% include snippet.html content=message_large %}
|
||||
{% 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,22 +56,7 @@ 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">
|
||||
<div class="content">
|
||||
<p>The modal structure is very simple:</p>
|
||||
<ul>
|
||||
<li>
|
||||
@ -82,55 +77,52 @@ doc-subtab: modal
|
||||
<p>
|
||||
<button class="button is-primary is-large modal-button" data-target="modal" aria-haspopup="true">Launch example modal</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ modal }}{% endhighlight %}
|
||||
{% highlight html %}{{ modal }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
|
||||
<div class="message is-danger">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Image modal</h3>
|
||||
<h3 class="title">Image modal</h3>
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ image_modal }}{% endhighlight %}
|
||||
{% highlight html %}{{ image_modal }}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Modal card</h3>
|
||||
<h3 class="title">Modal card</h3>
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
|
||||
<div class="highlight-full">
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ modal_card }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
<div id="modal" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
|
||||
@ -1,12 +1,20 @@
|
||||
---
|
||||
title: Navbar
|
||||
subtitle: "A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns"
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: navbar
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-navbar
|
||||
meta:
|
||||
- colors: true
|
||||
- sizes: false
|
||||
- variables: true
|
||||
---
|
||||
|
||||
{% include subnav/subnav-components.html %}
|
||||
|
||||
{% capture navbar_example %}
|
||||
{% include examples/navbar.html id="Default" %}
|
||||
{% endcapture %}
|
||||
@ -523,31 +531,13 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<h1 class="title">Navbar</h1>
|
||||
<h2 class="subtitle">
|
||||
A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
new=true
|
||||
since="0.4.3"
|
||||
colors=true
|
||||
sizes=false
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="message is-success">
|
||||
<div class="message is-success">
|
||||
<div class="message-body">
|
||||
<p>The new <code>navbar</code> replaces the deprecated <code>nav</code> component, whose documentation you can still access temporarily <a href="{{ site.url }}/documentation/components/nav/">here</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>navbar</code> component is a responsive and versatile horizontal navigation bar with the following structure:
|
||||
</p>
|
||||
@ -595,11 +585,11 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Navbar brand" %}
|
||||
{% include anchor.html name="Navbar brand" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>navbar-brand</code> is the left side of the navbar. It can contain:
|
||||
</p>
|
||||
@ -611,79 +601,79 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
the <code>navbar-burger</code> as last child
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{navbar_brand_example}}{% endhighlight %}
|
||||
{% highlight html %}{{navbar_brand_example}}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
The navbar brand is <strong>always visible</strong>: on both touch devices {% include bp/touch.html %} and desktop {% include bp/desktop.html %}. As a result, it is recommended to only use a few navbar items to avoid <strong>overflowing</strong> horizontally on small devices.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{navbar_brand_items_example}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}
|
||||
{% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Navbar burger" %}
|
||||
{% include anchor.html name="Navbar burger" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>navbar-burger</code> is a hamburger menu that only appears on <strong>mobile</strong>. It has to appear as the last child of <code>navbar-brand</code>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example is-paddingless">
|
||||
<div class="example is-paddingless">
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" style="display: flex;">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
|
||||
{% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add the modifier class <code>is-active</code> to turn it into a cross.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example is-paddingless">
|
||||
<div class="example is-paddingless">
|
||||
<a role="button" class="navbar-burger is-active" aria-label="menu" aria-expanded="false" style="display: flex;">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Navbar menu" %}
|
||||
{% include anchor.html name="Navbar menu" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>navbar-menu</code> is the <strong>counterpart</strong> of the navbar brand. As such, it must appear as a direct child of <code>navbar</code>, as a sibling of <code>navbar-brand</code>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{navbar_menu_example}}{% endhighlight %}
|
||||
{% highlight html %}{{navbar_menu_example}}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>navbar-menu</code> is <strong>hidden on touch devices</strong> {% include bp/touch.html %}. You need to add the modifier class <code>is-active</code> to display it.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{navbar_menu_active_example}}{% endhighlight %}
|
||||
{% highlight html %}{{navbar_menu_active_example}}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
On desktop {% include bp/desktop.html %}, the <code>navbar-menu</code> will <strong>fill up the space</strong> available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:
|
||||
</p>
|
||||
@ -695,11 +685,11 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
<code>navbar-end</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<hr>
|
||||
|
||||
<div id="navbarJsExample" class="message is-info">
|
||||
<div id="navbarJsExample" class="message is-info">
|
||||
<h4 class="message-header">Javascript toggle</h4>
|
||||
<div class="message-body">
|
||||
<div class="content">
|
||||
@ -714,11 +704,11 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
{% highlight javascript %}{{ navbar_js_code }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Navbar start and navbar end" %}
|
||||
{% include anchor.html name="Navbar start and navbar end" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>navbar-start</code> and <code>navbar-end</code> are the two direct and only children of the <code>navbar-menu</code>.
|
||||
</p>
|
||||
@ -736,13 +726,13 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
<p>
|
||||
Each of them can contain any number of <code>navbar-item</code>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
|
||||
{% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
|
||||
|
||||
{% include anchor.html name="Navbar item" %}
|
||||
{% include anchor.html name="Navbar item" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
A <code>navbar-item</code> is a repeatable element that can be:
|
||||
</p>
|
||||
@ -793,23 +783,23 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
<p>
|
||||
You can add the modifier class <code>is-expanded</code> to turn it into a full-width element.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Transparent navbar" %}
|
||||
{% include anchor.html name="Transparent navbar" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
To seamlessly integrate the navbar in any visual context, you can add the <code>is-transparent</code> modifier on the <code>navbar</code> component. This will remove any hover or active background from the navbar items.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
|
||||
{% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
|
||||
|
||||
{% include anchor.html name="Fixed navbar" %}
|
||||
{% include anchor.html name="Fixed navbar" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.6.1" %}
|
||||
{% include elements/new-tag.html version="0.6.1" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can now <strong>fix</strong> the navbar to either the <strong>top</strong> or <strong>bottom</strong> of the page. This is a 2-step process:
|
||||
</p>
|
||||
@ -823,19 +813,19 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
{% highlight html %}<html class="has-navbar-fixed-top">{% endhighlight %}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="title is-5">Try it out!</h4>
|
||||
<h4 class="title is-5">Try it out!</h4>
|
||||
|
||||
<div id="navbarToggles" class="buttons">
|
||||
<div id="navbarToggles" class="buttons">
|
||||
<a id="navbarFixBottom" class="button is-link">
|
||||
<span><span id="navbarFixBottomText">Show</span> <strong>bottom</strong> navbar</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Dropdown menu" %}
|
||||
{% include anchor.html name="Dropdown menu" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
To create a <strong>dropdown menu</strong>, you will need <strong>4</strong> elements:
|
||||
</p>
|
||||
@ -850,9 +840,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
<code>navbar-dropdown</code> which can contain instances of <code>navbar-item</code> and <code>navbar-divider</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_dropdown_example }}
|
||||
@ -862,13 +852,13 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
<div class="column">
|
||||
{% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="title is-4">
|
||||
<h4 class="title is-4">
|
||||
Show/hide the dropdown with either <strong>CSS</strong> or <strong>JavaScript</strong>
|
||||
</h4>
|
||||
</h4>
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>navbar-dropdown</code> is visible on touch devices {% include bp/touch.html %} but hidden on desktop {% include bp/desktop.html %}. <em>How</em> the dropdown is displayed on desktop depends on the parent's class.
|
||||
</p>
|
||||
@ -883,17 +873,17 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
<code>is-active</code>: the dropdown will show up <strong>all the time</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message is-success">
|
||||
<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>
|
||||
|
||||
{% highlight html %}{{ navbar_dropdown_hover_snippet }}{% endhighlight %}
|
||||
{% highlight html %}{{ navbar_dropdown_hover_snippet }}{% endhighlight %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_dropdown_hover_example }}
|
||||
@ -903,11 +893,11 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
<div class="column">
|
||||
{% highlight html %}{{ navbar_dropdown_hover_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ navbar_dropdown_active_snippet }}{% endhighlight %}
|
||||
{% highlight html %}{{ navbar_dropdown_active_snippet }}{% endhighlight %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_dropdown_active_example }}
|
||||
@ -917,21 +907,21 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
<div class="column">
|
||||
{% highlight html %}{{ navbar_dropdown_active_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="title is-4">
|
||||
<h4 class="title is-4">
|
||||
Right dropdown
|
||||
</h4>
|
||||
</h4>
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
If your parent <code>navbar-item</code> is on the right side, you can position the dropdown to start from the <strong>right</strong> with the <code>is-right</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ navbar_dropdown_right_snippet }}{% endhighlight %}
|
||||
{% highlight html %}{{ navbar_dropdown_right_snippet }}{% endhighlight %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_dropdown_right_example }}
|
||||
@ -941,23 +931,23 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
<div class="column">
|
||||
{% highlight html %}{{ navbar_dropdown_right_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="title is-4">
|
||||
<h4 class="title is-4">
|
||||
Dropup
|
||||
</h4>
|
||||
</h4>
|
||||
|
||||
{% include elements/new-tag.html version="0.6.1" %}
|
||||
{% include elements/new-tag.html version="0.6.1" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
If you're using a navbar at the bottom, like the <a href="#fixed-navbar">fixed bottom navbar</a>, you might want to use a <strong>dropup menu</strong>. Simply add the <code>has-dropdown</code> and <code>has-dropdown-up</code> modifiers to the parent <code>navbar-item</code>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ navbar_dropup_snippet }}{% endhighlight %}
|
||||
{% highlight html %}{{ navbar_dropup_snippet }}{% endhighlight %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_dropup_example }}
|
||||
@ -967,13 +957,13 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
<div class="column">
|
||||
{% highlight html %}{{ navbar_dropup_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="title is-4">
|
||||
<h4 class="title is-4">
|
||||
Styles for the dropdown menu
|
||||
</h4>
|
||||
</h4>
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
By default, the <code>navbar-dropdown</code> has:
|
||||
</p>
|
||||
@ -985,9 +975,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
a <code>border-radius</code> at both bottom corners
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_dropdown_default_example }}
|
||||
@ -997,9 +987,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
<div class="column">
|
||||
{% highlight html %}{{ navbar_dropdown_default_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
When having a <a href="#transparent-navbar">transparent navbar</a>, it is preferable to use the boxed version of the dropdown, by using the <code>is-boxed</code> modifier.
|
||||
</p>
|
||||
@ -1017,9 +1007,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
the hover/active state is <strong>animated</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_dropdown_boxed_example }}
|
||||
@ -1029,13 +1019,13 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
<div class="column">
|
||||
{% highlight html %}{{ navbar_dropdown_boxed_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="title is-4">
|
||||
<h4 class="title is-4">
|
||||
Active dropdown navbar item
|
||||
</h4>
|
||||
</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_dropdown_item_active_example }}
|
||||
@ -1045,28 +1035,28 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
<div class="column">
|
||||
{% highlight html %}{{ navbar_dropdown_item_active_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="title is-4">
|
||||
<h4 class="title is-4">
|
||||
Dropdown divider
|
||||
</h4>
|
||||
</h4>
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add a <code>navbar-divider</code> to display a <strong>horizontal rule</strong> in a <code>navbar-dropdown</code>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
|
||||
{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
|
||||
|
||||
{% include anchor.html name="Colors" %}
|
||||
{% include anchor.html name="Colors" %}
|
||||
|
||||
<div class="tags has-addons">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">New!</span>
|
||||
<span class="tag is-info">0.5.2</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can change the background color of the <code>navbar</code> by using one of the <strong>9 color modifiers:</strong>
|
||||
</p>
|
||||
@ -1082,51 +1072,49 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
<li><code>is-light</code></li>
|
||||
<li><code>is-white</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ navbar_color_markup }}{% endhighlight %}
|
||||
{% highlight html %}{{ navbar_color_markup }}{% endhighlight %}
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="primary" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="link" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="info" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="success" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="warning" light=true %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="danger" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="black" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="dark" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="light" light=true %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="white" light=true %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -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,22 +159,7 @@ 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">
|
||||
<div class="content">
|
||||
<p>
|
||||
The pagination component consists of several elements:
|
||||
</p>
|
||||
@ -187,52 +182,49 @@ doc-subtab: pagination
|
||||
<p>
|
||||
All elements are optional so you can compose your pagination as you wish.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=pagination_example horizontal=true more=true %}
|
||||
{% include snippet.html content=pagination_example horizontal=true more=true %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
|
||||
{% 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">
|
||||
<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>
|
||||
|
||||
{% 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">
|
||||
<p class="content">
|
||||
Add the <code>is-rounded</code> modifier to have rounded pagination items.
|
||||
</p>
|
||||
</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">
|
||||
<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>
|
||||
|
||||
{% 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,22 +83,7 @@ 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">
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>panel</code> is container for several types:
|
||||
</p>
|
||||
@ -112,11 +107,8 @@ doc-subtab: panel
|
||||
<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>
|
||||
|
||||
{% 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 %}
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
||||
{% include snippet.html content=tabs_example horizontal=true %}
|
||||
{% include snippet.html content=tabs_example horizontal=true %}
|
||||
|
||||
{% include snippet.html content=tabs_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_example horizontal=true more=true %}
|
||||
|
||||
{% include anchor.html name="Alignment" %}
|
||||
{% include anchor.html name="Alignment" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
|
||||
{% include snippet.html content=tabs_centered_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_centered_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=tabs_right_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_right_example horizontal=true more=true %}
|
||||
|
||||
{% include anchor.html name="Icons" %}
|
||||
{% include anchor.html name="Icons" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>You can use any of the <a href="http://fontawesome.io/">Font Awesome</a> <strong>icons</strong>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
<div class="content">
|
||||
{% 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>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=tabs_small_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_small_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=tabs_medium_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_medium_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=tabs_large_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_large_example horizontal=true more=true %}
|
||||
|
||||
{% include anchor.html name="Styles" %}
|
||||
{% include anchor.html name="Styles" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=tabs_boxed_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_boxed_example horizontal=true more=true %}
|
||||
|
||||
<p class="content">
|
||||
<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>
|
||||
|
||||
{% include snippet.html content=tabs_toggle_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_toggle_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/new-tag.html version="0.6.2" %}
|
||||
{% include elements/new-tag.html version="0.6.2" %}
|
||||
|
||||
<p class="content">
|
||||
<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>
|
||||
</p>
|
||||
|
||||
{% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
|
||||
|
||||
<p class="content">
|
||||
<p class="content">
|
||||
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
|
||||
</p>
|
||||
</p>
|
||||
|
||||
{% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
|
||||
|
||||
{% include anchor.html name="Combining" %}
|
||||
{% include anchor.html name="Combining" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
|
||||
{% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
|
||||
{% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=tabs_toggle_fullwidth_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_centered_boxed_medium_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_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