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

Add dropdown button

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-20 20:01:55 +01:00
parent 3f8c12bfbb
commit 7b395a8ad8
7 changed files with 246 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
docs/documentation/components/dropdown.html Normal file
View File

@@ -0,0 +1,79 @@
---
layout: documentation
doc-tab: components
doc-subtab: dropdown
---
{% capture dropdown_example %}
<div class="dropdown">
<div class="dropdown-trigger">
<a class="button is-primary">
<span>Click me</span>
<span class="icon is-small">
<i class="fa fa-angle-down"></i>
</span>
</a>
</div>
<div class="dropdown-container">
<div class="dropdown-content">
<a class="dropdown-item">
Overview
</a>
<a class="dropdown-item">
Modifiers
</a>
<a class="dropdown-item">
Grid
</a>
<a class="dropdown-item">
Form
</a>
<a class="dropdown-item">
Elements
</a>
<a class="dropdown-item">
Components
</a>
<a class="dropdown-item">
Layout
</a>
<hr class="dropdown-divider">
<a class="dropdown-item">
More
</a>
</div>
</div>
</div>
{% endcapture %}
{% capture dropdown_info_example %}
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<a class="button is-info">
<span>Hover me</span>
<span class="icon is-small">
<i class="fa fa-angle-down"></i>
</span>
</a>
</div>
<div class="dropdown-container">
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
</div>
</div>
</div>
</div>
{% endcapture %}
<section class="section">
<div class="container">
<h1 class="title">Dropdown</h1>
<h2 class="subtitle">An interactive <strong>dropdown menu</strong> for discoverable content</h2>
<hr>
{{dropdown_example}}
{{dropdown_info_example}}
</div>
</section>