library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Component links

Browse Source
This commit is contained in:
Jeremy Thomas 2018-04-09 13:18:46 +01:00
parent 0f9d338f66
commit e75fd365e3
11 changed files with 1110 additions and 1160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
docs/_data/links.json
View File

@ -43,9 +43,54 @@
"button": { "button": {
"name": "Button", "name": "Button",
"path": "/documentation/elements/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": { "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"]
} }
} }

87
docs/documentation/components/breadcrumb.html
View File

@ -1,12 +1,21 @@
--- ---
title: Breadcrumb title: Breadcrumb
subtitle: "A simple <strong>breadcrumb</strong> component to improve your navigation experience"
layout: documentation layout: documentation
doc-tab: components doc-tab: components
doc-subtab: breadcrumb 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 %} {% capture breadcrumb_example %}
<nav class="breadcrumb" aria-label="breadcrumbs"> <nav class="breadcrumb" aria-label="breadcrumbs">
<ul> <ul>
@ -156,77 +165,57 @@ doc-subtab: breadcrumb
</nav> </nav>
{% endcapture %} {% endcapture %}
<section class="section"> <div class="content">
<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">
<p>The <strong>breadcrumb</strong> component only requires a <code>.breadcrumb</code> container and a <code>ul</code> list.</p> <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>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> <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> <hr>
{% include snippet.html content=breadcrumb_example horizontal=true clipped=true %} {% 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> <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> <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> <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> <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' %} {% include variables.html type='component' %}
</div>
</section>

60
docs/documentation/components/card.html
View File

@ -1,8 +1,18 @@
--- ---
title: Card title: Card
subtile: "An all-around flexible and composable component"
layout: documentation layout: documentation
doc-tab: components doc-tab: components
doc-subtab: card doc-subtab: card
breadcrumb:
- home
- documentation
- components
- components-card
meta:
- variables: true
- colors: false
- sizes: false
--- ---
{% capture card_example %} {% capture card_example %}
@ -89,22 +99,7 @@ doc-subtab: card
</div> </div>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-components.html %} <div class="content">
<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> <p>The <strong>card</strong> component comprises several elements that you can mix and match:</p>
<ul> <ul>
<li> <li>
@ -138,53 +133,50 @@ doc-subtab: card
</ul> </ul>
</li> </li>
</ul> </ul>
</div> </div>
<div class="tags has-addons"> <div class="tags has-addons">
<span class="tag">New</span> <span class="tag">New</span>
<span class="tag is-info">0.5.3</span> <span class="tag is-info">0.5.3</span>
</div> </div>
<div class="content"> <div class="content">
<p> <p>
You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier. You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.
</p> </p>
</div> </div>
<hr> <hr>
<div class="columns"> <div class="columns">
<div class="column is-one-third"> <div class="column is-one-third">
{{card_example}} {{card_example}}
</div> </div>
<div class="column highlight-full"> <div class="column highlight-full">
{% highlight html %}{{card_example}}{% endhighlight %} {% highlight html %}{{card_example}}{% endhighlight %}
</div> </div>
</div> </div>
<hr> <hr>
<div class="columns"> <div class="columns">
<div class="column is-one-third"> <div class="column is-one-third">
{{card_header_example}} {{card_header_example}}
</div> </div>
<div class="column highlight-full"> <div class="column highlight-full">
{% highlight html %}{{card_header_example}}{% endhighlight %} {% highlight html %}{{card_header_example}}{% endhighlight %}
</div> </div>
</div> </div>
<hr> <hr>
<div class="columns"> <div class="columns">
<div class="column is-one-third"> <div class="column is-one-third">
{{card_title_example}} {{card_title_example}}
</div> </div>
<div class="column highlight-full"> <div class="column highlight-full">
{% highlight html %}{{card_title_example}}{% endhighlight %} {% highlight html %}{{card_title_example}}{% endhighlight %}
</div> </div>
</div> </div>
{% include variables.html type='component' %} {% include variables.html type='component' %}
</div>
</section>

87
docs/documentation/components/dropdown.html
View File

