mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Component links
This commit is contained in:
Jeremy Thomas
@@ -1,8 +1,18 @@
|
||||
---
|
||||
title: Dropdown
|
||||
subtitle: "An interactive <strong>dropdown menu</strong> for discoverable content"
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: dropdown
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-dropdown
|
||||
meta:
|
||||
- colors: false
|
||||
- sizes: false
|
||||
- variables: true
|
||||
---
|
||||
|
||||
{% capture dropdown_example %}
|
||||
@@ -188,161 +198,138 @@ doc-subtab: dropdown
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<h1 class="title">Dropdown</h1>
|
||||
<h2 class="subtitle">
|
||||
An interactive <strong>dropdown menu</strong> for discoverable content
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
new=true
|
||||
since="0.4.4"
|
||||
colors=false
|
||||
sizes=false
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>dropdown</code> component is a container for a dropdown button and a dropdown menu.
|
||||
</p>
|
||||
<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</code> the <strong>main</strong> container
|
||||
<code>dropdown-trigger</code> the container for a <code>button</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>dropdown-menu</code> the toggable menu, <strong>hidden</strong> by default
|
||||
<ul>
|
||||
<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
|
||||
<code>dropdown-content</code> the dropdown <strong>box</strong>, with a white background and a shadow
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
{% include anchor.html name="Dropdown content" %}
|
||||
{% include 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>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
While the <code>dropdown-item</code> can be used as an anchor link <code><a></code>, you can also use a <code><div></code> and insert almost <strong>any type of content</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{dropdown_content_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_content_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{dropdown_content_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_content_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Hoverable or Toggable" %}
|
||||
{% include anchor.html name="Hoverable or Toggable" %}
|
||||
|
||||
<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="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="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>
|
||||
<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>
|
||||
|
||||
{% include anchor.html name="Right aligned" %}
|
||||
{% include 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.
|
||||
</p>
|
||||
</div>
|
||||
<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 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="column is-half">
|
||||
{% highlight html %}{{dropdown_right_example}}{% endhighlight %}
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
{{dropdown_right_example}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Dropup" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{ dropdown_up_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_up_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_right_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Dropup" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{ dropdown_up_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_up_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
Reference in New Issue
Block a user