mirror of
https://github.com/jgthms/bulma
synced 2026-03-16 18:44:28 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
@@ -1,13 +1,14 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: breadcrumb
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-breadcrumb
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-breadcrumb
|
||||
meta:
|
||||
variables: true
|
||||
colors: false
|
||||
@@ -23,9 +24,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_centered_example %}
|
||||
{% endcapture %} {% capture breadcrumb_centered_example %}
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -34,9 +33,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_right_example %}
|
||||
{% endcapture %} {% capture breadcrumb_right_example %}
|
||||
<nav class="breadcrumb is-right" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -45,9 +42,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_icons_example %}
|
||||
{% endcapture %} {% capture breadcrumb_icons_example %}
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
@@ -84,9 +79,7 @@ meta:
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_small_example %}
|
||||
{% endcapture %} {% capture breadcrumb_small_example %}
|
||||
<nav class="breadcrumb is-small" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -95,9 +88,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_medium_example %}
|
||||
{% endcapture %} {% capture breadcrumb_medium_example %}
|
||||
<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -106,9 +97,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_large_example %}
|
||||
{% endcapture %} {% capture breadcrumb_large_example %}
|
||||
<nav class="breadcrumb is-large" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -117,9 +106,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_arrow_example %}
|
||||
{% endcapture %} {% capture breadcrumb_arrow_example %}
|
||||
<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -128,9 +115,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_bullet_example %}
|
||||
{% endcapture %} {% capture breadcrumb_bullet_example %}
|
||||
<nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -139,9 +124,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_dot_example %}
|
||||
{% endcapture %} {% capture breadcrumb_dot_example %}
|
||||
<nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -150,9 +133,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_succeeds_example %}
|
||||
{% endcapture %} {% capture breadcrumb_succeeds_example %}
|
||||
<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -165,56 +146,73 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma <strong>breadcrumb</strong> is a simple navigation component that only requires a <code>breadcrumb</code> container and a <code>ul</code> list. The dividers are automatically created in the content of the <code>::before</code> pseudo-element of <code>li</code> tags.
|
||||
The Bulma <strong>breadcrumb</strong> is a simple navigation component that
|
||||
only requires a <code>breadcrumb</code> container and a
|
||||
<code>ul</code> list. 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>
|
||||
|
||||
<hr>
|
||||
{% include elements/snippet.html content=breadcrumb_example horizontal=true clipped=true %}
|
||||
<hr />
|
||||
|
||||
{% include elements/anchor.html name="Alignment" %}
|
||||
{% include docs/elements/snippet.html content=breadcrumb_example horizontal=true
|
||||
clipped=true %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Alignment" %}
|
||||
|
||||
<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>
|
||||
|
||||
{% include elements/snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/snippet.html content=breadcrumb_right_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/anchor.html name="Icons" %}
|
||||
{% include docs/elements/snippet.html content=breadcrumb_centered_example
|
||||
horizontal=true clipped=true %} {% include docs/elements/snippet.html
|
||||
content=breadcrumb_right_example horizontal=true clipped=true %} {% include
|
||||
docs/elements/anchor.html name="Icons" %}
|
||||
|
||||
<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>
|
||||
|
||||
{% include elements/snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/anchor.html name="Alternative separators" %}
|
||||
{% include docs/elements/snippet.html content=breadcrumb_icons_example
|
||||
horizontal=true clipped=true %} {% include docs/elements/anchor.html
|
||||
name="Alternative separators" %}
|
||||
|
||||
<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>
|
||||
|
||||
{% include elements/snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% include docs/elements/snippet.html content=breadcrumb_arrow_example
|
||||
horizontal=true clipped=true %} {% include docs/elements/snippet.html
|
||||
content=breadcrumb_bullet_example horizontal=true clipped=true %} {% include
|
||||
docs/elements/snippet.html content=breadcrumb_dot_example horizontal=true
|
||||
clipped=true %} {% include docs/elements/snippet.html
|
||||
content=breadcrumb_succeeds_example horizontal=true clipped=true %} {% include
|
||||
docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
|
||||
<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 elements/snippet.html content=breadcrumb_small_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
{% include docs/elements/snippet.html content=breadcrumb_small_example
|
||||
horizontal=true clipped=true %} {% include docs/elements/snippet.html
|
||||
content=breadcrumb_medium_example horizontal=true clipped=true %} {% include
|
||||
docs/elements/snippet.html content=breadcrumb_large_example horizontal=true
|
||||
clipped=true %}
|
||||
|
||||
@@ -1,31 +1,37 @@
|
||||
---
|
||||
title: Card
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: card
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-card
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-card
|
||||
meta:
|
||||
variables: true
|
||||
colors: false
|
||||
sizes: false
|
||||
---
|
||||
|
||||
{% capture card_example %}
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="Placeholder image">
|
||||
<img
|
||||
src="{{site.url}}/assets/images/placeholders/1280x960.png"
|
||||
alt="Placeholder image"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-48x48">
|
||||
<img src="{{site.url}}/images/placeholders/96x96.png" alt="Placeholder image">
|
||||
<img
|
||||
src="{{site.url}}/assets/images/placeholders/96x96.png"
|
||||
alt="Placeholder image"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
@@ -35,22 +41,19 @@ meta:
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
|
||||
<a href="#">#css</a> <a href="#">#responsive</a>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
|
||||
iaculis mauris. <a>@bulmaio</a>. <a href="#">#css</a>
|
||||
<a href="#">#responsive</a>
|
||||
<br />
|
||||
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture card_header_example %}
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Component
|
||||
</p>
|
||||
<p class="card-header-title">Component</p>
|
||||
<button class="card-header-icon" aria-label="more options">
|
||||
<span class="icon">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
@@ -59,9 +62,10 @@ meta:
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
|
||||
iaculis mauris.
|
||||
<a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
|
||||
<br>
|
||||
<br />
|
||||
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
|
||||
</div>
|
||||
</div>
|
||||
@@ -72,27 +76,26 @@ meta:
|
||||
</footer>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture card_title_example %}
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title">
|
||||
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Jeff Atwood
|
||||
“There are two hard things in computer science: cache invalidation, naming
|
||||
things, and off-by-one errors.”
|
||||
</p>
|
||||
<p class="subtitle">Jeff Atwood</p>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<p class="card-footer-item">
|
||||
<span>
|
||||
View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
|
||||
View on
|
||||
<a href="https://twitter.com/codinghorror/status/506010907021828096"
|
||||
>Twitter</a
|
||||
>
|
||||
</span>
|
||||
</p>
|
||||
<p class="card-footer-item">
|
||||
<span>
|
||||
Share on <a href="#">Facebook</a>
|
||||
</span>
|
||||
<span> Share on <a href="#">Facebook</a> </span>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -107,26 +110,16 @@ meta:
|
||||
<li>
|
||||
<code>card-header</code>: a horizontal bar with a shadow
|
||||
<ul>
|
||||
<li>
|
||||
<code>card-header-title</code>: a left-aligned bold text
|
||||
</li>
|
||||
<li>
|
||||
<code>card-header-icon</code>: a placeholder for an icon
|
||||
</li>
|
||||
<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>
|
||||
<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-image</code>: a fullwidth container for a responsive image</li>
|
||||
<li><code>card-content</code>: a multi-purpose container for <em>any</em> other element</li>
|
||||
<li>
|
||||
<code>card-footer</code>: a horizontal list of controls
|
||||
<ul>
|
||||
<li>
|
||||
<code>card-footer-item</code>: a repeatable list item
|
||||
</li>
|
||||
<li><code>card-footer-item</code>: a repeatable list item</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -135,15 +128,13 @@ meta:
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.
|
||||
</p>
|
||||
<p>You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=card_example size="1-2" %}
|
||||
{% include docs/elements/snippet.html content=card_example size="1-2" %}
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Card parts" %}
|
||||
{% include docs/elements/anchor.html name="Card parts" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>card-header</code> can have a <strong>title</strong> and a Bulma <code>icon</code>:</p>
|
||||
@@ -152,9 +143,7 @@ meta:
|
||||
{% capture card_image %}
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Card header
|
||||
</p>
|
||||
<p class="card-header-title">Card header</p>
|
||||
<button class="card-header-icon" aria-label="more options">
|
||||
<span class="icon">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
@@ -163,8 +152,10 @@ meta:
|
||||
</header>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=card_image size="1-2" %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=card_image
|
||||
size="1-2"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>card-image</code> is a container for a Bulma <code>image</code> element:</p>
|
||||
@@ -174,13 +165,18 @@ meta:
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="Placeholder image">
|
||||
<img
|
||||
src="{{site.url}}/assets/images/placeholders/1280x960.png"
|
||||
alt="Placeholder image"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=card_image size="1-2" %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=card_image
|
||||
size="1-2"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>card-content</code> is the main part, ideal for <strong>text content</strong>, thanks to its padding:</p>
|
||||
@@ -190,13 +186,18 @@ meta:
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
|
||||
Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec
|
||||
id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus
|
||||
et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis
|
||||
consectetur purus sit amet fermentum.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=card_image size="1-2" %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=card_image
|
||||
size="1-2"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>card-footer</code> acts as a list of for several <code>card-footer-item</code> elements:</p>
|
||||
@@ -211,12 +212,11 @@ meta:
|
||||
</footer>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=card_footer
|
||||
size="1-2"
|
||||
%}
|
||||
{% include docs/elements/anchor.html name="Examples" %}
|
||||
{% include docs/elements/snippet.html content=card_header_example size="1-2" %}
|
||||
{% include docs/elements/snippet.html content=card_title_example size="1-2" %}
|
||||
|
||||
{% include elements/snippet.html content=card_footer size="1-2" %}
|
||||
|
||||
{% include elements/anchor.html name="Examples" %}
|
||||
|
||||
{% include elements/snippet.html content=card_header_example size="1-2" %}
|
||||
{% include elements/snippet.html content=card_title_example size="1-2" %}
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
---
|
||||
title: Dropdown
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: dropdown
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-dropdown
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-dropdown
|
||||
meta:
|
||||
colors: false
|
||||
sizes: false
|
||||
@@ -26,28 +27,16 @@ meta:
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<a href="#" class="dropdown-item">
|
||||
Dropdown item
|
||||
</a>
|
||||
<a class="dropdown-item">
|
||||
Other dropdown item
|
||||
</a>
|
||||
<a href="#" class="dropdown-item is-active">
|
||||
Active dropdown item
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
Other dropdown item
|
||||
</a>
|
||||
<hr class="dropdown-divider">
|
||||
<a href="#" class="dropdown-item">
|
||||
With a divider
|
||||
</a>
|
||||
<a href="#" class="dropdown-item"> Dropdown item </a>
|
||||
<a class="dropdown-item"> Other dropdown item </a>
|
||||
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
|
||||
<a href="#" class="dropdown-item"> Other dropdown item </a>
|
||||
<hr class="dropdown-divider" />
|
||||
<a href="#" class="dropdown-item"> With a divider </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture dropdown_content_example %}
|
||||
{% endcapture %} {% capture dropdown_content_example %}
|
||||
<div class="dropdown is-active">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
|
||||
@@ -60,22 +49,21 @@ meta:
|
||||
<div class="dropdown-menu" id="dropdown-menu2" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item">
|
||||
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
|
||||
<p>
|
||||
You can insert <strong>any type of content</strong> within the
|
||||
dropdown menu.
|
||||
</p>
|
||||
</div>
|
||||
<hr class="dropdown-divider">
|
||||
<hr class="dropdown-divider" />
|
||||
<div class="dropdown-item">
|
||||
<p>You simply need to use a <code><div></code> instead.</p>
|
||||
</div>
|
||||
<hr class="dropdown-divider">
|
||||
<a href="#" class="dropdown-item">
|
||||
This is a link
|
||||
</a>
|
||||
<hr class="dropdown-divider" />
|
||||
<a href="#" class="dropdown-item"> This is a link </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture dropdown_click_example %}
|
||||
{% endcapture %} {% capture dropdown_click_example %}
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
|
||||
@@ -87,37 +75,19 @@ meta:
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<a href="#" class="dropdown-item">
|
||||
Overview
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
Modifiers
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
Grid
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
Form
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
Elements
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
Components
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="dropdown-divider">
|
||||
<a href="#" class="dropdown-item">
|
||||
More
|
||||
</a>
|
||||
<a href="#" class="dropdown-item"> Overview </a>
|
||||
<a href="#" class="dropdown-item"> Modifiers </a>
|
||||
<a href="#" class="dropdown-item"> Grid </a>
|
||||
<a href="#" class="dropdown-item"> Form </a>
|
||||
<a href="#" class="dropdown-item"> Elements </a>
|
||||
<a href="#" class="dropdown-item"> Components </a>
|
||||
<a href="#" class="dropdown-item"> Layout </a>
|
||||
<hr class="dropdown-divider" />
|
||||
<a href="#" class="dropdown-item"> More </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture dropdown_info_example %}
|
||||
{% endcapture %} {% capture dropdown_info_example %}
|
||||
<div class="dropdown is-hoverable">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
|
||||
@@ -130,14 +100,15 @@ meta:
|
||||
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item">
|
||||
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
|
||||
<p>
|
||||
You can insert <strong>any type of content</strong> within the
|
||||
dropdown menu.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture dropdown_left_example %}
|
||||
{% endcapture %} {% capture dropdown_left_example %}
|
||||
<div class="dropdown is-active">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu5">
|
||||
@@ -155,9 +126,7 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture dropdown_right_example %}
|
||||
{% endcapture %} {% capture dropdown_right_example %}
|
||||
<div class="dropdown is-right is-active">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu6">
|
||||
@@ -170,14 +139,15 @@ meta:
|
||||
<div class="dropdown-menu" id="dropdown-menu6" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item">
|
||||
<p>Add the <code>is-right</code> modifier for a <strong>right-aligned</strong> dropdown.</p>
|
||||
<p>
|
||||
Add the <code>is-right</code> modifier for a
|
||||
<strong>right-aligned</strong> dropdown.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture dropdown_up_example %}
|
||||
{% endcapture %} {% capture dropdown_up_example %}
|
||||
<div class="dropdown is-up">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu7">
|
||||
@@ -190,7 +160,10 @@ meta:
|
||||
<div class="dropdown-menu" id="dropdown-menu7" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item">
|
||||
<p>You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.</p>
|
||||
<p>
|
||||
You can add the <code>is-up</code> modifier to have a dropdown menu
|
||||
that appears above the dropdown button.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -199,7 +172,8 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
@@ -209,16 +183,21 @@ meta:
|
||||
<code>dropdown-trigger</code> the container for a <code>button</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>dropdown-menu</code> the toggable menu, <strong>hidden</strong> by default
|
||||
<code>dropdown-menu</code> the toggable menu,
|
||||
<strong>hidden</strong> by default
|
||||
<ul>
|
||||
<li>
|
||||
<code>dropdown-content</code> the dropdown <strong>box</strong>, with a white background and a shadow
|
||||
<code>dropdown-content</code> the dropdown <strong>box</strong>,
|
||||
with a white background and a shadow
|
||||
<ul>
|
||||
<li>
|
||||
<code>dropdown-item</code> each <strong>single item</strong> of the dropdown, which can either be a <code>a</code> or a <code>div</code>
|
||||
<code>dropdown-item</code> each
|
||||
<strong>single item</strong> of the dropdown, which can either
|
||||
be a <code>a</code> or a <code>div</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>dropdown-divider</code> a <strong>horizontal line</strong> to separate dropdown items
|
||||
<code>dropdown-divider</code> a
|
||||
<strong>horizontal line</strong> to separate dropdown items
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
@@ -229,64 +208,66 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=dropdown_example %}
|
||||
|
||||
{% include elements/anchor.html name="Dropdown content" %}
|
||||
{% include docs/elements/snippet.html content=dropdown_example %} {% include
|
||||
docs/elements/anchor.html name="Dropdown content" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
While the <code>dropdown-item</code> can be used as an anchor link <code><a></code>, you can also use a <code><div></code> and insert almost <strong>any type of content</strong>.
|
||||
While the <code>dropdown-item</code> can be used as an anchor link
|
||||
<code><a></code>, you can also use a <code><div></code> and
|
||||
insert almost <strong>any type of content</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=dropdown_content_example %}
|
||||
|
||||
{% include elements/anchor.html name="Hoverable or Toggable" %}
|
||||
{% include docs/elements/snippet.html content=dropdown_content_example %} {%
|
||||
include docs/elements/anchor.html name="Hoverable or Toggable" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>dropdown</code> component has <strong>2 additional modifiers</strong>
|
||||
The <code>dropdown</code> component has
|
||||
<strong>2 additional modifiers</strong>
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-hoverable</code>: the dropdown will show up when <strong>hovering</strong> the <code>dropdown-trigger</code>
|
||||
<code>is-hoverable</code>: the dropdown will show up when
|
||||
<strong>hovering</strong> the <code>dropdown-trigger</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-active</code>: the dropdown will show up <strong>all the time</strong>
|
||||
<code>is-active</code>: the dropdown will show up
|
||||
<strong>all the time</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="message is-success">
|
||||
<p class="message-body">
|
||||
While the CSS <code>:hover</code> implementation works perfectly, the <code>is-active</code> class is available for users who want to control the display of the dropdown with <strong>JavaScript</strong>.
|
||||
While the CSS <code>:hover</code> implementation works perfectly, the
|
||||
<code>is-active</code> class is available for users who want to control the
|
||||
display of the dropdown with <strong>JavaScript</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=dropdown_click_example more=true %}
|
||||
|
||||
{% include elements/snippet.html content=dropdown_info_example more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Right aligned" %}
|
||||
{% include docs/elements/snippet.html content=dropdown_click_example more=true
|
||||
%} {% include docs/elements/snippet.html content=dropdown_info_example more=true
|
||||
%} {% include docs/elements/anchor.html name="Right aligned" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add the <code>is-right</code> modifier to have a <strong>right-aligned</strong> dropdown.
|
||||
You can add the <code>is-right</code> modifier to have a
|
||||
<strong>right-aligned</strong> dropdown.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=dropdown_left_example more=true %}
|
||||
|
||||
{% include elements/snippet.html content=dropdown_right_example more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Dropup" %}
|
||||
{% include docs/elements/snippet.html content=dropdown_left_example more=true %}
|
||||
{% include docs/elements/snippet.html content=dropdown_right_example more=true
|
||||
%} {% include docs/elements/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.
|
||||
You can add the <code>is-up</code> modifier to have a dropdown menu that
|
||||
appears above the dropdown button.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=dropdown_up_example more=true %}
|
||||
{% include docs/elements/snippet.html content=dropdown_up_example more=true %}
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
---
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: level
|
||||
---
|
||||
|
||||
<meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/layout/level/">
|
||||
<meta
|
||||
http-equiv="refresh"
|
||||
content="0; url={{ site.url }}/documentation/layout/level/"
|
||||
/>
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
---
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: media-object
|
||||
---
|
||||
|
||||
<meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/layout/media-object/">
|
||||
<meta
|
||||
http-equiv="refresh"
|
||||
content="0; url={{ site.url }}/documentation/layout/media-object/"
|
||||
/>
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
---
|
||||
title: Menu
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: menu
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-menu
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-menu
|
||||
meta:
|
||||
colors: false
|
||||
sizes: false
|
||||
@@ -16,16 +17,12 @@ meta:
|
||||
|
||||
{% capture menu_example %}
|
||||
<aside class="menu">
|
||||
<p class="menu-label">
|
||||
General
|
||||
</p>
|
||||
<p class="menu-label">General</p>
|
||||
<ul class="menu-list">
|
||||
<li><a>Dashboard</a></li>
|
||||
<li><a>Customers</a></li>
|
||||
</ul>
|
||||
<p class="menu-label">
|
||||
Administration
|
||||
</p>
|
||||
<p class="menu-label">Administration</p>
|
||||
<ul class="menu-list">
|
||||
<li><a>Team Settings</a></li>
|
||||
<li>
|
||||
@@ -40,9 +37,7 @@ meta:
|
||||
<li><a>Cloud Storage Environment Settings</a></li>
|
||||
<li><a>Authentication</a></li>
|
||||
</ul>
|
||||
<p class="menu-label">
|
||||
Transactions
|
||||
</p>
|
||||
<p class="menu-label">Transactions</p>
|
||||
<ul class="menu-list">
|
||||
<li><a>Payments</a></li>
|
||||
<li><a>Transfers</a></li>
|
||||
@@ -53,21 +48,17 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma <code>menu</code> is a vertical navigation component that comprises:
|
||||
The Bulma <code>menu</code> is a vertical navigation component that
|
||||
comprises:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
the <code>menu</code> container
|
||||
</li>
|
||||
<li>
|
||||
informative <code>menu-label</code> labels
|
||||
</li>
|
||||
<li>the <code>menu</code> container</li>
|
||||
<li>informative <code>menu-label</code> labels</li>
|
||||
<li>
|
||||
interactive <code>menu-list</code> lists that can be nested up to 2 levels
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=menu_example size="one-third" %}
|
||||
{% include docs/elements/snippet.html content=menu_example size="one-third" %}
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
---
|
||||
title: Message
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: message
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-message
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-message
|
||||
meta:
|
||||
colors: true
|
||||
sizes: true
|
||||
@@ -21,168 +22,187 @@ meta:
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
|
||||
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
|
||||
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
|
||||
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
|
||||
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_dark_example %}
|
||||
{% endcapture %} {% capture message_dark_example %}
|
||||
<article class="message is-dark">
|
||||
<div class="message-header">
|
||||
<p>Dark</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
|
||||
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
|
||||
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
|
||||
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
|
||||
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_small %}
|
||||
{% endcapture %} {% capture message_small %}
|
||||
<article class="message is-small">
|
||||
<div class="message-header">
|
||||
<p>Small message</p>
|
||||
<button class="delete is-small" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
|
||||
Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_normal %}
|
||||
{% endcapture %} {% capture message_normal %}
|
||||
<article class="message">
|
||||
<div class="message-header">
|
||||
<p>Normal message</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
|
||||
Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_medium %}
|
||||
{% endcapture %} {% capture message_medium %}
|
||||
<article class="message is-medium">
|
||||
<div class="message-header">
|
||||
<p>Medium message</p>
|
||||
<button class="delete is-medium" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
|
||||
Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_large %}
|
||||
{% endcapture %} {% capture message_large %}
|
||||
<article class="message is-large">
|
||||
<div class="message-header">
|
||||
<p>Large message</p>
|
||||
<button class="delete is-large" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
|
||||
Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_body_example %}
|
||||
{% endcapture %} {% capture message_body_example %}
|
||||
<article class="message">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
|
||||
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
|
||||
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
|
||||
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
|
||||
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_body_dark_example %}
|
||||
{% endcapture %} {% capture message_body_dark_example %}
|
||||
<article class="message is-dark">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
|
||||
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
|
||||
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
|
||||
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
|
||||
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma <code>message</code> is a multi-part component:
|
||||
</p>
|
||||
<p>The Bulma <code>message</code> is a multi-part component:</p>
|
||||
<ul>
|
||||
<li>the <code>message</code> container</li>
|
||||
<li>
|
||||
the <code>message</code> container
|
||||
</li>
|
||||
<li>
|
||||
the optional <code>message-header</code> that can hold a title and a <code>delete</code> element
|
||||
</li>
|
||||
<li>
|
||||
the <code>message-body</code> for the longer body of the message
|
||||
the optional <code>message-header</code> that can hold a title and a
|
||||
<code>delete</code> element
|
||||
</li>
|
||||
<li>the <code>message-body</code> for the longer body of the message</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=message_example %}
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
{% include docs/elements/snippet.html content=message_example %} {% include
|
||||
docs/elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The message component is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
|
||||
The message component is available in all the
|
||||
<strong>different colors</strong> defined by the
|
||||
<a href="{{ site.data.links.by_id.customize-variables.path }}"
|
||||
><code>$colors</code> Sass map</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=message_dark_example more=true %}
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
{% include docs/elements/snippet.html content=message_dark_example more=true %}
|
||||
{% for color in site.data.colors.justColors %} {% capture foobar %}
|
||||
<article class="message is-{{ color }}">
|
||||
<div class="message-header">
|
||||
<p>{{ color | capitalize }}</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
|
||||
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
|
||||
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
|
||||
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
|
||||
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar more=true %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Message body only" %}
|
||||
{% endcapture %} {% include docs/elements/snippet.html content=foobar more=true
|
||||
%} {% endfor %} {% include docs/elements/anchor.html name="Message body only" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can remove the <code>message-header</code> if you don't need it, which will add a left border to the <code>message-body</code>:
|
||||
You can remove the <code>message-header</code> if you don't need it, which
|
||||
will add a left border to the <code>message-body</code>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=message_body_example %}
|
||||
|
||||
{% include elements/snippet.html content=message_body_dark_example %}
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
{% include docs/elements/snippet.html content=message_body_example %} {% include
|
||||
docs/elements/snippet.html content=message_body_dark_example %} {% for color in
|
||||
site.data.colors.justColors %} {% capture foobar %}
|
||||
<article class="message is-{{ color }}">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
|
||||
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
|
||||
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
|
||||
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
|
||||
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% endcapture %} {% include docs/elements/snippet.html content=foobar %} {%
|
||||
endfor %} {% include docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add one of <strong>3 size modifiers</strong> to the <code>message</code> component:
|
||||
You can add one of <strong>3 size modifiers</strong> to the
|
||||
<code>message</code> component:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=message_small %}
|
||||
|
||||
{% include elements/snippet.html content=message_normal %}
|
||||
|
||||
{% include elements/snippet.html content=message_medium %}
|
||||
|
||||
{% include elements/snippet.html content=message_large %}
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
{% include docs/elements/snippet.html content=message_small %} {% include
|
||||
docs/elements/snippet.html content=message_normal %} {% include
|
||||
docs/elements/snippet.html content=message_medium %} {% include
|
||||
docs/elements/snippet.html content=message_large %} {% include
|
||||
docs/components/variables.html type='component' %}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Modal
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: modal
|
||||
breadcrumb:
|
||||
@@ -12,8 +13,12 @@ meta:
|
||||
colors: false
|
||||
sizes: false
|
||||
variables: true
|
||||
modals:
|
||||
- docs/modals/example-modal.html
|
||||
- docs/modals/example-modal-bis.html
|
||||
- docs/modals/example-modal-ter.html
|
||||
- docs/modals/example-js-modal.html
|
||||
---
|
||||
|
||||
{% capture modal %}
|
||||
<div class="modal">
|
||||
<div class="modal-background"></div>
|
||||
@@ -29,7 +34,7 @@ meta:
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<p class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="">
|
||||
<img src="{{site.url}}/assets/images/placeholders/1280x960.png" alt="">
|
||||
</p>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
@@ -48,8 +53,10 @@ meta:
|
||||
<!-- Content ... -->
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<button class="button is-success">Save changes</button>
|
||||
<button class="button">Cancel</button>
|
||||
<div class="buttons">
|
||||
<button class="button is-success">Save changes</button>
|
||||
<button class="button">Cancel</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
@@ -135,85 +142,100 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
<li>
|
||||
<code>modal</code>: the main container
|
||||
<ul>
|
||||
<li><code>modal-background</code>: a transparent overlay that can act as a click target to close the modal</li>
|
||||
<li>
|
||||
<code>modal-background</code>: a transparent overlay that can act as a click target to close the modal
|
||||
</li>
|
||||
<li>
|
||||
<code>modal-content</code>: a horizontally and vertically centered container, with a maximum width of 640px, in which you can include <em>any</em> content
|
||||
</li>
|
||||
<li>
|
||||
<code>modal-close</code>: a simple cross located in the top right corner
|
||||
<code>modal-content</code>: a horizontally and vertically centered container, with a maximum width of 640px,
|
||||
in which you can include <em>any</em> content
|
||||
</li>
|
||||
<li><code>modal-close</code>: a simple cross located in the top right corner</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<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 js-modal-trigger" data-target="modal" aria-haspopup="true">
|
||||
Launch example modal
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ modal }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- modal -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To <strong>activate</strong> the modal, just add the <code>is-active</code> modifier on the <code>.modal</code> container.
|
||||
You may also want to add <code>is-clipped</code> modifier to a containing element (usually <code>html</code>) to stop scroll overflow.
|
||||
To <strong>activate</strong> the modal, just add the <code>is-active</code> modifier on the
|
||||
<code>.modal</code> container. You may also want to add <code>is-clipped</code> modifier to a containing element
|
||||
(usually <code>html</code>) to stop scroll overflow.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-header">
|
||||
JavaScript implementation example
|
||||
</div>
|
||||
<div class="message-header">JavaScript implementation example</div>
|
||||
<div class="message-body">
|
||||
Bulma does not include any JavaScript. However, this documentation provides a <a href="#javascript-implementation-example">JS implementation example</a> that you are free to use.
|
||||
Bulma does not include any JavaScript. However, this documentation provides a
|
||||
<a href="#javascript-implementation-example">JS implementation example</a> that you are free to use.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Image modal" %}
|
||||
{% include docs/elements/anchor.html name="Image modal" %}
|
||||
|
||||
<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>
|
||||
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 js-modal-trigger" data-target="modal-bis">Launch image modal</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ image_modal }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- image_modal -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Modal card" %}
|
||||
{% include docs/elements/anchor.html name="Modal card" %}
|
||||
|
||||
<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>
|
||||
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 js-modal-trigger"
|
||||
data-target="modal-ter"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
Launch card modal
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ modal_card }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- modal_card -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="JavaScript implementation example" %}
|
||||
{% include docs/elements/anchor.html name="JavaScript implementation example" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma package <strong>does not come with any JavaScript</strong>. Here is however an implementation example, which sets the <code>click</code> handlers for custom elements, in vanilla JavaScript.
|
||||
The Bulma package <strong>does not come with any JavaScript</strong>. Here is however an implementation example,
|
||||
which sets the <code>click</code> handlers for custom elements, in vanilla JavaScript.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
There are 3 parts to this implementation:
|
||||
</p>
|
||||
<p>There are 3 parts to this implementation:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
add the HTML for the <strong>modal</strong> (this modal is hidden by default)
|
||||
</li>
|
||||
<li>add the HTML for the <strong>modal</strong> (this modal is hidden by default)</li>
|
||||
<li>
|
||||
add the HTML for a button to <strong>trigger</strong> the modal (you can style this button however you want)
|
||||
</li>
|
||||
<li>
|
||||
add the JS code to add the <code>click</code> event on the <strong>trigger</strong> to open the <strong>modal</strong>
|
||||
add the JS code to add the <code>click</code> event on the <strong>trigger</strong> to open the
|
||||
<strong>modal</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -221,36 +243,35 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
<div class="content">
|
||||
<h4>1. Add the HTML for the modal</h4>
|
||||
|
||||
<p>
|
||||
At the end of your page, before the closing <code></body></code> tag, add the following HTML snippet:
|
||||
</p>
|
||||
<p>At the end of your page, before the closing <code></body></code> tag, at the following HTML snippet:</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ modal_js_html }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- modal_js_html -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>id</code> attribute's value must be <strong>unique</strong>.
|
||||
</p>
|
||||
<p>The <code>id</code> attribute's value must be <strong>unique</strong>.</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h4>2. Add the HTML for the trigger</h4>
|
||||
|
||||
<p>
|
||||
Somewhere on your page, add the following HTML button:
|
||||
</p>
|
||||
<p>Somewhere on your page, add the following HTML button:</p>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
{{ modal_js_trigger }}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ modal_js_trigger }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- modal_js_trigger -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can style it however you want, as long as it has the <code>js-modal-trigger</code> CSS class and the appropriate <code>data-target</code> value. For example, you can add the <code>button is-primary</code> Bulma classes:
|
||||
You can style it however you want, as long as it has the <code>js-modal-trigger</code> CSS class and the appropriate
|
||||
<code>data-target</code> value. For example, you can add the <code>button is-primary</code> Bulma classes:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -261,124 +282,26 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
<div class="content">
|
||||
<h4>3. Add the JS for the trigger</h4>
|
||||
|
||||
<p>
|
||||
In a <code>script</code> element (or in a seperate <code>.js</code> file), add the following JS code:
|
||||
</p>
|
||||
<p>In a <code>script</code> element (or in a seperate <code>.js</code> file), add the following JS code:</p>
|
||||
</div>
|
||||
|
||||
{% highlight javascript %}{{ modal_js_code }}{% endhighlight %}
|
||||
{% highlight javascript -%}
|
||||
{{- modal_js_code -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
As long as you can toggle the <code>is-active</code> modifier class on the <code>modal</code> element, you can choose how you want to implement it.
|
||||
As long as you can toggle the <code>is-active</code> modifier class on the <code>modal</code> element, you can
|
||||
choose how you want to implement it.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
<div id="modal" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<div class="box">
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a class="level-item" aria-label="retweet">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-retweet" aria-hidden="true"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="level-item" aria-label="like">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-heart" aria-hidden="true"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
|
||||
<div id="modal-bis" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<p class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="">
|
||||
</p>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
|
||||
<div id="modal-ter" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Modal title</p>
|
||||
<button class="delete" aria-label="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<div class="content">
|
||||
<h1>Hello World</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
|
||||
<h2>Second level</h2>
|
||||
<p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
|
||||
<ul>
|
||||
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
|
||||
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
|
||||
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
|
||||
<li>Ut non enim metus.</li>
|
||||
</ul>
|
||||
<h3>Third level</h3>
|
||||
<p>Quisque ante lacus, malesuada ac auctor vitae, congue <a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.</p>
|
||||
<ol>
|
||||
<li>Donec blandit a lorem id convallis.</li>
|
||||
<li>Cras gravida arcu at diam gravida gravida.</li>
|
||||
<li>Integer in volutpat libero.</li>
|
||||
<li>Donec a diam tellus.</li>
|
||||
<li>Aenean nec tortor orci.</li>
|
||||
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
|
||||
<li>Vivamus maximus ultricies pulvinar.</li>
|
||||
</ol>
|
||||
<blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
|
||||
<p>Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.</p>
|
||||
<p>Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.</p>
|
||||
<p>Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.</p>
|
||||
<h4>Fourth level</h4>
|
||||
<p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
|
||||
<p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
|
||||
<p>Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.</p>
|
||||
<h5>Fifth level</h5>
|
||||
<p>Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.</p>
|
||||
<h6>Sixth level</h6>
|
||||
<p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<button class="button is-success">Save changes</button>
|
||||
<button class="button">Cancel</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ modal_js_html }}
|
||||
|
||||
<script type="text/javascript">
|
||||
{{ modal_js_code }}
|
||||
{
|
||||
{
|
||||
modal_js_code;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
---
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: nav
|
||||
---
|
||||
|
||||
{% include subnav/subnav-components.html %}
|
||||
{% include docs/subnav/subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<div class="message is-danger">
|
||||
<div class="message-body">
|
||||
<p>This component has been <strong>deprecated</strong>.</p>
|
||||
@@ -17,7 +16,12 @@ doc-subtab: nav
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-body">
|
||||
<p>While both <code>.nav</code> and <code>.navbar</code> currently co-exist to ensure backwards compatibility, the <code>.nav</code> will probably be deleted in an upcoming update, so you should start using <a href="{{ site.url }}/documentation/components/navbar/">the new navbar</a> instead.</p>
|
||||
<p>
|
||||
While both <code>.nav</code> and <code>.navbar</code> currently co-exist to ensure backwards compatibility,
|
||||
the <code>.nav</code> will probably be deleted in an upcoming update, so you should start using
|
||||
<a href="{{ site.url }}/documentation/components/navbar/">the new navbar</a>
|
||||
instead.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -29,100 +33,92 @@ doc-subtab: nav
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>nav</code> container can have <strong>3 parts</strong>:
|
||||
</p>
|
||||
<p>The <code>nav</code> container can have <strong>3 parts</strong>:</p>
|
||||
<ul>
|
||||
<li><code>nav-left</code></li>
|
||||
<li><code>nav-center</code></li>
|
||||
<li><code>nav-right</code></li>
|
||||
</ul>
|
||||
<p>
|
||||
Each nav item needs to be wrapped in a <code>nav-item</code> element.
|
||||
</p>
|
||||
<p>
|
||||
For responsiveness, <strong>2 additional</strong> classes are available:
|
||||
</p>
|
||||
<p>Each nav item needs to be wrapped in a <code>nav-item</code> element.</p>
|
||||
<p>For responsiveness, <strong>2 additional</strong> classes are available:</p>
|
||||
<ul>
|
||||
<li><code>nav-toggle</code> for the hamburger menu on mobile</li>
|
||||
<li><code>nav-menu</code> for menu that is collapsable on mobile (you can combine it with <code>nav-right</code>)</li>
|
||||
<li>toggle <code>is-active</code> on <code>nav-toggle</code> and <code>nav-menu</code> when <code>nav-toggle</code> was clicked</li>
|
||||
<li>
|
||||
<code>nav-menu</code> for menu that is collapsable on mobile (you can combine it with <code>nav-right</code>)
|
||||
</li>
|
||||
<li>
|
||||
toggle <code>is-active</code> on <code>nav-toggle</code> and <code>nav-menu</code> when
|
||||
<code>nav-toggle</code> was clicked
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% capture nav_example %}
|
||||
<nav class="nav">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma logo">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-center">
|
||||
<a class="nav-item">
|
||||
<span class="icon">
|
||||
<i class="fab fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- This "nav-toggle" hamburger menu is only visible on mobile -->
|
||||
<!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
|
||||
<!-- This "nav-menu" is hidden on mobile -->
|
||||
<!-- Add the modifier "is-active" to display it on mobile -->
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item">
|
||||
Home
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Documentation
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Blog
|
||||
</a>
|
||||
|
||||
<div class="nav-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a class="button" >
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary">
|
||||
<span class="icon">
|
||||
<i class="fas fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
{% capture nav_example %}
|
||||
<nav class="nav">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="{{ site.url }}/assets/images/bulma-logo.png" alt="Bulma logo" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{{nav_example}}
|
||||
</div>
|
||||
<div class="nav-center">
|
||||
<a class="nav-item">
|
||||
<span class="icon">
|
||||
<i class="fab fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
{{nav_example}}
|
||||
{% endhighlight %}
|
||||
<!-- This "nav-toggle" hamburger menu is only visible on mobile -->
|
||||
<!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
|
||||
<!-- This "nav-menu" is hidden on mobile -->
|
||||
<!-- Add the modifier "is-active" to display it on mobile -->
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item"> Home </a>
|
||||
<a class="nav-item"> Documentation </a>
|
||||
<a class="nav-item"> Blog </a>
|
||||
|
||||
<div class="nav-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary">
|
||||
<span class="icon">
|
||||
<i class="fas fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="bd-example is-paddingless">{{ nav_example }}</div>
|
||||
|
||||
{% highlight html %}
|
||||
{{ nav_example }}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
@@ -130,56 +126,61 @@ doc-subtab: nav
|
||||
|
||||
<div class="content">
|
||||
<ul>
|
||||
<li>the <code>nav</code> container can have a <strong>shadow</strong> by adding the <code>has-shadow</code> modifier</li>
|
||||
<li>the <code>nav-item</code> can become <strong>active</strong> by adding the <code>is-active</code> modifier</li>
|
||||
<li>
|
||||
the <code>nav</code> container can have a <strong>shadow</strong> by adding the
|
||||
<code>has-shadow</code> modifier
|
||||
</li>
|
||||
<li>
|
||||
the <code>nav-item</code> can become <strong>active</strong> by adding the <code>is-active</code> modifier
|
||||
</li>
|
||||
<li>the <code>nav-item</code> can become a <strong>tab</strong> by adding the <code>is-tab</code> modifier</li>
|
||||
</ul>
|
||||
<p>
|
||||
To optimise the space on desktop, but also allow the mobile view to be usable, you can <strong>duplicate</strong> nav items in both <code>nav-left</code> and <code>nav-right</code>, and show/hide them with <a href="{{site.url}}/documentation/modifiers/responsive-helpers/">responsive helpers</a>.
|
||||
To optimise the space on desktop, but also allow the mobile view to be usable, you can
|
||||
<strong>duplicate</strong> nav items in both <code>nav-left</code> and <code>nav-right</code>, and show/hide
|
||||
them with <a href="{{site.url}}/documentation/modifiers/responsive-helpers/">responsive helpers</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% capture nav_tabs_example %}
|
||||
<nav class="nav has-shadow">
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma logo">
|
||||
</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile is-active">Home</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">Features</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">Pricing</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">About</a>
|
||||
{% capture nav_tabs_example %}
|
||||
<nav class="nav has-shadow">
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="{{ site.url }}/assets/images/bulma-logo.png" alt="Bulma logo" />
|
||||
</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile is-active">Home</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">Features</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">Pricing</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">About</a>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item is-tab is-hidden-tablet is-active">Home</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">Features</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">Pricing</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">About</a>
|
||||
<a class="nav-item is-tab">
|
||||
<figure class="image is-16x16" style="margin-right: 8px">
|
||||
<img src="{{site.url}}/assets/images/jgthms.png" />
|
||||
</figure>
|
||||
Profile
|
||||
</a>
|
||||
<a class="nav-item is-tab">Log out</a>
|
||||
</div>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item is-tab is-hidden-tablet is-active">Home</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">Features</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">Pricing</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">About</a>
|
||||
<a class="nav-item is-tab">
|
||||
<figure class="image is-16x16" style="margin-right: 8px;">
|
||||
<img src="{{site.url}}/images/jgthms.png">
|
||||
</figure>
|
||||
Profile
|
||||
</a>
|
||||
<a class="nav-item is-tab">Log out</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{{nav_tabs_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
{{nav_tabs_example}}
|
||||
{% endhighlight %}
|
||||
<div class="bd-example is-paddingless">{{ nav_tabs_example }}</div>
|
||||
|
||||
{% highlight html %}
|
||||
{{ nav_tabs_example }}
|
||||
{% endhighlight %}
|
||||
</section>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
---
|
||||
title: Navbar
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
fullwidth: true
|
||||
doc-tab: components
|
||||
doc-subtab: navbar
|
||||
breadcrumb:
|
||||
@@ -12,19 +14,22 @@ meta:
|
||||
colors: true
|
||||
sizes: false
|
||||
variables: true
|
||||
modals:
|
||||
- docs/examples/navbar-bottom.html
|
||||
---
|
||||
|
||||
{% capture navbar_basic_example %}
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28">
|
||||
{% include svg/bulma-logo.html %}
|
||||
</a>
|
||||
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -47,7 +52,7 @@ meta:
|
||||
<a class="navbar-item">
|
||||
About
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
<a class="navbar-item is-selected">
|
||||
Jobs
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
@@ -78,7 +83,7 @@ meta:
|
||||
{% endcapture %}
|
||||
|
||||
{% capture navbar_example %}
|
||||
{% include examples/navbar.html id="Default" %}
|
||||
{% include docs/examples/navbar.html id="Default" %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture navbar_brand_example %}
|
||||
@@ -90,7 +95,17 @@ meta:
|
||||
{% endcapture %}
|
||||
|
||||
{% capture navbar_burger_example %}
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
|
||||
<a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture navbar_burger_active_example %}
|
||||
<a class="navbar-burger is-active" role="button" aria-label="menu" aria-expanded="false">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
@@ -101,13 +116,14 @@ meta:
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
|
||||
{% include svg/bulma-logo.html %}
|
||||
</a>
|
||||
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -154,7 +170,7 @@ meta:
|
||||
|
||||
{% capture navbar_item_brand_example %}
|
||||
<a class="navbar-item">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28" alt="Bulma">
|
||||
{% include svg/bulma-logo.html %}
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
@@ -202,7 +218,7 @@ meta:
|
||||
{% endcapture %}
|
||||
|
||||
{% capture navbar_transparent_example %}
|
||||
{% include examples/navbar.html transparent=true boxed=true id="TransparentExample" %}
|
||||
{% include docs/examples/navbar.html transparent=true boxed=true id="TransparentExample" %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture navbar_dropdown_example %}
|
||||
@@ -423,9 +439,7 @@ meta:
|
||||
{% capture navbar_dropdown_default_example %}
|
||||
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
|
||||
<a class="navbar-item">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png"
|
||||
alt="{{ site.data.meta.title }}"
|
||||
width="112" height="28">
|
||||
{% include svg/bulma-logo.html %}
|
||||
</a>
|
||||
|
||||
<div class="navbar-item has-dropdown is-active">
|
||||
@@ -466,9 +480,7 @@ meta:
|
||||
{% capture navbar_dropdown_boxed_example %}
|
||||
<nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
|
||||
<a class="navbar-item">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png"
|
||||
alt="{{ site.data.meta.title }}"
|
||||
width="112" height="28">
|
||||
{% include svg/bulma-logo.html %}
|
||||
</a>
|
||||
|
||||
<div class="navbar-item has-dropdown is-active">
|
||||
@@ -509,9 +521,7 @@ meta:
|
||||
{% capture navbar_dropdown_item_active_example %}
|
||||
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
|
||||
<a class="navbar-item">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png"
|
||||
alt="{{ site.data.meta.title }}"
|
||||
width="112" height="28">
|
||||
{% include svg/bulma-logo.html %}
|
||||
</a>
|
||||
|
||||
<div class="navbar-item has-dropdown is-active">
|
||||
@@ -523,7 +533,7 @@ meta:
|
||||
<a class="navbar-item">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item is-active">
|
||||
<a class="navbar-item is-selected">
|
||||
Elements
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
@@ -558,6 +568,7 @@ meta:
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-menu" id="navMenu">
|
||||
@@ -659,7 +670,7 @@ $(document).ready(function() {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Basic Navbar" %}
|
||||
{% include docs/elements/anchor.html name="Basic Navbar" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -673,7 +684,7 @@ $(document).ready(function() {
|
||||
|
||||
{% highlight html %}{{ navbar_basic_example }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Navbar brand" %}
|
||||
{% include docs/elements/anchor.html name="Navbar brand" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -693,7 +704,7 @@ $(document).ready(function() {
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The navbar brand is <strong>always visible</strong>: on both touch devices {% include bp/touch.html %} and desktop {% include bp/desktop.html %}. As a result, it is recommended to only use a few navbar items to avoid <strong>overflowing</strong> horizontally on small devices.
|
||||
The navbar brand is <strong>always visible</strong>: on both touch devices {% include docs/bp/touch.html %} and desktop {% include docs/bp/desktop.html %}. As a result, it is recommended to only use a few navbar items to avoid <strong>overflowing</strong> horizontally on small devices.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -705,11 +716,11 @@ $(document).ready(function() {
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs.
|
||||
On desktop {% include docs/bp/desktop.html %}, the navbar brand will only take up the space it needs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Navbar burger" %}
|
||||
{% include docs/elements/anchor.html name="Navbar burger" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -717,15 +728,22 @@ $(document).ready(function() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example is-paddingless">
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" style="display: flex;">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
<div class="example is-paddingless" style="margin-bottom: 1.5rem; width: 2.5rem;">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
|
||||
<div class="column">
|
||||
{% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -733,15 +751,24 @@ $(document).ready(function() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example is-paddingless">
|
||||
<a role="button" class="navbar-burger is-active" aria-label="menu" aria-expanded="false" style="display: flex;">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
<div class="example is-paddingless" style="width: 2.5rem;">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
{% highlight html %}{{ navbar_burger_active_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Navbar menu" %}
|
||||
{% include docs/elements/anchor.html name="Navbar menu" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -753,7 +780,7 @@ $(document).ready(function() {
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>navbar-menu</code> is <strong>hidden on touch devices</strong> {% include bp/touch.html %}. You need to add the modifier class <code>is-active</code> to display it.
|
||||
The <code>navbar-menu</code> is <strong>hidden on touch devices</strong> {% include docs/bp/touch.html %}. You need to add the modifier class <code>is-active</code> to display it.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -761,7 +788,7 @@ $(document).ready(function() {
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
On desktop {% include bp/desktop.html %}, the <code>navbar-menu</code> will <strong>fill up the space</strong> available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:
|
||||
On desktop {% include docs/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>
|
||||
<ul>
|
||||
<li>
|
||||
@@ -802,14 +829,14 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Navbar start and navbar end" %}
|
||||
{% include docs/elements/anchor.html name="Navbar start and navbar end" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>navbar-start</code> and <code>navbar-end</code> are the two direct and only children of the <code>navbar-menu</code>.
|
||||
</p>
|
||||
<p>
|
||||
On desktop {% include bp/desktop.html %}:
|
||||
On desktop {% include docs/bp/desktop.html %}:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
@@ -826,7 +853,7 @@ $(document).ready(function() {
|
||||
|
||||
{% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Navbar item" %}
|
||||
{% include docs/elements/anchor.html name="Navbar item" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -889,7 +916,7 @@ $(document).ready(function() {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Transparent navbar" %}
|
||||
{% include docs/elements/anchor.html name="Transparent navbar" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -897,9 +924,9 @@ $(document).ready(function() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
|
||||
{% include docs/elements/snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Fixed navbar" %}
|
||||
{% include docs/elements/anchor.html name="Fixed navbar" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -925,7 +952,35 @@ $(document).ready(function() {
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Dropdown menu" %}
|
||||
<script type="text/javascript">
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const rootEl = document.documentElement;
|
||||
const navbarBottomEl = document.getElementById('navbarBottom');
|
||||
const fixBottomEl = document.getElementById('navbarFixBottom');
|
||||
const fixBottomElText = document.getElementById('navbarFixBottomText');
|
||||
let fixedBottom = false;
|
||||
|
||||
fixBottomEl.addEventListener('click', event => {
|
||||
fixedBottom = !fixedBottom;
|
||||
|
||||
if (fixedBottom) {
|
||||
fixBottomEl.className = 'button is-success';
|
||||
fixBottomElText.innerHTML = 'Hide';
|
||||
rootEl.classList.add('has-navbar-fixed-bottom');
|
||||
navbarBottomEl.classList.remove('is-hidden');
|
||||
} else {
|
||||
fixBottomEl.className = 'button is-link';
|
||||
fixBottomElText.innerHTML = 'Show';
|
||||
rootEl.classList.remove('has-navbar-fixed-bottom');
|
||||
navbarBottomEl.classList.add('is-hidden');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
{% include docs/elements/anchor.html name="Dropdown menu" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -962,7 +1017,7 @@ $(document).ready(function() {
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>navbar-dropdown</code> is visible on touch devices {% include bp/touch.html %} but hidden on desktop {% include bp/desktop.html %}. <em>How</em> the dropdown is displayed on desktop depends on the parent's class.
|
||||
The <code>navbar-dropdown</code> is visible on touch devices {% include docs/bp/touch.html %} but hidden on desktop {% include docs/bp/desktop.html %}. <em>How</em> the dropdown is displayed on desktop depends on the parent's class.
|
||||
</p>
|
||||
<p>
|
||||
The <code>navbar-item</code> with the <code>has-dropdown</code> modifier, has <strong>2 additional modifiers</strong>
|
||||
@@ -1211,12 +1266,7 @@ $(document).ready(function() {
|
||||
|
||||
{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">New!</span>
|
||||
<span class="tag is-info">0.5.2</span>
|
||||
</div>
|
||||
{% include docs/elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -1238,47 +1288,51 @@ $(document).ready(function() {
|
||||
|
||||
{% highlight html %}{{ navbar_color_markup }}{% endhighlight %}
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="primary" %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar.html %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="link" %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="primary" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="info" %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="link" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="success" %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="info" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="warning" light=true %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="success" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="danger" %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="warning" light=true %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="black" %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="danger" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="dark" %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="black" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="light" light=true %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="dark" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="white" light=true %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="light" light=true %}
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Navbar Helper Classes" %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="white" light=true %}
|
||||
</div>
|
||||
|
||||
{% include docs/elements/anchor.html name="Navbar Helper Classes" %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
@@ -1303,4 +1357,4 @@ $(document).ready(function() {
|
||||
</table>
|
||||
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
|
||||
@@ -1,227 +1,281 @@
|
||||
---
|
||||
title: Pagination
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: pagination
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-pagination
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-pagination
|
||||
meta:
|
||||
colors: false
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture pagination_example %}
|
||||
<nav class="pagination" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<a href="#" class="pagination-previous">Previous</a>
|
||||
<a href="#" class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 1">1</a>
|
||||
<a href="#" class="pagination-link" aria-label="Goto page 1">1</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 45">45</a>
|
||||
<a href="#" class="pagination-link" aria-label="Goto page 45">45</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
|
||||
<a
|
||||
class="pagination-link is-current"
|
||||
aria-label="Page 46"
|
||||
aria-current="page"
|
||||
>46</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 47">47</a>
|
||||
<a href="#" class="pagination-link" aria-label="Goto page 47">47</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 86">86</a>
|
||||
<a href="#" class="pagination-link" aria-label="Goto page 86">86</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture pagination_options_example %}
|
||||
<nav class="pagination" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous is-disabled" title="This is the first page">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<a class="pagination-previous is-disabled" title="This is the first page"
|
||||
>Previous</a
|
||||
>
|
||||
<a href="#" class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li>
|
||||
<a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a>
|
||||
<a
|
||||
class="pagination-link is-current"
|
||||
aria-label="Page 1"
|
||||
aria-current="page"
|
||||
>1</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 2">2</a>
|
||||
<a href="#" class="pagination-link" aria-label="Goto page 2">2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 3">3</a>
|
||||
<a href="#" class="pagination-link" aria-label="Goto page 3">3</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture pagination_centered_example %}
|
||||
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<a href="#" class="pagination-previous">Previous</a>
|
||||
<a href="#" class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li>
|
||||
<a
|
||||
class="pagination-link is-current"
|
||||
aria-label="Page 46"
|
||||
aria-current="page"
|
||||
>46</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture pagination_right_example %}
|
||||
<nav class="pagination is-right" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<a href="#" class="pagination-previous">Previous</a>
|
||||
<a href="#" class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li>
|
||||
<a
|
||||
class="pagination-link is-current"
|
||||
aria-label="Page 46"
|
||||
aria-current="page"
|
||||
>46</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture pagination_rounded_example %}
|
||||
<nav class="pagination is-rounded" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<a href="#" class="pagination-previous">Previous</a>
|
||||
<a href="#" class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li>
|
||||
<a
|
||||
class="pagination-link is-current"
|
||||
aria-label="Page 46"
|
||||
aria-current="page"
|
||||
>46</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture pagination_small_example %}
|
||||
<nav class="pagination is-small" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<a href="#" class="pagination-previous">Previous</a>
|
||||
<a href="#" class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li>
|
||||
<a
|
||||
class="pagination-link is-current"
|
||||
aria-label="Page 46"
|
||||
aria-current="page"
|
||||
>46</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture pagination_medium_example %}
|
||||
<nav class="pagination is-medium" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<a href="#" class="pagination-previous">Previous</a>
|
||||
<a href="#" class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li>
|
||||
<a
|
||||
class="pagination-link is-current"
|
||||
aria-label="Page 46"
|
||||
aria-current="page"
|
||||
>46</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture pagination_large_example %}
|
||||
<nav class="pagination is-large" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<a href="#" class="pagination-previous">Previous</a>
|
||||
<a href="#" class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li>
|
||||
<a
|
||||
class="pagination-link is-current"
|
||||
aria-label="Page 46"
|
||||
aria-current="page"
|
||||
>46</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The pagination component consists of several elements:
|
||||
</p>
|
||||
<p>The pagination component consists of several elements:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>pagination-previous</code> and <code>pagination-next</code> for incremental navigation
|
||||
</li>
|
||||
<li><code>pagination-previous</code> and <code>pagination-next</code> for incremental navigation</li>
|
||||
<li>
|
||||
<code>pagination-list</code> which displays page items:
|
||||
<ul>
|
||||
<li>
|
||||
<code>pagination-link</code> for the page numbers
|
||||
</li>
|
||||
<li>
|
||||
<code>pagination-ellipsis</code> for range separators
|
||||
</li>
|
||||
<li><code>pagination-link</code> for the page numbers</li>
|
||||
<li><code>pagination-ellipsis</code> for range separators</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
All elements are optional so you can compose your pagination as you wish.
|
||||
</p>
|
||||
<p>All elements are optional so you can compose your pagination as you wish.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=pagination_example horizontal=true more=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=pagination_example horizontal=true
|
||||
more=true
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>You can disable some links if they are not active, or change the amount of page numbers available.</p>
|
||||
</div>
|
||||
|
||||
{%
|
||||
include docs/elements/snippet.html content=pagination_options_example
|
||||
horizontal=true more=true
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can disable some links if they are not active, or change the amount of page numbers available.
|
||||
By default on <strong>tablet</strong>, the list is located on the left, and the previous/next buttons on the right.
|
||||
But you can change the <strong>order</strong> of these elements by using the <code>is-centered</code> and
|
||||
<code>is-right</code> modifiers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=pagination_options_example horizontal=true more=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=pagination_centered_example
|
||||
horizontal=true more=true
|
||||
%}
|
||||
{%
|
||||
include docs/elements/snippet.html
|
||||
content=pagination_right_example horizontal=true more=true
|
||||
%}
|
||||
{% include docs/elements/anchor.html name="Styles" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
By default on <strong>tablet</strong>, the list is located on the left, and the previous/next buttons on the right. But you can change the <strong>order</strong> of these elements by using the <code>is-centered</code> and <code>is-right</code> modifiers.
|
||||
</p>
|
||||
</div>
|
||||
<p class="content">Add the <code>is-rounded</code> modifier to have rounded pagination items.</p>
|
||||
|
||||
{% include elements/snippet.html content=pagination_centered_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=pagination_right_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Styles" %}
|
||||
|
||||
<p class="content">
|
||||
Add the <code>is-rounded</code> modifier to have rounded pagination items.
|
||||
</p>
|
||||
|
||||
{% include elements/snippet.html content=pagination_rounded_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=pagination_rounded_example
|
||||
horizontal=true more=true
|
||||
%}
|
||||
{% include docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
<p class="content">
|
||||
The pagination comes in <strong>3 additional sizes</strong>.<br>
|
||||
You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or <code>is-large</code> to the <code>pagination</code> component.
|
||||
You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or
|
||||
<code>is-large</code> to the <code>pagination</code> component.
|
||||
</p>
|
||||
|
||||
{% include elements/snippet.html content=pagination_small_example horizontal=true more=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=pagination_small_example
|
||||
horizontal=true more=true
|
||||
%}
|
||||
{%
|
||||
include docs/elements/snippet.html
|
||||
content=pagination_medium_example horizontal=true more=true
|
||||
%}
|
||||
{%
|
||||
include docs/elements/snippet.html content=pagination_large_example horizontal=true
|
||||
more=true
|
||||
%}
|
||||
|
||||
{% include elements/snippet.html content=pagination_medium_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=pagination_large_example horizontal=true more=true %}
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
---
|
||||
title: Panel
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: panel
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-panel
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-panel
|
||||
meta:
|
||||
colors: true
|
||||
sizes: false
|
||||
@@ -16,12 +17,10 @@ meta:
|
||||
|
||||
{% capture panel_example %}
|
||||
<nav class="panel">
|
||||
<p class="panel-heading">
|
||||
Repositories
|
||||
</p>
|
||||
<p class="panel-heading">Repositories</p>
|
||||
<div class="panel-block">
|
||||
<p class="control has-icons-left">
|
||||
<input class="input" type="text" placeholder="Search">
|
||||
<input class="input" type="text" placeholder="Search" />
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
</span>
|
||||
@@ -71,7 +70,7 @@ meta:
|
||||
mojs
|
||||
</a>
|
||||
<label class="panel-block">
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" />
|
||||
remember me
|
||||
</label>
|
||||
<div class="panel-block">
|
||||
@@ -83,16 +82,10 @@ meta:
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>panel</code> is a container for several types:
|
||||
</p>
|
||||
<p>The <code>panel</code> is a container for several types:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>panel-heading</code> as the first child
|
||||
</li>
|
||||
<li>
|
||||
<code>panel-tabs</code> for navigation
|
||||
</li>
|
||||
<li><code>panel-heading</code> as the first child</li>
|
||||
<li><code>panel-tabs</code> for navigation</li>
|
||||
<li>
|
||||
<code>panel-block</code> which can contain other elements, like:
|
||||
<ul>
|
||||
@@ -104,29 +97,31 @@ meta:
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
The <code>panel-block</code> can be an anchor tag <code><a></code> or a label <code><label></code> with a checkbox inside.
|
||||
The <code>panel-block</code> can be an anchor tag <code><a></code> or
|
||||
a label <code><label></code> with a checkbox inside.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=panel_example more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
{% include docs/elements/snippet.html content=panel_example more=true %} {%
|
||||
include docs/elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The panel component is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>. Simply append one of the color modifiers.
|
||||
The panel component is available in all the
|
||||
<strong>different colors</strong> defined by the
|
||||
<a href="{{ site.data.links.by_id.customize-variables.path }}"
|
||||
><code>$colors</code> Sass map</a
|
||||
>. Simply append one of the color modifiers.
|
||||
</p>
|
||||
<p>
|
||||
For example, to use your primary color, use <code>"panel is-primary"</code> as a class.
|
||||
For example, to use your primary color, use
|
||||
<code>"panel is-primary"</code> as a class.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
{% for color in site.data.colors.justColors %} {% capture foobar %}
|
||||
<article class="panel is-{{ color }}">
|
||||
<p class="panel-heading">
|
||||
{{ color | capitalize }}
|
||||
</p>
|
||||
<p class="panel-heading">{{ color | capitalize }}</p>
|
||||
<p class="panel-tabs">
|
||||
<a class="is-active">All</a>
|
||||
<a>Public</a>
|
||||
@@ -136,7 +131,7 @@ meta:
|
||||
</p>
|
||||
<div class="panel-block">
|
||||
<p class="control has-icons-left">
|
||||
<input class="input is-{{ color }}" type="text" placeholder="Search">
|
||||
<input class="input is-{{ color }}" type="text" placeholder="Search" />
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
</span>
|
||||
@@ -167,8 +162,5 @@ meta:
|
||||
jgthms.github.io
|
||||
</a>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar more=true %}
|
||||
{% endfor %}
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
{% endcapture %} {% include docs/elements/snippet.html content=foobar more=true
|
||||
%} {% endfor %}
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
---
|
||||
title: Tabs
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: tabs
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-tabs
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-tabs
|
||||
meta:
|
||||
colors: false
|
||||
sizes: true
|
||||
@@ -23,9 +24,7 @@ meta:
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_centered_example %}
|
||||
{% endcapture %} {% capture tabs_centered_example %}
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
@@ -34,9 +33,7 @@ meta:
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_right_example %}
|
||||
{% endcapture %} {% capture tabs_right_example %}
|
||||
<div class="tabs is-right">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
@@ -45,40 +42,44 @@ meta:
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_icons_example %}
|
||||
{% endcapture %} {% capture tabs_icons_example %}
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-image" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-music" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-film" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="far fa-file-alt" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_small_example %}
|
||||
{% endcapture %} {% capture tabs_small_example %}
|
||||
<div class="tabs is-small">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
@@ -87,9 +88,7 @@ meta:
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_medium_example %}
|
||||
{% endcapture %} {% capture tabs_medium_example %}
|
||||
<div class="tabs is-medium">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
@@ -98,9 +97,7 @@ meta:
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_large_example %}
|
||||
{% endcapture %} {% capture tabs_large_example %}
|
||||
<div class="tabs is-large">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
@@ -109,71 +106,81 @@ meta:
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_boxed_example %}
|
||||
{% endcapture %} {% capture tabs_boxed_example %}
|
||||
<div class="tabs is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-image" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-music" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-film" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="far fa-file-alt" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_toggle_example %}
|
||||
{% endcapture %} {% capture tabs_toggle_example %}
|
||||
<div class="tabs is-toggle">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-image" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-music" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-film" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="far fa-file-alt" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_toggle_rounded_example %}
|
||||
{% endcapture %} {% capture tabs_toggle_rounded_example %}
|
||||
<div class="tabs is-toggle is-toggle-rounded">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
@@ -202,138 +209,162 @@ meta:
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_fullwidth_example %}
|
||||
{% endcapture %} {% capture tabs_fullwidth_example %}
|
||||
<div class="tabs is-fullwidth">
|
||||
<ul>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
|
||||
<span class="icon"
|
||||
><i class="fas fa-angle-left" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Left</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
|
||||
<span class="icon"
|
||||
><i class="fas fa-angle-up" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Up</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span>Right</span>
|
||||
<span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
|
||||
<span class="icon"
|
||||
><i class="fas fa-angle-right" aria-hidden="true"></i
|
||||
></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_centered_boxed_example %}
|
||||
{% endcapture %} {% capture tabs_centered_boxed_example %}
|
||||
<div class="tabs is-centered is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-image" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-music" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-film" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="far fa-file-alt" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_toggle_fullwidth_example %}
|
||||
{% endcapture %} {% capture tabs_toggle_fullwidth_example %}
|
||||
<div class="tabs is-toggle is-fullwidth">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-image" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-music" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-film" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="far fa-file-alt" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_centered_boxed_medium_example %}
|
||||
{% endcapture %} {% capture tabs_centered_boxed_medium_example %}
|
||||
<div class="tabs is-centered is-boxed is-medium">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-image" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-music" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-film" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="far fa-file-alt" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_toggle_fullwidth_large_example %}
|
||||
{% endcapture %} {% capture tabs_toggle_fullwidth_large_example %}
|
||||
<div class="tabs is-toggle is-fullwidth is-large">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span class="icon"
|
||||
><i class="fas fa-image" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span class="icon"
|
||||
><i class="fas fa-music" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
@@ -345,7 +376,9 @@ meta:
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span class="icon"
|
||||
><i class="far fa-file-alt" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
@@ -355,98 +388,103 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma <code>tabs</code> are a straightforward navigation component that come in a variety of versions. They only require the following structure:
|
||||
The Bulma <code>tabs</code> are a straightforward navigation component that
|
||||
come in a variety of versions. They only require the following structure:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
a <code>tabs</code> container
|
||||
</li>
|
||||
<li>
|
||||
a <code><ul></code> HTML element
|
||||
</li>
|
||||
<li>
|
||||
a list of <code><li></code> HTML element
|
||||
</li>
|
||||
<li>
|
||||
<code><a></code> HTML anchor elements for each link
|
||||
</li>
|
||||
<li>a <code>tabs</code> container</li>
|
||||
<li>a <code><ul></code> HTML element</li>
|
||||
<li>a list of <code><li></code> HTML element</li>
|
||||
<li><code><a></code> HTML anchor elements for each link</li>
|
||||
</ul>
|
||||
<p>
|
||||
The <strong>default</strong> tabs style has a single border at the bottom.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=tabs_example horizontal=true %}
|
||||
|
||||
{% include elements/anchor.html name="Alignment" %}
|
||||
{% include docs/elements/snippet.html content=tabs_example horizontal=true %} {%
|
||||
include docs/elements/anchor.html name="Alignment" %}
|
||||
|
||||
<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:
|
||||
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 elements/snippet.html content=tabs_centered_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=tabs_right_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Icons" %}
|
||||
{% include docs/elements/snippet.html content=tabs_centered_example
|
||||
horizontal=true more=true %} {% include docs/elements/snippet.html
|
||||
content=tabs_right_example horizontal=true more=true %} {% include
|
||||
docs/elements/anchor.html name="Icons" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can use any of the <a href="https://fontawesome.com/">Font Awesome</a> <strong>icons</strong>.</p>
|
||||
<p>
|
||||
You can use any of the <a href="https://fontawesome.com/">Font Awesome</a>
|
||||
<strong>icons</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=tabs_icons_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% include docs/elements/snippet.html content=tabs_icons_example horizontal=true
|
||||
more=true %} {% include docs/elements/anchor.html name="Sizes" %}
|
||||
<div class="content">
|
||||
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
|
||||
<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 elements/snippet.html content=tabs_small_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=tabs_medium_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=tabs_large_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Styles" %}
|
||||
{% include docs/elements/snippet.html content=tabs_small_example horizontal=true
|
||||
more=true %} {% include docs/elements/snippet.html content=tabs_medium_example
|
||||
horizontal=true more=true %} {% include docs/elements/snippet.html
|
||||
content=tabs_large_example horizontal=true more=true %} {% include
|
||||
docs/elements/anchor.html name="Styles" %}
|
||||
|
||||
<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>
|
||||
|
||||
{% include elements/snippet.html content=tabs_boxed_example horizontal=true more=true %}
|
||||
{% include docs/elements/snippet.html content=tabs_boxed_example horizontal=true
|
||||
more=true %}
|
||||
|
||||
<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>
|
||||
|
||||
{% include elements/snippet.html content=tabs_toggle_example horizontal=true more=true %}
|
||||
{% include docs/elements/snippet.html content=tabs_toggle_example
|
||||
horizontal=true more=true %}
|
||||
|
||||
<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>
|
||||
|
||||
{% include elements/snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
|
||||
{% include docs/elements/snippet.html content=tabs_toggle_rounded_example
|
||||
horizontal=true more=true %}
|
||||
|
||||
<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>
|
||||
|
||||
{% include elements/snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Combining" %}
|
||||
{% include docs/elements/snippet.html content=tabs_fullwidth_example
|
||||
horizontal=true more=true %} {% include docs/elements/anchor.html
|
||||
name="Combining" %}
|
||||
|
||||
<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>
|
||||
|
||||
{% include elements/snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
{% include docs/elements/snippet.html content=tabs_centered_boxed_example
|
||||
horizontal=true more=true %} {% include docs/elements/snippet.html
|
||||
content=tabs_toggle_fullwidth_example horizontal=true more=true %} {% include
|
||||
docs/elements/snippet.html content=tabs_centered_boxed_medium_example
|
||||
horizontal=true more=true %} {% include docs/elements/snippet.html
|
||||
content=tabs_toggle_fullwidth_large_example horizontal=true more=true %} {%
|
||||
include docs/components/variables.html type='component' %}
|
||||
|
||||
Reference in New Issue
Block a user