mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-27 22:49:56 -05:00
47 lines
No EOL
1.7 KiB
HTML
47 lines
No EOL
1.7 KiB
HTML
---
|
|
layout: raw
|
|
title: Dropdowns - Ghost UI
|
|
---
|
|
|
|
<!--
|
|
.dropdown
|
|
This is used to show, hide and position the dropdown
|
|
-->
|
|
|
|
<h1>Dropdowns</h1>
|
|
|
|
<p>Basic usage notes</p>
|
|
|
|
<ul>
|
|
<li>The styles should be markup-independent, so you can use divs, lists, and so on.</li>
|
|
<li>Add the class <code>.dropdown-with-icons</code> to <code>.dropdown-menu</code> is you will be using icons in the dropdown items.</li>
|
|
</ul>
|
|
|
|
<hr>
|
|
|
|
<h2>Dropdown with Icons</h2>
|
|
|
|
<div class="dropdown">
|
|
<ul class="dropdown-top dropdown-with-icons" role="menu" aria-labelledby="dropdownMenu1">
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
|
|
<li role="presentation"><a class="dropdown-item icon-trash" role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
|
<li role="presentation">
|
|
<span class="divider"></span>
|
|
</li>
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
{% assign dropdown_classes = "dropdown-top|dropdown-top-left|dropdown-top-right|dropdown-bottom|dropdown-bottom-left|dropdown-bottom-right" | split: "|" %}
|
|
{% for item in dropdown_classes %}
|
|
<h2>Sample: <code>{{item}}</code></h2>
|
|
<div class="dropdown">
|
|
<ul class="{{item}}" role="menu" aria-labelledby="dropdownMenu1">
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
|
</ul>
|
|
</div>
|
|
{% endfor %} |