library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add dropdown description

Browse Source
This commit is contained in:
Jeremy Thomas 2017-07-21 11:44:49 +02:00
parent 06a392072b
commit 41f9392a93
3 changed files with 75 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/css/bulma-docs.css
View File

@ -3778,11 +3778,11 @@ input[type="submit"].button {
vertical-align: top; vertical-align: top;
} }
.dropdown.is-active .dropdown-container, .dropdown.is-hoverable:hover .dropdown-container { .dropdown.is-active .dropdown-menu, .dropdown.is-hoverable:hover .dropdown-menu {
display: block; display: block;
} }
.dropdown-container { .dropdown-menu {
display: none; display: none;
left: 0; left: 0;
max-width: 20rem; max-width: 20rem;

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

@ -5,6 +5,33 @@ doc-subtab: dropdown
--- ---
{% capture dropdown_example %} {% capture dropdown_example %}
<div class="dropdown">
<div class="dropdown-trigger">
<a class="button">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fa fa-angle-down"></i>
</span>
</a>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<a class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>
{% endcapture %}
{% capture dropdown_click_example %}
<div class="dropdown"> <div class="dropdown">
<div class="dropdown-trigger"> <div class="dropdown-trigger">
<a class="button is-primary"> <a class="button is-primary">
@ -14,7 +41,7 @@ doc-subtab: dropdown
</span> </span>
</a> </a>
</div> </div>
<div class="dropdown-container"> <div class="dropdown-menu">
<div class="dropdown-content"> <div class="dropdown-content">
<a class="dropdown-item"> <a class="dropdown-item">
Overview Overview
@ -56,7 +83,7 @@ doc-subtab: dropdown
</span> </span>
</a> </a>
</div> </div>
<div class="dropdown-container"> <div class="dropdown-menu">
<div class="dropdown-content"> <div class="dropdown-content">
<div class="dropdown-item"> <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>
@ -89,7 +116,48 @@ doc-subtab: dropdown
<hr> <hr>
{{dropdown_example}} <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>
{{dropdown_click_example}}
{{dropdown_info_example}} {{dropdown_info_example}}
</div> </div>
</section> </section>

4
sass/components/dropdown.sass
View File

@ -19,10 +19,10 @@ $dropdown-divider-background: $border !default
vertical-align: top vertical-align: top
&.is-active, &.is-active,
&.is-hoverable:hover &.is-hoverable:hover
.dropdown-container .dropdown-menu
display: block display: block
.dropdown-container .dropdown-menu
display: none display: none
left: 0 left: 0
max-width: 20rem max-width: 20rem