@ -1,8 +1,18 @@
--- ---
title: Dropdown title: Dropdown
subtitle: "An interactive <strong>dropdown menu</strong> for discoverable content"
layout: documentation layout: documentation
doc-tab: components doc-tab: components
doc-subtab: dropdown doc-subtab: dropdown
breadcrumb:
- home
- documentation
- components
- components-dropdown
meta:
- colors: false
- sizes: false
- variables: true
--- ---
{% capture dropdown_example %} {% capture dropdown_example %}
@ -188,27 +198,7 @@ doc-subtab: dropdown
</div> </div>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-components.html %} <div class="content">
<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> <p>
The <code>dropdown</code> component is a container for a dropdown button and a dropdown menu. The <code>dropdown</code> component is a container for a dropdown button and a dropdown menu.
</p> </p>
@ -238,37 +228,37 @@ doc-subtab: dropdown
</ul> </ul>
</li> </li>
</ul> </ul>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-half"> <div class="column is-half">
{{dropdown_example}} {{dropdown_example}}
</div> </div>
<div class="column is-half highlight-full"> <div class="column is-half highlight-full">
{% highlight html %}{{dropdown_example}}{% endhighlight %} {% highlight html %}{{dropdown_example}}{% endhighlight %}
</div> </div>
</div> </div>
{% include anchor.html name="Dropdown content" %} {% include anchor.html name="Dropdown content" %}
<div class="content"> <div class="content">
<p> <p>
While the <code>dropdown-item</code> can be used as an anchor link <code>&lt;a&gt;</code>, you can also use a <code>&lt;div&gt;</code> and insert almost <strong>any type of content</strong>. While the <code>dropdown-item</code> can be used as an anchor link <code>&lt;a&gt;</code>, you can also use a <code>&lt;div&gt;</code> and insert almost <strong>any type of content</strong>.
</p> </p>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-half"> <div class="column is-half">
{{dropdown_content_example}} {{dropdown_content_example}}
</div> </div>
<div class="column is-half"> <div class="column is-half">
{% highlight html %}{{dropdown_content_example}}{% endhighlight %} {% highlight html %}{{dropdown_content_example}}{% endhighlight %}
</div> </div>
</div> </div>
{% include anchor.html name="Hoverable or Toggable" %} {% include anchor.html name="Hoverable or Toggable" %}
<div class="content"> <div class="content">
<p> <p>
The <code>dropdown</code> component has <strong>2 additional modifiers</strong> The <code>dropdown</code> component has <strong>2 additional modifiers</strong>
</p> </p>
@ -280,32 +270,32 @@ doc-subtab: dropdown
<code>is-active</code>: the dropdown will show up <strong>all the time</strong> <code>is-active</code>: the dropdown will show up <strong>all the time</strong>
</li> </li>
</ul> </ul>
</div> </div>
<div class="message is-success"> <div class="message is-success">
<p class="message-body"> <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>. 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> </p>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-half"> <div class="column is-half">
{{dropdown_click_example}}{{dropdown_info_example}} {{dropdown_click_example}}{{dropdown_info_example}}
</div> </div>
<div class="column is-half"> <div class="column is-half">
{% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %} {% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %}
</div> </div>
</div> </div>
{% include anchor.html name="Right aligned" %} {% include anchor.html name="Right aligned" %}
<div class="content"> <div class="content">
<p> <p>
You can add the <code>is-right</code> modifier to have a <strong>right-aligned</strong> dropdown. You can add the <code>is-right</code> modifier to have a <strong>right-aligned</strong> dropdown.
</p> </p>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-half"> <div class="column is-half">
<div class="level is-mobile"> <div class="level is-mobile">
<div class="level-left"> <div class="level-left">
@ -323,26 +313,23 @@ doc-subtab: dropdown
<div class="column is-half"> <div class="column is-half">
{% highlight html %}{{dropdown_right_example}}{% endhighlight %} {% highlight html %}{{dropdown_right_example}}{% endhighlight %}
</div> </div>
</div> </div>
{% include anchor.html name="Dropup" %} {% include anchor.html name="Dropup" %}
<div class="content"> <div class="content">
<p> <p>
You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button. You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.
</p> </p>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-half"> <div class="column is-half">
{{ dropdown_up_example }} {{ dropdown_up_example }}
</div> </div>
<div class="column is-half"> <div class="column is-half">
{% highlight html %}{{dropdown_up_example}}{% endhighlight %} {% highlight html %}{{dropdown_up_example}}{% endhighlight %}
</div> </div>
</div> </div>
{% include variables.html type='component' %} {% include variables.html type='component' %}
</div>
</section>

