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"]
} }
} }

101
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"> <p>The <strong>breadcrumb</strong> component only requires a <code>.breadcrumb</code> container and a <code>ul</code> list.</p>
<p>The dividers are automatically created in the content of the <code>::before</code> pseudo-element of <code>li</code> tags.</p>
<p>You can inform the current page using the <code>is-active</code> modifier in a <code>li</code> tag. It will disable the navigation of inner links.</p>
</div>
<h1 class="title">Breadcrumb</h1> <hr>
<h2 class="subtitle"> {% include snippet.html content=breadcrumb_example horizontal=true clipped=true %}
A simple <strong>breadcrumb</strong> component to improve your navigation experience
</h2>
{%
include meta.html
since="0.4.3"
variables=true
colors=false
sizes=true
%}
<hr> {% include anchor.html name="Alignment" %}
<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>For alternative alignments, use the <code>is-centered</code> and <code>is-right</code> modifiers on the <code>.breadcrumb</code> container.</p>
<p>The dividers are automatically created in the content of the <code>::before</code> pseudo-element of <code>li</code> tags.</p> </div>
<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>
<hr> {% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}
{% include snippet.html content=breadcrumb_example horizontal=true clipped=true %}
{% include anchor.html name="Alignment" %} {% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %}
<div class="content"> {% include anchor.html name="Icons" %}
<p>For alternative alignments, use the <code>is-centered</code> and <code>is-right</code> modifiers on the <code>.breadcrumb</code> container.</p>
</div>
{% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %} <div class="content">
<p>You can use any of the <a href="https://fontawesome.com/" target="_blank">Font Awesome</a> <strong>icons</strong>.</p>
</div>
{% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %} {% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
{% include anchor.html name="Icons" %} {% include anchor.html name="Alternative separators" %}
<div class="content"> <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 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_icons_example horizontal=true clipped=true %} {% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
{% include anchor.html name="Alternative separators" %} {% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
<div class="content"> {% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
<p>You can choose between <strong>4 additional separators</strong>: <code>has-arrow-separator</code> <code>has-bullet-separator</code> <code>has-dot-separator</code> and <code>has-succeeds-separator</code>.</p>
</div>
{% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %} {% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
{% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %} {% include anchor.html name="Sizes" %}
{% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %} <div class="content">
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
</div>
{% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %} {% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %}
{% include anchor.html name="Sizes" %} {% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
<div class="content"> {% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
</div>
{% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %} {% include variables.html type='component' %}
{% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
{% include variables.html type='component' %}
</div>
</section>

156
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,102 +99,84 @@ doc-subtab: card
</div> </div>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-components.html %} <div class="content">
<p>The <strong>card</strong> component comprises several elements that you can mix and match:</p>
<section class="section"> <ul>
<div class="container"> <li>
<h1 class="title">Card</h1> <code>card</code>: the main container
<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>
<ul> <ul>
<li> <li>
<code>card</code>: the main container <code>card-header</code>: a horizontal bar with a shadow
<ul> <ul>
<li> <li>
<code>card-header</code>: a horizontal bar with a shadow <code>card-header-title</code>: a left-aligned bold text
<ul>
<li>
<code>card-header-title</code>: a left-aligned bold text
</li>
<li>
<code>card-header-icon</code>: a placeholder for an icon
</li>
</ul>
</li> </li>
<li> <li>
<code>card-image</code>: a fullwidth container for a responsive image <code>card-header-icon</code>: a placeholder for an icon
</li> </li>
</ul>
</li>
<li>
<code>card-image</code>: a fullwidth container for a responsive image
</li>
<li>
<code>card-content</code>: a multi-purpose container for <em>any</em> other element
</li>
<li>
<code>card-footer</code>: a horizontal list of controls
<ul>
<li> <li>
<code>card-content</code>: a multi-purpose container for <em>any</em> other element <code>card-footer-item</code>: a repeatable list item
</li>
<li>
<code>card-footer</code>: a horizontal list of controls
<ul>
<li>
<code>card-footer-item</code>: a repeatable list item
</li>
</ul>
</li> </li>
</ul> </ul>
</li> </li>
</ul> </ul>
</div> </li>
</ul>
</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="column is-one-third">
{{card_example}}
</div>
<div class="column highlight-full">
{% highlight html %}{{card_example}}{% endhighlight %}
</div>
</div>
<hr>
<div class="columns">
<div class="column is-one-third">
{{card_header_example}}
</div>
<div class="column highlight-full">
{% highlight html %}{{card_header_example}}{% endhighlight %}
</div>
</div>
<hr>
<div class="columns">
<div class="column is-one-third">
{{card_title_example}}
</div>
<div class="column highlight-full">
{% highlight html %}{{card_title_example}}{% endhighlight %}
</div>
</div>
{% include variables.html type='component' %}
<div class="columns">
<div class="column is-one-third">
{{card_example}}
</div> </div>
</section> <div class="column highlight-full">
{% highlight html %}{{card_example}}{% endhighlight %}
</div>
</div>
<hr>
<div class="columns">
<div class="column is-one-third">
{{card_header_example}}
</div>
<div class="column highlight-full">
{% highlight html %}{{card_header_example}}{% endhighlight %}
</div>
</div>
<hr>
<div class="columns">
<div class="column is-one-third">
{{card_title_example}}
</div>
<div class="column highlight-full">
{% highlight html %}{{card_title_example}}{% endhighlight %}
</div>
</div>
{% include variables.html type='component' %}

247
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,161 +198,138 @@ doc-subtab: dropdown
</div> </div>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-components.html %} <div class="content">
<p>
<section class="section"> The <code>dropdown</code> component is a container for a dropdown button and a dropdown menu.
<div class="container"> </p>
<ul>
<h1 class="title">Dropdown</h1> <li>
<h2 class="subtitle"> <code>dropdown</code> the <strong>main</strong> container
An interactive <strong>dropdown menu</strong> for discoverable content
</h2>
{%
include meta.html
new=true
since="0.4.4"
colors=false
sizes=false
variables=true
%}
<hr>
<div class="content">
<p>
The <code>dropdown</code> component is a container for a dropdown button and a dropdown menu.
</p>
<ul> <ul>
<li> <li>
<code>dropdown</code> the <strong>main</strong> container <code>dropdown-trigger</code> the container for a <code>button</code>
</li>
<li>
<code>dropdown-menu</code> the toggable menu, <strong>hidden</strong> by default
<ul> <ul>
<li> <li>
<code>dropdown-trigger</code> the container for a <code>button</code> <code>dropdown-content</code> the dropdown <strong>box</strong>, with a white background and a shadow
</li>
<li>
<code>dropdown-menu</code> the toggable menu, <strong>hidden</strong> by default
<ul> <ul>
<li> <li>
<code>dropdown-content</code> the dropdown <strong>box</strong>, with a white background and a shadow <code>dropdown-item</code> each <strong>single item</strong> of the dropdown, which can either be a <code>a</code> or a <code>div</code>
<ul> </li>
<li> <li>
<code>dropdown-item</code> each <strong>single item</strong> of the dropdown, which can either be a <code>a</code> or a <code>div</code> <code>dropdown-divider</code> a <strong>horizontal line</strong> to separate dropdown items
</li>
<li>
<code>dropdown-divider</code> a <strong>horizontal line</strong> to separate dropdown items
</li>
</ul>
</li> </li>
</ul> </ul>
</li> </li>
</ul> </ul>
</li> </li>
</ul> </ul>
</div> </li>
</ul>
</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>
<ul> <ul>
<li> <li>
<code>is-hoverable</code>: the dropdown will show up when <strong>hovering</strong> the <code>dropdown-trigger</code> <code>is-hoverable</code>: the dropdown will show up when <strong>hovering</strong> the <code>dropdown-trigger</code>
</li> </li>
<li> <li>
<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">
<div class="level-item"> <div class="level-item">
{{dropdown_left_example}} {{dropdown_left_example}}
</div>
</div>
<div class="level-right">
<div class="level-item">
{{dropdown_right_example}}
</div>
</div>
</div> </div>
</div> </div>
<div class="column is-half"> <div class="level-right">
{% highlight html %}{{dropdown_right_example}}{% endhighlight %} <div class="level-item">
{{dropdown_right_example}}
</div>
</div> </div>
</div> </div>
{% include anchor.html name="Dropup" %}
<div class="content">
<p>
You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.
</p>
</div>
<div class="columns">
<div class="column is-half">
{{ dropdown_up_example }}
</div>
<div class="column is-half">
{% highlight html %}{{dropdown_up_example}}{% endhighlight %}
</div>
</div>
{% include variables.html type='component' %}
</div> </div>
</section> <div class="column is-half">
{% highlight html %}{{dropdown_right_example}}{% endhighlight %}
</div>
</div>
{% include anchor.html name="Dropup" %}
<div class="content">
<p>
You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.
</p>
</div>
<div class="columns">
<div class="column is-half">
{{ dropdown_up_example }}
</div>
<div class="column is-half">
{% highlight html %}{{dropdown_up_example}}{% endhighlight %}
</div>
</div>
{% include variables.html type='component' %}

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>

58
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">
<p>You can <strong>omit</strong> the message header:</p>
</div>
{% include snippet.html content=message_colors_example %} {% include snippet.html content=message_body_example %}
{% include anchor.html name="Message body only" %} {% include anchor.html name="Sizes" %}
<div class="content"> {% include snippet.html content=message_small %}
<p>You can <strong>omit</strong> the message header:</p>
</div>
{% include snippet.html content=message_body_example %} {% include snippet.html content=message_normal %}
{% include anchor.html name="Sizes" %} {% include snippet.html content=message_medium %}
{% include snippet.html content=message_small %} {% include snippet.html content=message_large %}
{% include snippet.html content=message_normal %} {% include variables.html type='component' %}
{% include snippet.html content=message_medium %}
{% include snippet.html content=message_large %}
{% include variables.html type='component' %}
</div>
</section>

146
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,91 +56,73 @@ doc-subtab: modal
</div> </div>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-components.html %} <div class="content">
<p>The modal structure is very simple:</p>
<section class="section"> <ul>
<div class="container"> <li>
<h1 class="title">Modal</h1> <code>modal</code>: the main container
<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>
<ul> <ul>
<li> <li>
<code>modal</code>: the main container <code>modal-background</code>: a transparent overlay that can act as a click target to close the modal
<ul> </li>
<li> <li>
<code>modal-background</code>: a transparent overlay that can act as a click target to close the modal <code>modal-content</code>: a horizontally and vertically centered container, with a maximum width of 640px, in which you can include <em>any</em> content
</li> </li>
<li> <li>
<code>modal-content</code>: a horizontally and vertically centered container, with a maximum width of 640px, in which you can include <em>any</em> content <code>modal-close</code>: a simple cross located in the top right corner
</li>
<li>
<code>modal-close</code>: a simple cross located in the top right corner
</li>
</ul>
</li> </li>
</ul> </ul>
<p> </li>
<button class="button is-primary is-large modal-button" data-target="modal" aria-haspopup="true">Launch example modal</button> </ul>
</p> <p>
</div> <button class="button is-primary is-large modal-button" data-target="modal" aria-haspopup="true">Launch example modal</button>
</p>
</div>
{% highlight html %}{{ modal }}{% endhighlight %} {% highlight html %}{{ modal }}{% endhighlight %}
<div class="content"> <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-header">
No JavaScript
</div>
<div class="message-body">
Bulma does <strong>not</strong> include any JavaScript interaction. You will have to implement the class toggle yourself.
</div>
</div>
<hr>
<h3 class="title">Image modal</h3>
<div class="content">
<p>Because a modal can contain <strong>anything you want</strong>, you can very simply use it to build an image gallery for example:</p>
<p>
<a class="button is-primary is-large modal-button" data-target="modal-bis">Launch image modal</a>
</p>
</div>
{% highlight html %}{{ image_modal }}{% endhighlight %}
<hr>
<h3 class="title">Modal card</h3>
<div class="content">
<p>If you want a more classic modal, with a <strong>head</strong>, a <strong>body</strong> and a <strong>foot</strong>, use the <code>modal-card</code>.</p>
<p>
<button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch card modal</button>
</p>
</div>
<div class="highlight-full">
{% highlight html %}{{ modal_card }}{% endhighlight %}
</div>
{% include variables.html type='component' %}
<div class="message is-danger">
<div class="message-header">
No JavaScript
</div> </div>
</section> <div class="message-body">
Bulma does <strong>not</strong> include any JavaScript interaction. You will have to implement the class toggle yourself.
</div>
</div>
<hr>
<h3 class="title">Image modal</h3>
<div class="content">
<p>Because a modal can contain <strong>anything you want</strong>, you can very simply use it to build an image gallery for example:</p>
<p>
<a class="button is-primary is-large modal-button" data-target="modal-bis">Launch image modal</a>
</p>
</div>
{% highlight html %}{{ image_modal }}{% endhighlight %}
<hr>
<h3 class="title">Modal card</h3>
<div class="content">
<p>If you want a more classic modal, with a <strong>head</strong>, a <strong>body</strong> and a <strong>foot</strong>, use the <code>modal-card</code>.</p>
<p>
<button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch card modal</button>
</p>
</div>
<div class="highlight-full">
{% highlight html %}{{ modal_card }}{% endhighlight %}
</div>
{% include variables.html type='component' %}
<div id="modal" class="modal"> <div id="modal" class="modal">
<div class="modal-background"></div> <div class="modal-background"></div>

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

File diff suppressed because it is too large Load Diff

122
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,90 +159,72 @@ doc-subtab: pagination
</nav> </nav>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-components.html %} <div class="content">
<p>
<section class="section"> The pagination component consists of several elements:
<div class="container"> </p>
<h1 class="title">Pagination</h1> <ul>
<h2 class="subtitle">A responsive, usable, and flexible <strong>pagination</strong></h2> <li>
{% <code>pagination-previous</code> and <code>pagination-next</code> for incremental navigation
include meta.html </li>
colors=false <li>
sizes=true <code>pagination-list</code> which displays page items:
variables=true
%}
<hr>
<div class="content">
<p>
The pagination component consists of several elements:
</p>
<ul> <ul>
<li> <li>
<code>pagination-previous</code> and <code>pagination-next</code> for incremental navigation <code>pagination-link</code> for the page numbers
</li> </li>
<li> <li>
<code>pagination-list</code> which displays page items: <code>pagination-ellipsis</code> for range separators
<ul>
<li>
<code>pagination-link</code> for the page numbers
</li>
<li>
<code>pagination-ellipsis</code> for range separators
</li>
</ul>
</li> </li>
</ul> </ul>
<p> </li>
All elements are optional so you can compose your pagination as you wish. </ul>
</p> <p>
</div> All elements are optional so you can compose your pagination as you wish.
</p>
</div>
{% include snippet.html content=pagination_example horizontal=true more=true %} {% include snippet.html content=pagination_example horizontal=true more=true %}
<div class="content"> <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>

78
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,50 +83,32 @@ doc-subtab: panel
</nav> </nav>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-components.html %} <div class="content">
<p>
<section class="section"> The <code>panel</code> is container for several types:
<div class="container"> </p>
<h1 class="title">Panel</h1> <ul>
<h2 class="subtitle">A composable <strong>panel</strong>, for compact controls</h2> <li>
{% <code>panel-heading</code> as the first child
include meta.html </li>
colors=false <li>
sizes=false <code>panel-tabs</code> for navigation
variables=true </li>
%} <li>
<code>panel-block</code> which can contain other elements, like:
<hr>
<div class="content">
<p>
The <code>panel</code> is container for several types:
</p>
<ul> <ul>
<li> <li><code>control</code></li>
<code>panel-heading</code> as the first child <li><code>input</code></li>
</li> <li><code>button</code></li>
<li> <li><code>panel-icon</code></li>
<code>panel-tabs</code> for navigation
</li>
<li>
<code>panel-block</code> which can contain other elements, like:
<ul>
<li><code>control</code></li>
<li><code>input</code></li>
<li><code>button</code></li>
<li><code>panel-icon</code></li>
</ul>
</li>
</ul> </ul>
<p> </li>
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. </ul>
</p> <p>
</div> 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>
</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>

137
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">
<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>
</div>
<section class="section"> {% include snippet.html content=tabs_example horizontal=true %}
<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> {% include snippet.html content=tabs_example horizontal=true more=true %}
<div class="content"> {% include anchor.html name="Alignment" %}
<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>
</div>
{% include snippet.html content=tabs_example horizontal=true %} <div class="content">
<p>
To align the tabs list, use the <code>is-centered</code> or <code>is-right</code> modifier on the <code>.tabs</code> container:
</p>
</div>
{% include snippet.html content=tabs_example horizontal=true more=true %} {% include snippet.html content=tabs_centered_example horizontal=true more=true %}
{% include anchor.html name="Alignment" %} {% include snippet.html content=tabs_right_example horizontal=true more=true %}
<div class="content"> {% include anchor.html name="Icons" %}
<p>
To align the tabs list, use the <code>is-centered</code> or <code>is-right</code> modifier on the <code>.tabs</code> container:
</p>
</div>
{% include snippet.html content=tabs_centered_example horizontal=true more=true %} <div class="content">
<p>You can use any of the <a href="http://fontawesome.io/">Font Awesome</a> <strong>icons</strong>.</p>
</div>
{% include snippet.html content=tabs_right_example horizontal=true more=true %} {% include snippet.html content=tabs_icons_example horizontal=true more=true %}
{% include anchor.html name="Icons" %} {% include snippet.html content=tabs_icons_example horizontal=true more=true %}
<div class="content"> {% include anchor.html name="Sizes" %}
<p>You can use any of the <a href="http://fontawesome.io/">Font Awesome</a> <strong>icons</strong>.</p> <div class="content">
</div> <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
</div>
{% include snippet.html content=tabs_icons_example horizontal=true more=true %} {% include snippet.html content=tabs_small_example horizontal=true more=true %}
{% include snippet.html content=tabs_icons_example horizontal=true more=true %} {% include snippet.html content=tabs_medium_example horizontal=true more=true %}
{% include anchor.html name="Sizes" %} {% include snippet.html content=tabs_large_example horizontal=true more=true %}
<div class="content">
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
</div>
{% include snippet.html content=tabs_small_example horizontal=true more=true %} {% include anchor.html name="Styles" %}
{% include snippet.html content=tabs_medium_example horizontal=true more=true %} <div class="content">
If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
</div>
{% include snippet.html content=tabs_large_example horizontal=true more=true %} {% include snippet.html content=tabs_boxed_example horizontal=true more=true %}
{% include anchor.html name="Styles" %} <p class="content">
If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
</p>
<div class="content"> {% include snippet.html content=tabs_toggle_example horizontal=true more=true %}
If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
</div>
{% include snippet.html content=tabs_boxed_example horizontal=true more=true %} {% include elements/new-tag.html version="0.6.2" %}
<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 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_example horizontal=true more=true %} {% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
{% include elements/new-tag.html version="0.6.2" %} <p class="content">
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
</p>
<p class="content"> {% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
If you use both <code>is-toggle</code> and <code>is-toggle-rounded</code>, the first and last items will be <strong>rounded</strong>.
</p>
{% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %} {% include anchor.html name="Combining" %}
<p class="content"> <div class="content">
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>. <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> </div>
{% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %} {% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
{% include anchor.html name="Combining" %} {% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
<div class="content"> {% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
<p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
</div>
{% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %} {% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
{% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %} {% include variables.html type='component' %}
{% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
{% include variables.html type='component' %}
</div>
</section>