mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-20 01:03:23 +03:00
109 lines
4.3 KiB
HTML
109 lines
4.3 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>
|
|
<li>Triangles are optional class on the <code>.dropdown-menu</code> element, and have 6 positions:
|
|
<ul>
|
|
<li><code>.triangle-bottom</code></li>
|
|
<li><code>.triangle-bottom-left</code></li>
|
|
<li><code>.triangle-bottom-right</code></li>
|
|
<li><code>.triangle-top</code></li>
|
|
<li><code>.triangle-top-left</code></li>
|
|
<li><code>.triangle-top-right</code></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<h2>Default Dropdown</h2>
|
|
|
|
<div class="dropdown">
|
|
<ul class="dropdown-menu 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>
|
|
|
|
<h2>Bottom Triangle</h2>
|
|
|
|
<div class="dropdown">
|
|
<ul class="dropdown-menu triangle-bottom" 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>
|
|
|
|
<h3>Bottom Left Triangle</h3>
|
|
|
|
<div class="dropdown">
|
|
<ul class="dropdown-menu triangle-bottom-left" 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>
|
|
|
|
<h3>Bottom Right Triangle</h3>
|
|
|
|
<div class="dropdown">
|
|
<ul class="dropdown-menu triangle-bottom-right" 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>
|
|
|
|
<hr>
|
|
|
|
<h2>Top Triangle</h2>
|
|
|
|
<div class="dropdown">
|
|
<ul class="dropdown-menu triangle-top" 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>
|
|
|
|
<h3>Top Left Triangle</h3>
|
|
|
|
<div class="dropdown">
|
|
<ul class="dropdown-menu triangle-top-left" 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>
|
|
|
|
<h3>Top Right Triangle</h3>
|
|
|
|
<div class="dropdown">
|
|
<ul class="dropdown-menu triangle-top-right" 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>
|
|
|
|
<h3>Div & Button Markup</h3>
|
|
<!-- TODO: When button styles are in, check these look correct -->
|
|
<div class="dropdown">
|
|
<div class="dropdown-menu triangle-top-right" role="menu" aria-labelledby="dropdownMenu1">
|
|
<span role="presentation"><button class="dropdown-item" role="menuitem" tabindex="-1">Action</button></span>
|
|
<span role="presentation"><button class="dropdown-item" role="menuitem" tabindex="-1">Another action</button></span>
|
|
</div>
|
|
</div> |