32
docs/documentation/components/menu.html
View File

@ -1,8 +1,18 @@
--- ---
title: Menu title: Menu
subtitle: "A simple <strong>menu</strong>, for any type of vertical navigation"
layout: documentation layout: documentation
doc-tab: components doc-tab: components
doc-subtab: menu doc-subtab: menu
breadcrumb:
- home
- documentation
- components
- components-menu
meta:
- colors: false
- sizes: false
- variables: true
--- ---
{% capture menu_example %} {% capture menu_example %}
@ -42,24 +52,6 @@ doc-subtab: menu
</aside> </aside>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-components.html %} {% include snippet.html content=menu_example size="one-third" %}
<section class="section"> {% include variables.html type='component' %}
<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>

56
docs/documentation/components/message.html
View File

@ -1,8 +1,18 @@
--- ---
title: Message title: Message
subtitle: "Colored <strong>message</strong> blocks, to emphasize part of your page"
layout: documentation layout: documentation
doc-tab: components doc-tab: components
doc-subtab: message doc-subtab: message
meta:
- colors: true
- sizes: true
- variables: true
breadcrumb:
- home
- documentation
- components
- components-message
--- ---
{% capture message_example %} {% capture message_example %}
@ -108,48 +118,28 @@ doc-subtab: message
{% endfor %} {% endfor %}
{% endcapture %} {% endcapture %}
{% include subnav/subnav-components.html %} {% include snippet.html content=message_example %}
<section class="section"> {% include anchor.html name="Colors" %}
<div class="container">
<h1 class="title">Messages</h1>
<h2 class="subtitle">
Colored <strong>message</strong> blocks, to emphasize part of your page
</h2>
{%
include meta.html
colors=true
sizes=true
variables=true
%}
<hr> {% 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">
{% include snippet.html content=message_colors_example %}
{% include anchor.html name="Message body only" %}
<div class="content">
<p>You can <strong>omit</strong> the message header:</p> <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' %} {% include variables.html type='component' %}
</div>
</section>

66
docs/documentation/components/modal.html
View File

@ -1,8 +1,18 @@
--- ---
title: Modal title: Modal
subtitle: "A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want"
layout: documentation layout: documentation
doc-tab: components doc-tab: components
doc-subtab: modal doc-subtab: modal
meta:
- colors: false
- sizes: false
- variables: true
breadcrumb:
- home
- documentation
- components
- components-modal
--- ---
{% capture modal %} {% capture modal %}
@ -46,22 +56,7 @@ doc-subtab: modal
</div> </div>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-components.html %} <div class="content">
<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> <p>The modal structure is very simple:</p>
<ul> <ul>
<li> <li>
@ -82,55 +77,52 @@ doc-subtab: modal
<p> <p>
<button class="button is-primary is-large modal-button" data-target="modal" aria-haspopup="true">Launch example modal</button> <button class="button is-primary is-large modal-button" data-target="modal" aria-haspopup="true">Launch example modal</button>
</p> </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> <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"> <div class="message-header">
No JavaScript No JavaScript
</div> </div>
<div class="message-body"> <div class="message-body">
Bulma does <strong>not</strong> include any JavaScript interaction. You will have to implement the class toggle yourself. Bulma does <strong>not</strong> include any JavaScript interaction. You will have to implement the class toggle yourself.
</div> </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>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> <p>
<a class="button is-primary is-large modal-button" data-target="modal-bis">Launch image modal</a> <a class="button is-primary is-large modal-button" data-target="modal-bis">Launch image modal</a>
</p> </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>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> <p>
<button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch card modal</button> <button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch card modal</button>
</p> </p>
</div> </div>
<div class="highlight-full"> <div class="highlight-full">
{% highlight html %}{{ modal_card }}{% endhighlight %} {% highlight html %}{{ modal_card }}{% endhighlight %}
</div> </div>
{% include variables.html type='component' %} {% include variables.html type='component' %}
</div>
</section>
<div id="modal" class="modal"> <div id="modal" class="modal">
<div class="modal-background"></div> <div class="modal-background"></div>

