You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
671 lines
21 KiB
671 lines
21 KiB
---
|
|
layout : 'default'
|
|
css : 'dropdown'
|
|
|
|
title : 'Dropdown'
|
|
description : 'A dropdown is a hidden list of selections that a user can choose to have appear'
|
|
type : 'UI Module'
|
|
---
|
|
|
|
<script src="/javascript/dropdown.js"></script>
|
|
|
|
<%- @partial('header', { tabs: 'module' }) %>
|
|
|
|
<div class="main container">
|
|
|
|
<div class="ui active tab" data-tab="definition">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Types</a>
|
|
<a class="item">Variations</a>
|
|
<a class="item">States</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
|
|
<div class="visible dropdown example">
|
|
<h4 class="ui header">Dropdown</h4>
|
|
<p>A basic dropdown has no special formatting of its own</p>
|
|
<div class="ui dropdown">
|
|
<div class="text">Select</div>
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item">Edit</div>
|
|
<div class="item">Remove</div>
|
|
<div class="item">Hide</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown example">
|
|
<h4 class="ui header">Inline</h4>
|
|
<p>A dropdown can be formatted to appear inline in other content</p>
|
|
<div>Show me posts trending
|
|
<div class="ui inline dropdown">
|
|
<div class="text">today</div>
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item" data-text="today">Today</div>
|
|
<div class="item" data-text="this week">This Week</div>
|
|
<div class="item" data-text="this month">This Month</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown example">
|
|
<h4 class="ui header">Selection</h4>
|
|
<p>A dropdown can be formatted to allow selection of a menu choice.</p>
|
|
<div class="ui selection dropdown">
|
|
<input type="hidden" name="gender">
|
|
<div class="default text">Gender</div>
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item" data-value="male">Male</div>
|
|
<div class="item" data-value="female">Female</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="button example">
|
|
<h4 class="ui header">Floating</h4>
|
|
<p>A dropdown menu can appear to be floating below an element.</p>
|
|
<div class="ui teal buttons">
|
|
<div class="ui button">Save</div>
|
|
<div class="ui teal floating dropdown icon button">
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item"><i class="edit icon"></i>Edit Post</div>
|
|
<div class="item"><i class="delete icon"></i>Remove Post</div>
|
|
<div class="item"><i class="hide icon"></i>Hide Post</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hover example">
|
|
<h4 class="ui header">Pointing</h4>
|
|
<p>A dropdown can be formatted so that its menu is pointing</p>
|
|
<div class="ui compact menu">
|
|
<div class="menu">
|
|
<a class="active item">
|
|
<i class="home icon"></i> Home
|
|
</a>
|
|
<div class="ui pointing dropdown link item">
|
|
<i class="icon mail"></i> Messages <i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<a class="item"><i class="mail icon"></i>Inbox</a>
|
|
<a class="item"><i class="book icon"></i>Archive</a>
|
|
</div>
|
|
</div>
|
|
<a class="item">
|
|
<i class="user icon"></i> Browse
|
|
</a>
|
|
<a class="item">
|
|
<i class="question icon"></i> Help
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another button example">
|
|
<div class="ui blue labeled icon top left pointing dropdown button">
|
|
<i class="settings icon"></i>
|
|
<span class="text">Settings</span>
|
|
<div class="menu">
|
|
<div class="item"><i class="edit icon"></i>Edit</div>
|
|
<div class="item"><i class="delete icon"></i>Remove</div>
|
|
<div class="item"><i class="hide icon"></i>Hide</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui red labeled icon top right pointing dropdown button">
|
|
<i class="settings icon"></i>
|
|
<span class="text">Settings</span>
|
|
<div class="menu">
|
|
<div class="item"><i class="edit icon"></i>Edit</div>
|
|
<div class="item"><i class="delete icon"></i>Remove</div>
|
|
<div class="item"><i class="hide icon"></i>Hide</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another button example">
|
|
<div class="ui teal right pointing dropdown icon button">
|
|
<i class="settings icon"></i>
|
|
<div class="menu">
|
|
<div class="item"><i class="edit icon"></i>Edit</div>
|
|
<div class="item"><i class="delete icon"></i>Remove</div>
|
|
<div class="item"><i class="hide icon"></i>Hide</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui green left pointing dropdown icon button">
|
|
<i class="settings icon"></i>
|
|
<div class="menu">
|
|
<div class="item"><i class="edit icon"></i>Edit</div>
|
|
<div class="item"><i class="delete icon"></i>Remove</div>
|
|
<div class="item"><i class="hide icon"></i>Hide</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Simple</h4>
|
|
<p>A simple dropdown can open without javascript</p>
|
|
<div class="ui compact menu">
|
|
<div class="ui simple dropdown item">
|
|
Dropdown <i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item">Choice 1</div>
|
|
<div class="item">Choice 2</div>
|
|
<div class="item">Choice 3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
<div class="dropdown example">
|
|
<h4 class="ui header">Fluid</h4>
|
|
<p>A dropdown can take the full width of its parent</p>
|
|
<div class="ui vertical menu">
|
|
<a class="item">Link 1</a>
|
|
<a class="item">Link 2</a>
|
|
<div class="header item">All Sections</div>
|
|
<div class="ui item">
|
|
<div class="ui fluid selection dropdown">
|
|
<div class="text">More</div>
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item">Choice 1</div>
|
|
<div class="item">Choice 2</div>
|
|
<div class="item">Choice 3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">States</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Active</h4>
|
|
<p>An active dropdown menu has its menu open</p>
|
|
<div class="ui compact menu">
|
|
<div class="ui simple active dropdown item">
|
|
Dropdown <i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item">Choice 1</div>
|
|
<div class="item">Choice 2</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Disabled</h4>
|
|
<p>A disabled dropdown menu will not open or close</p>
|
|
<div class="ui menu">
|
|
<div class="ui simple disabled dropdown item">
|
|
Dropdown <i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item">Choice 1</div>
|
|
<div class="item">Choice 2</div>
|
|
<div class="item">Choice 3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="ui tab" data-tab="usage">
|
|
<h2 class="ui dividing header">Initializing</h2>
|
|
|
|
<h3 class="ui header">Initializing a dropdown</h3>
|
|
<div class="code" data-label="HTML" data-type="html">
|
|
<div class="ui dropdown">
|
|
<div class="text">Select</div>
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item" data-value="option1">Option 1</div>
|
|
<div class="item" data-value="option2">Option 2</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="code" data-label="Javascript" data-type="javascript">
|
|
$('.ui.dropdown')
|
|
.dropdown()
|
|
;
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Behavior</h2>
|
|
|
|
<div class="no example">
|
|
<h4 class="ui header">Show</h4>
|
|
<p>A dropdown can show its menu</p>
|
|
<div class="ignore code">
|
|
$('.ui.dropdown')
|
|
.dropdown('show')
|
|
;
|
|
</div>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">Hide</h4>
|
|
<p>A dropdown can hide its menu</p>
|
|
<div class="ignore code">
|
|
$('.ui.dropdown')
|
|
.dropdown('hide')
|
|
;
|
|
</div>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">Toggle</h4>
|
|
<p>A dropdown can toggle between menu visibility</p>
|
|
<div class="ignore code">
|
|
$('.ui.dropdown')
|
|
.dropdown('toggle')
|
|
;
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui tab" data-tab="examples">
|
|
|
|
<h2 class="ui dividing header">Examples</h2>
|
|
|
|
<div class="dropdown example">
|
|
<h3 class="ui header">Re-selecting values</h3>
|
|
<p>A dropdown will automatically select on page load any menu item that includes the currently value of <code>text</code> or your dropdown's hidden input value. This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.</p>
|
|
|
|
Current action: <div class="ui inline dropdown">
|
|
<div class="text">Hide</div>
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item">Edit</div>
|
|
<div class="item">Remove</div>
|
|
<div class="item">Hide</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="dropdown example">
|
|
<h3 class="ui header">Button Group</h3>
|
|
<p>A <a href="/elements/button.html">button group</a> can be formatted to show additional content as a dropdown</p>
|
|
<div class="ui red icon buttons">
|
|
<div class="ui top left pointing dropdown button">
|
|
<i class="user icon"></i>
|
|
<div class="menu">
|
|
<div class="item"><i class="edit icon"></i>Edit User</div>
|
|
<div class="item"><i class="delete icon"></i>Remove User</div>
|
|
<div class="item"><i class="hide icon"></i>Make Invisible</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui top left pointing dropdown button">
|
|
<i class="users icon"></i>
|
|
<div class="menu">
|
|
<div class="item"><i class="edit icon"></i>Edit Group</div>
|
|
<div class="item"><i class="delete icon"></i>Remove Group</div>
|
|
<div class="item"><i class="hide icon"></i>Hide from Group</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui top right pointing dropdown button">
|
|
<i class="settings icon"></i>
|
|
<div class="menu">
|
|
<div class="item"><i class="edit icon"></i>Edit</div>
|
|
<div class="item"><i class="delete icon"></i>Remove</div>
|
|
<div class="item"><i class="hide icon"></i>Hide</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="button example">
|
|
<h3 class="ui header">Combo Button</h3>
|
|
<p>A <a href="/elements/button.html">button</a> can be formatted with a dropdown</p>
|
|
<div class="ui teal buttons">
|
|
<div class="ui button">Update Post</div>
|
|
<div class="ui teal dropdown icon button">
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item"><i class="edit icon"></i>Edit Post</div>
|
|
<div class="item"><i class="delete icon"></i>Remove Post</div>
|
|
<div class="item"><i class="hide icon"></i>Hide Post</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown example">
|
|
<h3 class="ui header">Multiple Levels</h3>
|
|
<p>A dropdown menu can also contain sub menus inside of it</p>
|
|
My favorite animal breed is <div class="ui inline dropdown">
|
|
<input type="hidden" name="gender">
|
|
<div class="text">Shiba Inu</div>
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item">
|
|
<i class="dropdown icon"></i>
|
|
Dogs
|
|
<div class="menu">
|
|
<div class="item">Shiba Inu</div>
|
|
<div class="item">Poodle</div>
|
|
<div class="item">Labrador</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="dropdown icon"></i>
|
|
Cats
|
|
<div class="menu">
|
|
<div class="item">Aegean</div>
|
|
<div class="item">Balinese</div>
|
|
<div class="item">Persian</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="hover example">
|
|
<h3 class="ui header">Menu</h3>
|
|
<p>A <a href="/collections/menu.html">menu</a> element can contain a dropdown</p>
|
|
<div class="ui compact tiered purple inverted menu">
|
|
<div class="menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="ui dropdown item">
|
|
<i class="icon mail"></i> Messages <i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item">
|
|
<i class="mail icon"></i>Categories
|
|
<div class="menu">
|
|
<div class="item">Unread</div>
|
|
<div class="item">Promotions</div>
|
|
<div class="item">Updates</div>
|
|
</div>
|
|
</div>
|
|
<div class="item"><i class="book icon"></i>Archive</div>
|
|
</div>
|
|
</a>
|
|
<a class="item">
|
|
<i class="user icon"></i> Browse
|
|
</a>
|
|
</div>
|
|
<div class="sub menu">
|
|
<a class="item">Activity Feed</a>
|
|
<a class="item">Profile</a>
|
|
<a class="item">Events</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown example">
|
|
<h3 class="ui header">Form</h3>
|
|
<p>A dropdown can be formatted to allow selection inside a <a href="/collections/form.html">form</a></p>
|
|
<div class="ui form segment">
|
|
<p>Let's go ahead and get you signed up.</p>
|
|
<div class="two fields">
|
|
<div class="field">
|
|
<label>First Name</label>
|
|
<input placeholder="First Name" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Last Name</label>
|
|
<input placeholder="Last Name" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Gender</label>
|
|
<div class="ui dropdown selection">
|
|
<input type="hidden" name="gender">
|
|
<i class="dropdown icon"></i>
|
|
<div class="default text">...</div>
|
|
<div class="menu">
|
|
<div class="item" data-value="male">Male</div>
|
|
<div class="item" data-value="female">Female</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="transition example">
|
|
<h3 class="ui header">Transitions</h3>
|
|
<p>A dropdown can have different <a href="/modules/transition.html">transitions</a>.</p>
|
|
<div class="ui teal buttons">
|
|
<div class="ui button">Toggle</div>
|
|
<div class="ui teal floating dropdown icon button">
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item" data-value="horizontal flip">Horizontal Flip</div>
|
|
<div class="item" data-value="fade up">Fade Up</div>
|
|
<div class="item" data-value="scale">Scale</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui tab" data-tab="settings">
|
|
|
|
<h2 class="ui dividing header">Settings</h2>
|
|
|
|
<div class="no example">
|
|
|
|
<h4 class="ui header">Dropdown Settings</h4>
|
|
<p>Dropdown settings modify the dropdown's behavior</p>
|
|
<table class="ui celled sortable definition table segment">
|
|
<thead>
|
|
<th>Setting</th>
|
|
<th class="four wide">Default</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>on</td>
|
|
<td>click</td>
|
|
<td>Event used to trigger dropdown (Hover, Click)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>delay</td>
|
|
<td>
|
|
<div class="code">
|
|
delay: {
|
|
show: 50,
|
|
hide: 300
|
|
}
|
|
</div>
|
|
</td>
|
|
<td>Time in milliseconds to debounce show or hide behavior when <code>on: hover</code> is used.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>transition</td>
|
|
<td>
|
|
slide down
|
|
</td>
|
|
<td>Named transition to use when animating menu in and out. Fade and slide down are available without including <a href="/modules/transition.html">ui transitions</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>duration</td>
|
|
<td>
|
|
250
|
|
</td>
|
|
<td>Duration of animation events</td>
|
|
</tr>
|
|
<tr>
|
|
<td>action</td>
|
|
<td>auto</td>
|
|
<td>Sets a default action to occur.
|
|
<div class="ui vertical divided list">
|
|
<div class="item">
|
|
<div class="header">activate</div>
|
|
<div class="description">Most likely action will be determined by type of dropdown, for example a selection dropdown will automatically use updateForm</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="header">nothing</div>
|
|
<div class="description">no action occurs</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="header">hide</div>
|
|
<div class="description">Dropdown menu is hidden</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="header">activate</div>
|
|
<div class="description">Dropdown menu is hidden, item activated and text is changed</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="header">function(){}</div>
|
|
<div class="description">custom function is executed</div>
|
|
</div>
|
|
</div>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="ui horizontal section divider"><i class="icon setting"></i></div>
|
|
<h4 class="ui header">Callbacks</h4>
|
|
<p>Callback settings specify a function to occur after a specific behavior.</p>
|
|
|
|
<table class="ui celled sortable definition table segment">
|
|
<thead>
|
|
<th class="four wide">Setting</th>
|
|
<th>Context</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>onChange(value, text)</td>
|
|
<td>Dropdown</td>
|
|
<td>Is called after a dropdown item is selected. Receieves the name and value of selection.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onShow</td>
|
|
<td>Dropdown</td>
|
|
<td>Is called after a dropdown is shown.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onHide</td>
|
|
<td>Dropdown</td>
|
|
<td>Is called after a dropdown is hidden.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<div class="no example">
|
|
|
|
<h4 class="ui header">DOM Settings</h4>
|
|
<p>DOM settings specify how this module should interface with the DOM</p>
|
|
<table class="ui celled sortable definition table segment">
|
|
<thead>
|
|
<th>Setting</th>
|
|
<th class="four wide">Default</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>namespace</td>
|
|
<td>dropdown</td>
|
|
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>selector</td>
|
|
<td colspan="2">
|
|
<div class="code">
|
|
selector : {
|
|
input : '> input[type="hidden"]',
|
|
item : '.menu > .item',
|
|
menu : '.menu',
|
|
text : '> .text'
|
|
}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>metadata</td>
|
|
<td colspan="2">
|
|
<div class="code">
|
|
metadata: {
|
|
text : 'text',
|
|
value : 'value'
|
|
}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>className</td>
|
|
<td colspan="2">
|
|
<div class="code">
|
|
className : {
|
|
active : 'active',
|
|
disabled : 'disabled',
|
|
placeholder : 'default',
|
|
visible : 'visible'
|
|
}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<div class="no example">
|
|
|
|
<h4 class="ui header">Debug Settings</h4>
|
|
<p>Debug settings controls debug output to the console</p>
|
|
<table class="ui celled sortable definition table segment">
|
|
<thead>
|
|
<th>Setting</th>
|
|
<th class="four wide">Default</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>name</td>
|
|
<td>Dropdown</td>
|
|
<td>Name used in debug logs</td>
|
|
</tr>
|
|
<tr>
|
|
<td>debug</td>
|
|
<td>True</td>
|
|
<td>Provides standard debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>performance</td>
|
|
<td>True</td>
|
|
<td>Provides standard debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>verbose</td>
|
|
<td>True</td>
|
|
<td>Provides ancillary debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>error</td>
|
|
<td colspan="2">
|
|
<div class="code">
|
|
error : {
|
|
action : 'You called a dropdown action that was not defined',
|
|
method : 'The method you called is not defined.',
|
|
transition : 'The requested transition was not found'
|
|
}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|