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 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_javascript/main.js
View File

@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Dropdowns
const $dropdowns = getAll('.dropdown');
const $dropdowns = getAll('.dropdown:not(.is-hoverable)');
if ($dropdowns.length > 0) {
$dropdowns.forEach($el => {

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

@ -3816,11 +3816,16 @@ a.dropdown-item {
white-space: nowrap;
}
a.dropdown-item:hover, a.dropdown-item.is-active {
a.dropdown-item:hover {
background-color: whitesmoke;
color: #0a0a0a;
}
a.dropdown-item.is-active {
background-color: #00d1b2;
color: #fff;
}
.dropdown-divider {
background-color: #dbdbdb;
border: none;

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>

2
docs/lib/main.js
View File

@ -4,7 +4,7 @@ document.addEventListener('DOMContentLoaded', function () {
// Dropdowns
var $dropdowns = getAll('.dropdown');
var $dropdowns = getAll('.dropdown:not(.is-hoverable)');
if ($dropdowns.length > 0) {
$dropdowns.forEach(function ($el) {

10
sass/components/dropdown.sass
View File

@ -8,8 +8,8 @@ $dropdown-content-z: 20 !default
$dropdown-item: $grey-dark !default
$dropdown-item-hover: $black !default
$dropdown-item-hover-background: $background !default
$dropdown-item-active: $black !default
$dropdown-item-active-background: transparent !default
$dropdown-item-active: $primary-invert !default
$dropdown-item-active-background: $primary !default
$dropdown-divider-background: $border !default
@ -51,10 +51,12 @@ $dropdown-divider-background: $border !default
a.dropdown-item
padding-right: 3rem
white-space: nowrap
&:hover,
&.is-active
&:hover
background-color: $dropdown-item-hover-background
color: $dropdown-item-hover
&.is-active
background-color: $dropdown-item-active-background
color: $dropdown-item-active
.dropdown-divider
background-color: $dropdown-divider-background