298
docs/documentation/components/navbar.html
View File

@ -1,12 +1,20 @@
--- ---
title: Navbar title: Navbar
subtitle: "A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns"
layout: documentation layout: documentation
doc-tab: components doc-tab: components
doc-subtab: navbar doc-subtab: navbar
breadcrumb:
- home
- documentation
- components
- components-navbar
meta:
- colors: true
- sizes: false
- variables: true
--- ---
{% include subnav/subnav-components.html %}
{% capture navbar_example %} {% capture navbar_example %}
{% include examples/navbar.html id="Default" %} {% include examples/navbar.html id="Default" %}
{% endcapture %} {% endcapture %}
@ -523,31 +531,13 @@ document.addEventListener('DOMContentLoaded', function () {
</nav> </nav>
{% endcapture %} {% endcapture %}
<section class="section"> <div class="message is-success">
<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-body"> <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> <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>
<div class="content"> <div class="content">
<p> <p>
The <code>navbar</code> component is a responsive and versatile horizontal navigation bar with the following structure: The <code>navbar</code> component is a responsive and versatile horizontal navigation bar with the following structure:
</p> </p>
@ -595,11 +585,11 @@ document.addEventListener('DOMContentLoaded', function () {
</ul> </ul>
</li> </li>
</ul> </ul>
</div> </div>
{% include anchor.html name="Navbar brand" %} {% include anchor.html name="Navbar brand" %}
<div class="content"> <div class="content">
<p> <p>
The <code>navbar-brand</code> is the left side of the navbar. It can contain: The <code>navbar-brand</code> is the left side of the navbar. It can contain:
</p> </p>
@ -611,79 +601,79 @@ document.addEventListener('DOMContentLoaded', function () {
the <code>navbar-burger</code> as last child the <code>navbar-burger</code> as last child
</li> </li>
</ul> </ul>
</div> </div>
{% highlight html %}{{navbar_brand_example}}{% endhighlight %} {% highlight html %}{{navbar_brand_example}}{% endhighlight %}
<div class="content"> <div class="content">
<p> <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. 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> </p>
</div> </div>
<div class="bd-example is-paddingless"> <div class="bd-example is-paddingless">
{{navbar_brand_items_example}} {{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> <p>
On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs. On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs.
</p> </p>
</div> </div>
{% include anchor.html name="Navbar burger" %} {% include anchor.html name="Navbar burger" %}
<div class="content"> <div class="content">
<p> <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>. 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> </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;"> <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> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
</a> </a>
</div> </div>
{% highlight html %}{{ navbar_burger_example }}{% endhighlight %} {% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
<div class="content"> <div class="content">
<p> <p>
You can add the modifier class <code>is-active</code> to turn it into a cross. You can add the modifier class <code>is-active</code> to turn it into a cross.
</p> </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;"> <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> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
</a> </a>
</div> </div>
{% include anchor.html name="Navbar menu" %} {% include anchor.html name="Navbar menu" %}
<div class="content"> <div class="content">
<p> <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>. 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> </p>
</div> </div>
{% highlight html %}{{navbar_menu_example}}{% endhighlight %} {% highlight html %}{{navbar_menu_example}}{% endhighlight %}
<div class="content"> <div class="content">
<p> <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. 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> </p>
</div> </div>
{% highlight html %}{{navbar_menu_active_example}}{% endhighlight %} {% highlight html %}{{navbar_menu_active_example}}{% endhighlight %}
<div class="content"> <div class="content">
<p> <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: 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> </p>
@ -695,11 +685,11 @@ document.addEventListener('DOMContentLoaded', function () {
<code>navbar-end</code> <code>navbar-end</code>
</li> </li>
</ul> </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> <h4 class="message-header">Javascript toggle</h4>
<div class="message-body"> <div class="message-body">
<div class="content"> <div class="content">
@ -714,11 +704,11 @@ document.addEventListener('DOMContentLoaded', function () {
{% highlight javascript %}{{ navbar_js_code }}{% endhighlight %} {% highlight javascript %}{{ navbar_js_code }}{% endhighlight %}
</div> </div>
</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> <p>
The <code>navbar-start</code> and <code>navbar-end</code> are the two direct and only children of the <code>navbar-menu</code>. The <code>navbar-start</code> and <code>navbar-end</code> are the two direct and only children of the <code>navbar-menu</code>.
</p> </p>
@ -736,13 +726,13 @@ document.addEventListener('DOMContentLoaded', function () {
<p> <p>
Each of them can contain any number of <code>navbar-item</code>. Each of them can contain any number of <code>navbar-item</code>.
</p> </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> <p>
A <code>navbar-item</code> is a repeatable element that can be: A <code>navbar-item</code> is a repeatable element that can be:
</p> </p>
@ -793,23 +783,23 @@ document.addEventListener('DOMContentLoaded', function () {
<p> <p>
You can add the modifier class <code>is-expanded</code> to turn it into a full-width element. You can add the modifier class <code>is-expanded</code> to turn it into a full-width element.
</p> </p>
</div> </div>
{% include anchor.html name="Transparent navbar" %} {% include anchor.html name="Transparent navbar" %}
<div class="content"> <div class="content">
<p> <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. 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> </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> <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: 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> </p>
@ -823,19 +813,19 @@ document.addEventListener('DOMContentLoaded', function () {
{% highlight html %}<html class="has-navbar-fixed-top">{% endhighlight %} {% highlight html %}<html class="has-navbar-fixed-top">{% endhighlight %}
</li> </li>
</ul> </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"> <a id="navbarFixBottom" class="button is-link">
<span><span id="navbarFixBottomText">Show</span> <strong>bottom</strong> navbar</span> <span><span id="navbarFixBottomText">Show</span> <strong>bottom</strong> navbar</span>
</a> </a>
</div> </div>
{% include anchor.html name="Dropdown menu" %} {% include anchor.html name="Dropdown menu" %}
<div class="content"> <div class="content">
<p> <p>
To create a <strong>dropdown menu</strong>, you will need <strong>4</strong> elements: To create a <strong>dropdown menu</strong>, you will need <strong>4</strong> elements:
</p> </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> <code>navbar-dropdown</code> which can contain instances of <code>navbar-item</code> and <code>navbar-divider</code>
</li> </li>
</ul> </ul>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="bd-example is-paddingless"> <div class="bd-example is-paddingless">
{{ navbar_dropdown_example }} {{ navbar_dropdown_example }}
@ -862,13 +852,13 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="column"> <div class="column">
{% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %} {% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %}
</div> </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> Show/hide the dropdown with either <strong>CSS</strong> or <strong>JavaScript</strong>
</h4> </h4>
<div class="content"> <div class="content">
<p> <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. 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> </p>
@ -883,17 +873,17 @@ document.addEventListener('DOMContentLoaded', function () {
<code>is-active</code>: the dropdown will show up <strong>all the time</strong> <code>is-active</code>: the dropdown will show up <strong>all the time</strong>
</li> </li>
</ul> </ul>
</div> </div>
<div class="message is-success"> <div class="message is-success">
<p class="message-body"> <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>. 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> </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="column">
<div class="bd-example is-paddingless"> <div class="bd-example is-paddingless">
{{ navbar_dropdown_hover_example }} {{ navbar_dropdown_hover_example }}
@ -903,11 +893,11 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="column"> <div class="column">
{% highlight html %}{{ navbar_dropdown_hover_example }}{% endhighlight %} {% highlight html %}{{ navbar_dropdown_hover_example }}{% endhighlight %}
</div> </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="column">
<div class="bd-example is-paddingless"> <div class="bd-example is-paddingless">
{{ navbar_dropdown_active_example }} {{ navbar_dropdown_active_example }}
@ -917,21 +907,21 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="column"> <div class="column">
{% highlight html %}{{ navbar_dropdown_active_example }}{% endhighlight %} {% highlight html %}{{ navbar_dropdown_active_example }}{% endhighlight %}
</div> </div>
</div> </div>
<h4 class="title is-4"> <h4 class="title is-4">
Right dropdown Right dropdown
</h4> </h4>
<div class="content"> <div class="content">
<p> <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. 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> </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="column">
<div class="bd-example is-paddingless"> <div class="bd-example is-paddingless">
{{ navbar_dropdown_right_example }} {{ navbar_dropdown_right_example }}
@ -941,23 +931,23 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="column"> <div class="column">
{% highlight html %}{{ navbar_dropdown_right_example }}{% endhighlight %} {% highlight html %}{{ navbar_dropdown_right_example }}{% endhighlight %}
</div> </div>
</div> </div>
<h4 class="title is-4"> <h4 class="title is-4">
Dropup 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> <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>. 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> </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="column">
<div class="bd-example is-paddingless"> <div class="bd-example is-paddingless">
{{ navbar_dropup_example }} {{ navbar_dropup_example }}
@ -967,13 +957,13 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="column"> <div class="column">
{% highlight html %}{{ navbar_dropup_example }}{% endhighlight %} {% highlight html %}{{ navbar_dropup_example }}{% endhighlight %}
</div> </div>
</div> </div>
<h4 class="title is-4"> <h4 class="title is-4">
Styles for the dropdown menu Styles for the dropdown menu
</h4> </h4>
<div class="content"> <div class="content">
<p> <p>
By default, the <code>navbar-dropdown</code> has: By default, the <code>navbar-dropdown</code> has:
</p> </p>
@ -985,9 +975,9 @@ document.addEventListener('DOMContentLoaded', function () {
a <code>border-radius</code> at both bottom corners a <code>border-radius</code> at both bottom corners
</li> </li>
</ul> </ul>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="bd-example is-paddingless"> <div class="bd-example is-paddingless">
{{ navbar_dropdown_default_example }} {{ navbar_dropdown_default_example }}
@ -997,9 +987,9 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="column"> <div class="column">
{% highlight html %}{{ navbar_dropdown_default_example }}{% endhighlight %} {% highlight html %}{{ navbar_dropdown_default_example }}{% endhighlight %}
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<p> <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. 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> </p>
@ -1017,9 +1007,9 @@ document.addEventListener('DOMContentLoaded', function () {
the hover/active state is <strong>animated</strong> the hover/active state is <strong>animated</strong>
</li> </li>
</ul> </ul>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="bd-example is-paddingless"> <div class="bd-example is-paddingless">
{{ navbar_dropdown_boxed_example }} {{ navbar_dropdown_boxed_example }}
@ -1029,13 +1019,13 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="column"> <div class="column">
{% highlight html %}{{ navbar_dropdown_boxed_example }}{% endhighlight %} {% highlight html %}{{ navbar_dropdown_boxed_example }}{% endhighlight %}
</div> </div>
</div> </div>
<h4 class="title is-4"> <h4 class="title is-4">
Active dropdown navbar item Active dropdown navbar item
</h4> </h4>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="bd-example is-paddingless"> <div class="bd-example is-paddingless">
{{ navbar_dropdown_item_active_example }} {{ navbar_dropdown_item_active_example }}
@ -1045,28 +1035,28 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="column"> <div class="column">
{% highlight html %}{{ navbar_dropdown_item_active_example }}{% endhighlight %} {% highlight html %}{{ navbar_dropdown_item_active_example }}{% endhighlight %}
</div> </div>
</div> </div>
<h4 class="title is-4"> <h4 class="title is-4">
Dropdown divider Dropdown divider
</h4> </h4>
<div class="content"> <div class="content">
<p> <p>
You can add a <code>navbar-divider</code> to display a <strong>horizontal rule</strong> in a <code>navbar-dropdown</code>. You can add a <code>navbar-divider</code> to display a <strong>horizontal rule</strong> in a <code>navbar-dropdown</code>.
</p> </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">New!</span>
<span class="tag is-info">0.5.2</span> <span class="tag is-info">0.5.2</span>
</div> </div>
<div class="content"> <div class="content">
<p> <p>
You can change the background color of the <code>navbar</code> by using one of the <strong>9 color modifiers:</strong> You can change the background color of the <code>navbar</code> by using one of the <strong>9 color modifiers:</strong>
</p> </p>
@ -1082,51 +1072,49 @@ document.addEventListener('DOMContentLoaded', function () {
<li><code>is-light</code></li> <li><code>is-light</code></li>
<li><code>is-white</code></li> <li><code>is-white</code></li>
</ul> </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" %} {% 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" %} {% 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" %} {% 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" %} {% 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 %} {% 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" %} {% 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" %} {% 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" %} {% 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 %} {% 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 %} {% include examples/navbar-color.html color="white" light=true %}
</div> </div>
{% include variables.html type='component' %} {% include variables.html type='component' %}
</div>
</section>

72
docs/documentation/components/pagination.html
View File

@ -1,8 +1,18 @@
--- ---
title: Pagination title: Pagination
subtitle: "A responsive, usable, and flexible <strong>pagination</strong>"
layout: documentation layout: documentation
doc-tab: components doc-tab: components
doc-subtab: pagination doc-subtab: pagination
breadcrumb:
- home
- documentation
- components
- components-pagination
meta:
- colors: false
- sizes: true
- variables: true
--- ---
{% capture pagination_example %} {% capture pagination_example %}
@ -149,22 +159,7 @@ doc-subtab: pagination
</nav> </nav>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-components.html %} <div class="content">
<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> <p>
The pagination component consists of several elements: The pagination component consists of several elements:
</p> </p>
@ -187,52 +182,49 @@ doc-subtab: pagination
<p> <p>
All elements are optional so you can compose your pagination as you wish. All elements are optional so you can compose your pagination as you wish.
</p> </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> <p>
You can disable some links if they are not active, or change the amount of page numbers available. You can disable some links if they are not active, or change the amount of page numbers available.
</p> </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> <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. 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> </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. 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> 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. 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' %} {% include variables.html type='component' %}
</div>
</section>

36
docs/documentation/components/panel.html
View File

@ -1,8 +1,18 @@
--- ---
title: Panel title: Panel
subtitle: "A composable <strong>panel</strong>, for compact controls"
layout: documentation layout: documentation
doc-tab: components doc-tab: components
doc-subtab: panel doc-subtab: panel
breadcrumb:
- home
- documentation
- components
- components-panel
meta:
- colors: false
- sizes: false
- variables: true
--- ---
{% capture panel_example %} {% capture panel_example %}
@ -73,22 +83,7 @@ doc-subtab: panel
</nav> </nav>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-components.html %} <div class="content">
<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> <p>
The <code>panel</code> is container for several types: The <code>panel</code> is container for several types:
</p> </p>
@ -112,11 +107,8 @@ doc-subtab: panel
<p> <p>
The <code>panel-block</code> can be an anchor tag <code>&lt;a&gt;</code> or a label <code>&lt;label&gt;</code> with a checkbox inside. The <code>panel-block</code> can be an anchor tag <code>&lt;a&gt;</code> or a label <code>&lt;label&gt;</code> with a checkbox inside.
</p> </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' %} {% include variables.html type='component' %}
</div>
</section>

113
docs/documentation/components/tabs.html
View File

@ -1,8 +1,18 @@
--- ---
title: Tabs title: Tabs
subtitle: "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles"
layout: documentation layout: documentation
doc-tab: components doc-tab: components
doc-subtab: tabs doc-subtab: tabs
breadcrumb:
- home
- documentation
- components
- components-tabs
meta:
- colors: false
- sizes: true
- variables: true
--- ---
{% capture tabs_example %} {% capture tabs_example %}
@ -344,107 +354,88 @@ doc-subtab: tabs
</div> </div>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-components.html %} <div class="content">
<section class="section">
<div class="container">
<h1 class="title">Tabs</h1>
<h2 class="subtitle">Simple responsive horizontal navigation <strong>tabs</strong>, with different styles</h2>
{%
include meta.html
since="0.4.4"
colors=false
sizes=true
variables=true
%}
<hr>
<div class="content">
<p><strong>Tabs</strong> only require a <code>tabs</code> container and a <code>&lt;ul&gt;</code> list.<br> <p><strong>Tabs</strong> only require a <code>tabs</code> container and a <code>&lt;ul&gt;</code> list.<br>
The <strong>default</strong> tabs style has a single border at the bottom.</p> 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> <p>
To align the tabs list, use the <code>is-centered</code> or <code>is-right</code> modifier on the <code>.tabs</code> container: To align the tabs list, use the <code>is-centered</code> or <code>is-right</code> modifier on the <code>.tabs</code> container:
</p> </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> <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" %} {% 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> <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. 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. 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>. 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>. 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> <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' %} {% include variables.html type='component' %}
</div>
</section>