Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Added .is-up modifier for dropdown. (#1254)

Browse Source
This commit is contained in:
Yan Sern
2017-10-07 18:02:49 +02:00
committed by Jeremy Thomas
parent fc5ddd473c
commit 9e294874a2
2 changed files with 43 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -192,6 +192,26 @@ variables:
</div>
{% endcapture %}
{% capture dropdown_up_example %}
<div class="dropdown is-up is-active">
<div class="dropdown-trigger">
<button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu7">
<span>Dropup button</span>
<span class="icon is-small">
<i class="fa 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 %}
{% include subnav-components.html %}
<section class="section">
@@ -329,6 +349,23 @@ variables:
</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" style="display: flex; align-items: flex-end;">
{{dropdown_up_example}}
</div>
<div class="column is-half">
{% highlight html %}{{dropdown_up_example}}{% endhighlight %}
</div>
</div>
{% include variables.html %}
</div>