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

Add more dropdown doc

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-24 12:34:43 +02:00
parent 41f9392a93
commit 28d22d97df
5 changed files with 104 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@ doc-subtab: dropdown
---
{% capture dropdown_example %}
<div class="dropdown">
<div class="dropdown is-active">
<div class="dropdown-trigger">
<a class="button">
<span>Dropdown button</span>
@@ -22,6 +22,12 @@ doc-subtab: dropdown
<a class="dropdown-item">
Other dropdown item
</a>
<a class="dropdown-item is-active">
Active dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a class="dropdown-item">
With a divider
@@ -31,6 +37,34 @@ doc-subtab: dropdown
</div>
{% endcapture %}
{% capture dropdown_content_example %}
<div class="dropdown is-active">
<div class="dropdown-trigger">
<a class="button is-info">
<span>Content</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>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 class="dropdown-item">
This is a link
</a>
</div>
</div>
</div>
{% endcapture %}
{% capture dropdown_click_example %}
<div class="dropdown">
<div class="dropdown-trigger">
@@ -157,7 +191,60 @@ doc-subtab: dropdown
</div>
</div>
{{dropdown_click_example}}
{{dropdown_info_example}}
<hr>
<h3 class="title">
Dropdown content
</h3>
<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>
<hr>
<h3 class="title">
Hoverable or Toggable
</h3>
<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>
</div>
</section>