|
@@ -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><div></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><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>
|
|
|
+
|
|
|
+ <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>
|