Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-18 03:14:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix desktop container

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-24 12:54:00 +02:00
parent 28d22d97df
commit d28556d8dd
4 changed files with 100 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -127,6 +127,46 @@ doc-subtab: dropdown
</div>
{% endcapture %}
{% capture dropdown_left_example %}
<div class="dropdown is-active">
<div class="dropdown-trigger">
<a class="button is-info">
<span>Left aligned</span>
<span class="icon is-small">
<i class="fa fa-angle-down"></i>
</span>
</a>
</div>
<div class="dropdown-menu">
<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">
<a class="button is-info">
<span>Right aligned</span>
<span class="icon is-small">
<i class="fa fa-angle-down"></i>
</span>
</a>
</div>
<div class="dropdown-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>
</div>
</div>
</div>
</div>
{% endcapture %}
{% include subnav-components.html %}
<section class="section">
@@ -246,5 +286,37 @@ doc-subtab: dropdown
{% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %}
</div>
</div>
<hr>
<h3 class="title">
Right aligned
</h3>
<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>
</div>
</section>