bulma/docs/documentation/components/dropdown.html

351 lines
10 KiB
HTML
Raw Normal View History

2017-07-20 19:01:55 +00:00
---
title: Dropdown
2017-07-20 19:01:55 +00:00
layout: documentation
doc-tab: components
doc-subtab: dropdown
---
{% capture dropdown_example %}
2017-07-24 10:34:43 +00:00
<div class="dropdown is-active">
2017-07-21 09:44:49 +00:00
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
2017-07-21 09:44:49 +00:00
<span>Dropdown button</span>
<span class="icon is-small">
2018-01-10 16:30:23 +00:00
<i class="fas fa-angle-down" aria-hidden="true"></i>
2017-07-21 09:44:49 +00:00
</span>
</button>
2017-07-21 09:44:49 +00:00
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
2017-07-21 09:44:49 +00:00
<div class="dropdown-content">
<a href="#" class="dropdown-item">
2017-07-21 09:44:49 +00:00
Dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<a href="#" class="dropdown-item is-active">
2017-07-24 10:34:43 +00:00
Active dropdown item
</a>
<a href="#" class="dropdown-item">
2017-07-24 10:34:43 +00:00
Other dropdown item
</a>
2017-07-21 09:44:49 +00:00
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
2017-07-21 09:44:49 +00:00
With a divider
</a>
</div>
</div>
</div>
{% endcapture %}
2017-07-24 10:34:43 +00:00
{% capture dropdown_content_example %}
<div class="dropdown is-active">
<div class="dropdown-trigger">
2017-10-10 08:54:53 +00:00
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
2017-07-24 10:34:43 +00:00
<span>Content</span>
<span class="icon is-small">
2018-01-10 16:30:23 +00:00
<i class="fas fa-angle-down" aria-hidden="true"></i>
2017-07-24 10:34:43 +00:00
</span>
</button>
2017-07-24 10:34:43 +00:00
</div>
<div class="dropdown-menu" id="dropdown-menu2" role="menu">
2017-07-24 10:34:43 +00:00
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
</div>
<hr class="dropdown-divider">
<div class="dropdown-item">
<p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
</div>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
2017-07-24 10:34:43 +00:00
This is a link
</a>
</div>
</div>
</div>
{% endcapture %}
2017-07-21 09:44:49 +00:00
{% capture dropdown_click_example %}
2017-07-20 19:01:55 +00:00
<div class="dropdown">
<div class="dropdown-trigger">
2017-10-10 08:54:53 +00:00
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
2017-07-20 19:01:55 +00:00
<span>Click me</span>
<span class="icon is-small">
2018-01-10 16:30:23 +00:00
<i class="fas fa-angle-down" aria-hidden="true"></i>
2017-07-20 19:01:55 +00:00
</span>
</button>
2017-07-20 19:01:55 +00:00
</div>
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
2017-07-20 19:01:55 +00:00
<div class="dropdown-content">
<a href="#" class="dropdown-item">
2017-07-20 19:01:55 +00:00
Overview
</a>
<a href="#" class="dropdown-item">
2017-07-20 19:01:55 +00:00
Modifiers
</a>
<a href="#" class="dropdown-item">
2017-07-20 19:01:55 +00:00
Grid
</a>
<a href="#" class="dropdown-item">
2017-07-20 19:01:55 +00:00
Form
</a>
<a href="#" class="dropdown-item">
2017-07-20 19:01:55 +00:00
Elements
</a>
<a href="#" class="dropdown-item">
2017-07-20 19:01:55 +00:00
Components
</a>
<a href="#" class="dropdown-item">
2017-07-20 19:01:55 +00:00
Layout
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
2017-07-20 19:01:55 +00:00
More
</a>
</div>
</div>
</div>
{% endcapture %}
{% capture dropdown_info_example %}
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
2017-10-10 08:54:53 +00:00
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
2017-07-20 19:01:55 +00:00
<span>Hover me</span>
<span class="icon is-small">
2018-01-10 16:30:23 +00:00
<i class="fas fa-angle-down" aria-hidden="true"></i>
2017-07-20 19:01:55 +00:00
</span>
</button>
2017-07-20 19:01:55 +00:00
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
2017-07-20 19:01:55 +00:00
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
</div>
</div>
</div>
</div>
{% endcapture %}
2017-07-24 10:54:00 +00:00
{% capture dropdown_left_example %}
<div class="dropdown is-active">
<div class="dropdown-trigger">
2017-10-10 08:54:53 +00:00
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu5">
2017-07-24 10:54:00 +00:00
<span>Left aligned</span>
<span class="icon is-small">
2018-01-10 16:30:23 +00:00
<i class="fas fa-angle-down" aria-hidden="true"></i>
2017-07-24 10:54:00 +00:00
</span>
</button>
2017-07-24 10:54:00 +00:00
</div>
<div class="dropdown-menu" id="dropdown-menu5" role="menu">
2017-07-24 10:54:00 +00:00
<div class="dropdown-content">
<div class="dropdown-item">
<p>The dropdown is <strong>left-aligned</strong> by default.</p>
</div>
</div>
</div>
</div>
{% endcapture %}
{% capture dropdown_right_example %}
<div class="dropdown is-right is-active">
<div class="dropdown-trigger">
2017-10-10 08:54:53 +00:00
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu6">
2017-07-24 10:54:00 +00:00
<span>Right aligned</span>
<span class="icon is-small">
2018-01-10 16:30:23 +00:00
<i class="fas fa-angle-down" aria-hidden="true"></i>
2017-07-24 10:54:00 +00:00
</span>
</button>
2017-07-24 10:54:00 +00:00
</div>
<div class="dropdown-menu" id="dropdown-menu6" role="menu">
2017-07-24 10:54:00 +00:00
<div class="dropdown-content">
<div class="dropdown-item">
<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 %}
2017-10-09 09:36:14 +00:00
<div class="dropdown is-up">
<div class="dropdown-trigger">
2017-10-10 08:54:53 +00:00
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu7">
<span>Dropup button</span>
<span class="icon is-small">
2018-01-10 16:30:23 +00:00
<i class="fas fa-angle-up" aria-hidden="true"></i>
</span>
</button>
</div>
<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>
</div>
</div>
</div>
</div>
{% endcapture %}
2017-07-21 09:22:08 +00:00
{% include subnav-components.html %}
2017-07-20 19:01:55 +00:00
<section class="section">
<div class="container">
2017-07-21 09:22:08 +00:00
2017-07-28 22:27:59 +00:00
<h1 class="title">Dropdown</h1>
<h2 class="subtitle">
An interactive <strong>dropdown menu</strong> for discoverable content
</h2>
{%
include meta.html
new=true
since="0.4.4"
colors=false
sizes=false
variables=true
%}
2017-07-20 19:01:55 +00:00
<hr>
2017-07-21 09:44:49 +00:00
<div class="content">
<p>
The <code>dropdown</code> component is a container for a dropdown button and a dropdown menu.
</p>
<ul>
<li>
<code>dropdown</code> the <strong>main</strong> container
<ul>
<li>
<code>dropdown-trigger</code> the container for a <code>button</code>
</li>
<li>
<code>dropdown-menu</code> the toggable menu, <strong>hidden</strong> by default
<ul>
<li>
<code>dropdown-content</code> the dropdown <strong>box</strong>, with a white background and a shadow
<ul>
<li>
<code>dropdown-item</code> each <strong>single item</strong> of the dropdown, which can either be a <code>a</code> or a <code>div</code>
</li>
<li>
<code>dropdown-divider</code> a <strong>horizontal line</strong> to separate dropdown items
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="columns">
<div class="column is-half">
{{dropdown_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{dropdown_example}}{% endhighlight %}
</div>
</div>
2017-08-30 20:33:49 +00:00
{% include anchor.html name="Dropdown content" %}
2017-07-24 10:34:43 +00:00
<div class="content">
<p>
While the <code>dropdown-item</code> can be used as an anchor link <code>&lt;a&gt;</code>, you can also use a <code>&lt;div&gt;</code> and insert almost <strong>any type of content</strong>.
</p>
</div>
<div class="columns">
<div class="column is-half">
{{dropdown_content_example}}
</div>
<div class="column is-half">
{% highlight html %}{{dropdown_content_example}}{% endhighlight %}
</div>
</div>
2017-08-30 20:33:49 +00:00
{% include anchor.html name="Hoverable or Toggable" %}
2017-07-24 10:34:43 +00:00
<div class="content">
<p>
The <code>dropdown</code> component has <strong>2 additional modifiers</strong>
</p>
<ul>
<li>
<code>is-hoverable</code>: the dropdown will show up when <strong>hovering</strong> the <code>dropdown-trigger</code>
</li>
<li>
<code>is-active</code>: the dropdown will show up <strong>all the time</strong>
</li>
</ul>
</div>
<div class="message is-success">
<p class="message-body">
While the CSS <code>:hover</code> implementation works perfectly, the <code>is-active</code> class is available for users who want to control the display of the dropdown with <strong>JavaScript</strong>.
</p>
</div>
<div class="columns">
<div class="column is-half">
{{dropdown_click_example}}{{dropdown_info_example}}
</div>
<div class="column is-half">
{% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %}
</div>
</div>
2017-07-24 10:54:00 +00:00
2017-08-30 20:33:49 +00:00
{% include anchor.html name="Right aligned" %}
2017-07-24 10:54:00 +00:00
<div class="content">
<p>
You can add the <code>is-right</code> modifier to have a <strong>right-aligned</strong> dropdown.
</p>
</div>
<div class="columns">
<div class="column is-half">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
{{dropdown_left_example}}
</div>
</div>
<div class="level-right">
<div class="level-item">
{{dropdown_right_example}}
</div>
</div>
</div>
</div>
<div class="column is-half">
{% highlight html %}{{dropdown_right_example}}{% endhighlight %}
</div>
</div>
2017-07-28 22:27:59 +00:00
{% include anchor.html name="Dropup" %}
2017-10-09 09:36:14 +00:00
{% include elements/new-tag.html version="0.5.4" %}
<div class="content">
<p>
You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.
</p>
</div>
<div class="columns">
2017-10-09 09:36:14 +00:00
<div class="column is-half">
{{ dropdown_up_example }}
</div>
<div class="column is-half">
{% highlight html %}{{dropdown_up_example}}{% endhighlight %}
</div>
</div>
{% include variables.html type='component' %}
2017-07-28 22:27:59 +00:00
2017-07-20 19:01:55 +00:00
</div>
</section>