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.
1227 lines
50 KiB
1227 lines
50 KiB
---
|
|
layout : 'default'
|
|
css : 'dropdown'
|
|
|
|
title : 'Dropdown'
|
|
description : 'A dropdown allows a user to select a value from a series of options'
|
|
type : 'UI Module'
|
|
|
|
element : 'dropdown'
|
|
elementType : 'module'
|
|
|
|
themes : ['Default']
|
|
---
|
|
|
|
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/dropdown.less" />
|
|
|
|
<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="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>
|
|
|
|
<div class="dropdown example">
|
|
<h4 class="ui header">Selection</h4>
|
|
<p>A dropdown can be used for user selection</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="1">Male</div>
|
|
<div class="item" data-value="0">Female</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another dropdown example">
|
|
<div class="ui ignored info message">
|
|
<div class="header">Converting Select Elements</div>
|
|
<p>You can initialize a selection dropdown directly on a select element, any option that is given a blank value will automatically be converted into a placeholder</p>
|
|
<p>It is recommended to include the necessary html unless absolutely necessary, otherwise elements will experience a flash of unstyled
|
|
</div>
|
|
<select class="ui dropdown">
|
|
<option value="">Gender</option>
|
|
<option value="1">Male</option>
|
|
<option value="0">Female</option>
|
|
</select>
|
|
<div class="existing code">
|
|
<select class="ui dropdown">
|
|
<option value="">Gender</option>
|
|
<option value="1">Male</option>
|
|
<option value="0">Female</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown example">
|
|
<h4 class="ui header">Search Selection</h4>
|
|
<p>A selection dropdown can allow a user to search through a large list of choices.</p>
|
|
<div class="ui search selection dropdown">
|
|
<input type="hidden" name="country">
|
|
<i class="dropdown icon"></i>
|
|
<div class="default text">Select Country</div>
|
|
<div class="menu">
|
|
<div class="item"><i class="flag andorra"></i> Andorra</div>
|
|
<div class="item"><i class="flag united arab emirates"></i> United Arab Emirates</div>
|
|
<div class="item"><i class="flag afghanistan"></i> Afghanistan</div>
|
|
<div class="item"><i class="flag antigua"></i> Antigua</div>
|
|
<div class="item"><i class="flag anguilla"></i> Anguilla</div>
|
|
<div class="item"><i class="flag albania"></i> Albania</div>
|
|
<div class="item"><i class="flag armenia"></i> Armenia</div>
|
|
<div class="item"><i class="flag netherlands antilles"></i> Netherlands Antilles</div>
|
|
<div class="item"><i class="flag angola"></i> Angola</div>
|
|
<div class="item"><i class="flag argentina"></i> Argentina</div>
|
|
<div class="item"><i class="flag american samoa"></i> American Samoa</div>
|
|
<div class="item"><i class="flag austria"></i> Austria</div>
|
|
<div class="item"><i class="flag australia"></i> Australia</div>
|
|
<div class="item"><i class="flag aruba"></i> Aruba</div>
|
|
<div class="item"><i class="flag aland islands"></i> Aland Islands</div>
|
|
<div class="item"><i class="flag azerbaijan"></i> Azerbaijan</div>
|
|
<div class="item"><i class="flag bosnia"></i> Bosnia</div>
|
|
<div class="item"><i class="flag barbados"></i> Barbados</div>
|
|
<div class="item"><i class="flag bangladesh"></i> Bangladesh</div>
|
|
<div class="item"><i class="flag belgium"></i> Belgium</div>
|
|
<div class="item"><i class="flag burkina faso"></i> Burkina Faso</div>
|
|
<div class="item"><i class="flag bulgaria"></i> Bulgaria</div>
|
|
<div class="item"><i class="flag bahrain"></i> Bahrain</div>
|
|
<div class="item"><i class="flag burundi"></i> Burundi</div>
|
|
<div class="item"><i class="flag benin"></i> Benin</div>
|
|
<div class="item"><i class="flag bermuda"></i> Bermuda</div>
|
|
<div class="item"><i class="flag brunei"></i> Brunei</div>
|
|
<div class="item"><i class="flag bolivia"></i> Bolivia</div>
|
|
<div class="item"><i class="flag brazil"></i> Brazil</div>
|
|
<div class="item"><i class="flag bahamas"></i> Bahamas</div>
|
|
<div class="item"><i class="flag bhutan"></i> Bhutan</div>
|
|
<div class="item"><i class="flag bouvet island"></i> Bouvet Island</div>
|
|
<div class="item"><i class="flag botswana"></i> Botswana</div>
|
|
<div class="item"><i class="flag belarus"></i> Belarus</div>
|
|
<div class="item"><i class="flag belize"></i> Belize</div>
|
|
<div class="item"><i class="flag canada"></i> Canada</div>
|
|
<div class="item"><i class="flag cocos islands"></i> Cocos Islands</div>
|
|
<div class="item"><i class="flag congo"></i> Congo</div>
|
|
<div class="item"><i class="flag central african republic"></i> Central African Republic</div>
|
|
<div class="item"><i class="flag congo brazzaville"></i> Congo Brazzaville</div>
|
|
<div class="item"><i class="flag switzerland"></i> Switzerland</div>
|
|
<div class="item"><i class="flag cote divoire"></i> Cote Divoire</div>
|
|
<div class="item"><i class="flag cook islands"></i> Cook Islands</div>
|
|
<div class="item"><i class="flag chile"></i> Chile</div>
|
|
<div class="item"><i class="flag cameroon"></i> Cameroon</div>
|
|
<div class="item"><i class="flag china"></i> China</div>
|
|
<div class="item"><i class="flag colombia"></i> Colombia</div>
|
|
<div class="item"><i class="flag costa rica"></i> Costa Rica</div>
|
|
<div class="item"><i class="flag serbia"></i> Serbia</div>
|
|
<div class="item"><i class="flag cuba"></i> Cuba</div>
|
|
<div class="item"><i class="flag cape verde"></i> Cape Verde</div>
|
|
<div class="item"><i class="flag christmas island"></i> Christmas Island</div>
|
|
<div class="item"><i class="flag cyprus"></i> Cyprus</div>
|
|
<div class="item"><i class="flag czech republic"></i> Czech Republic</div>
|
|
<div class="item"><i class="flag germany"></i> Germany</div>
|
|
<div class="item"><i class="flag djibouti"></i> Djibouti</div>
|
|
<div class="item"><i class="flag denmark"></i> Denmark</div>
|
|
<div class="item"><i class="flag dominica"></i> Dominica</div>
|
|
<div class="item"><i class="flag dominican republic"></i> Dominican Republic</div>
|
|
<div class="item"><i class="flag algeria"></i> Algeria</div>
|
|
<div class="item"><i class="flag ecuador"></i> Ecuador</div>
|
|
<div class="item"><i class="flag estonia"></i> Estonia</div>
|
|
<div class="item"><i class="flag egypt"></i> Egypt</div>
|
|
<div class="item"><i class="flag western sahara"></i> Western Sahara</div>
|
|
<div class="item"><i class="flag eritrea"></i> Eritrea</div>
|
|
<div class="item"><i class="flag spain"></i> Spain</div>
|
|
<div class="item"><i class="flag ethiopia"></i> Ethiopia</div>
|
|
<div class="item"><i class="flag european union"></i> European Union</div>
|
|
<div class="item"><i class="flag finland"></i> Finland</div>
|
|
<div class="item"><i class="flag fiji"></i> Fiji</div>
|
|
<div class="item"><i class="flag falkland islands"></i> Falkland Islands</div>
|
|
<div class="item"><i class="flag micronesia"></i> Micronesia</div>
|
|
<div class="item"><i class="flag faroe islands"></i> Faroe Islands</div>
|
|
<div class="item"><i class="flag france"></i> France</div>
|
|
<div class="item"><i class="flag gabon"></i> Gabon</div>
|
|
<div class="item"><i class="flag england"></i> England</div>
|
|
<div class="item"><i class="flag grenada"></i> Grenada</div>
|
|
<div class="item"><i class="flag georgia"></i> Georgia</div>
|
|
<div class="item"><i class="flag french guiana"></i> French Guiana</div>
|
|
<div class="item"><i class="flag ghana"></i> Ghana</div>
|
|
<div class="item"><i class="flag gibraltar"></i> Gibraltar</div>
|
|
<div class="item"><i class="flag greenland"></i> Greenland</div>
|
|
<div class="item"><i class="flag gambia"></i> Gambia</div>
|
|
<div class="item"><i class="flag guinea"></i> Guinea</div>
|
|
<div class="item"><i class="flag guadeloupe"></i> Guadeloupe</div>
|
|
<div class="item"><i class="flag equatorial guinea"></i> Equatorial Guinea</div>
|
|
<div class="item"><i class="flag greece"></i> Greece</div>
|
|
<div class="item"><i class="flag sandwich islands"></i> Sandwich Islands</div>
|
|
<div class="item"><i class="flag guatemala"></i> Guatemala</div>
|
|
<div class="item"><i class="flag guam"></i> Guam</div>
|
|
<div class="item"><i class="flag guinea-bissau"></i> Guinea-Bissau</div>
|
|
<div class="item"><i class="flag guyana"></i> Guyana</div>
|
|
<div class="item"><i class="flag hong kong"></i> Hong Kong</div>
|
|
<div class="item"><i class="flag heard island"></i> Heard Island</div>
|
|
<div class="item"><i class="flag honduras"></i> Honduras</div>
|
|
<div class="item"><i class="flag croatia"></i> Croatia</div>
|
|
<div class="item"><i class="flag haiti"></i> Haiti</div>
|
|
<div class="item"><i class="flag hungary"></i> Hungary</div>
|
|
<div class="item"><i class="flag indonesia"></i> Indonesia</div>
|
|
<div class="item"><i class="flag ireland"></i> Ireland</div>
|
|
<div class="item"><i class="flag israel"></i> Israel</div>
|
|
<div class="item"><i class="flag india"></i> India</div>
|
|
<div class="item"><i class="flag indian ocean territory"></i> Indian Ocean Territory</div>
|
|
<div class="item"><i class="flag iraq"></i> Iraq</div>
|
|
<div class="item"><i class="flag iran"></i> Iran</div>
|
|
<div class="item"><i class="flag iceland"></i> Iceland</div>
|
|
<div class="item"><i class="flag italy"></i> Italy</div>
|
|
<div class="item"><i class="flag jamaica"></i> Jamaica</div>
|
|
<div class="item"><i class="flag jordan"></i> Jordan</div>
|
|
<div class="item"><i class="flag japan"></i> Japan</div>
|
|
<div class="item"><i class="flag kenya"></i> Kenya</div>
|
|
<div class="item"><i class="flag kyrgyzstan"></i> Kyrgyzstan</div>
|
|
<div class="item"><i class="flag cambodia"></i> Cambodia</div>
|
|
<div class="item"><i class="flag kiribati"></i> Kiribati</div>
|
|
<div class="item"><i class="flag comoros"></i> Comoros</div>
|
|
<div class="item"><i class="flag saint kitts and nevis"></i> Saint Kitts and Nevis</div>
|
|
<div class="item"><i class="flag north korea"></i> North Korea</div>
|
|
<div class="item"><i class="flag south korea"></i> South Korea</div>
|
|
<div class="item"><i class="flag kuwait"></i> Kuwait</div>
|
|
<div class="item"><i class="flag cayman islands"></i> Cayman Islands</div>
|
|
<div class="item"><i class="flag kazakhstan"></i> Kazakhstan</div>
|
|
<div class="item"><i class="flag laos"></i> Laos</div>
|
|
<div class="item"><i class="flag lebanon"></i> Lebanon</div>
|
|
<div class="item"><i class="flag saint lucia"></i> Saint Lucia</div>
|
|
<div class="item"><i class="flag liechtenstein"></i> Liechtenstein</div>
|
|
<div class="item"><i class="flag sri lanka"></i> Sri Lanka</div>
|
|
<div class="item"><i class="flag liberia"></i> Liberia</div>
|
|
<div class="item"><i class="flag lesotho"></i> Lesotho</div>
|
|
<div class="item"><i class="flag lithuania"></i> Lithuania</div>
|
|
<div class="item"><i class="flag luxembourg"></i> Luxembourg</div>
|
|
<div class="item"><i class="flag latvia"></i> Latvia</div>
|
|
<div class="item"><i class="flag libya"></i> Libya</div>
|
|
<div class="item"><i class="flag morocco"></i> Morocco</div>
|
|
<div class="item"><i class="flag monaco"></i> Monaco</div>
|
|
<div class="item"><i class="flag moldova"></i> Moldova</div>
|
|
<div class="item"><i class="flag montenegro"></i> Montenegro</div>
|
|
<div class="item"><i class="flag madagascar"></i> Madagascar</div>
|
|
<div class="item"><i class="flag marshall islands"></i> Marshall Islands</div>
|
|
<div class="item"><i class="flag macedonia"></i> MacEdonia</div>
|
|
<div class="item"><i class="flag mali"></i> Mali</div>
|
|
<div class="item"><i class="flag burma"></i> Burma</div>
|
|
<div class="item"><i class="flag mongolia"></i> Mongolia</div>
|
|
<div class="item"><i class="flag macau"></i> MacAu</div>
|
|
<div class="item"><i class="flag northern mariana islands"></i> Northern Mariana Islands</div>
|
|
<div class="item"><i class="flag martinique"></i> Martinique</div>
|
|
<div class="item"><i class="flag mauritania"></i> Mauritania</div>
|
|
<div class="item"><i class="flag montserrat"></i> Montserrat</div>
|
|
<div class="item"><i class="flag malta"></i> Malta</div>
|
|
<div class="item"><i class="flag mauritius"></i> Mauritius</div>
|
|
<div class="item"><i class="flag maldives"></i> Maldives</div>
|
|
<div class="item"><i class="flag malawi"></i> Malawi</div>
|
|
<div class="item"><i class="flag mexico"></i> Mexico</div>
|
|
<div class="item"><i class="flag malaysia"></i> Malaysia</div>
|
|
<div class="item"><i class="flag mozambique"></i> Mozambique</div>
|
|
<div class="item"><i class="flag namibia"></i> Namibia</div>
|
|
<div class="item"><i class="flag new caledonia"></i> New Caledonia</div>
|
|
<div class="item"><i class="flag niger"></i> Niger</div>
|
|
<div class="item"><i class="flag norfolk island"></i> Norfolk Island</div>
|
|
<div class="item"><i class="flag nigeria"></i> Nigeria</div>
|
|
<div class="item"><i class="flag nicaragua"></i> Nicaragua</div>
|
|
<div class="item"><i class="flag netherlands"></i> Netherlands</div>
|
|
<div class="item"><i class="flag norway"></i> Norway</div>
|
|
<div class="item"><i class="flag nepal"></i> Nepal</div>
|
|
<div class="item"><i class="flag nauru"></i> Nauru</div>
|
|
<div class="item"><i class="flag niue"></i> Niue</div>
|
|
<div class="item"><i class="flag new zealand"></i> New Zealand</div>
|
|
<div class="item"><i class="flag oman"></i> Oman</div>
|
|
<div class="item"><i class="flag panama"></i> Panama</div>
|
|
<div class="item"><i class="flag peru"></i> Peru</div>
|
|
<div class="item"><i class="flag french polynesia"></i> French Polynesia</div>
|
|
<div class="item"><i class="flag new guinea"></i> New Guinea</div>
|
|
<div class="item"><i class="flag philippines"></i> Philippines</div>
|
|
<div class="item"><i class="flag pakistan"></i> Pakistan</div>
|
|
<div class="item"><i class="flag poland"></i> Poland</div>
|
|
<div class="item"><i class="flag saint pierre"></i> Saint Pierre</div>
|
|
<div class="item"><i class="flag pitcairn islands"></i> Pitcairn Islands</div>
|
|
<div class="item"><i class="flag puerto rico"></i> Puerto Rico</div>
|
|
<div class="item"><i class="flag palestine"></i> Palestine</div>
|
|
<div class="item"><i class="flag portugal"></i> Portugal</div>
|
|
<div class="item"><i class="flag palau"></i> Palau</div>
|
|
<div class="item"><i class="flag paraguay"></i> Paraguay</div>
|
|
<div class="item"><i class="flag qatar"></i> Qatar</div>
|
|
<div class="item"><i class="flag reunion"></i> Reunion</div>
|
|
<div class="item"><i class="flag romania"></i> Romania</div>
|
|
<div class="item"><i class="flag serbia"></i> Serbia</div>
|
|
<div class="item"><i class="flag russia"></i> Russia</div>
|
|
<div class="item"><i class="flag rwanda"></i> Rwanda</div>
|
|
<div class="item"><i class="flag saudi arabia"></i> Saudi Arabia</div>
|
|
<div class="item"><i class="flag solomon islands"></i> Solomon Islands</div>
|
|
<div class="item"><i class="flag seychelles"></i> Seychelles</div>
|
|
<div class="item"><i class="flag sudan"></i> Sudan</div>
|
|
<div class="item"><i class="flag sweden"></i> Sweden</div>
|
|
<div class="item"><i class="flag singapore"></i> Singapore</div>
|
|
<div class="item"><i class="flag saint helena"></i> Saint Helena</div>
|
|
<div class="item"><i class="flag slovenia"></i> Slovenia</div>
|
|
<div class="item"><i class="flag svalbard"></i> Svalbard, Jan Mayen</div>
|
|
<div class="item"><i class="flag slovakia"></i> Slovakia</div>
|
|
<div class="item"><i class="flag sierra leone"></i> Sierra Leone</div>
|
|
<div class="item"><i class="flag san marino"></i> San Marino</div>
|
|
<div class="item"><i class="flag senegal"></i> Senegal</div>
|
|
<div class="item"><i class="flag somalia"></i> Somalia</div>
|
|
<div class="item"><i class="flag suriname"></i> Suriname</div>
|
|
<div class="item"><i class="flag sao tome"></i> Sao Tome</div>
|
|
<div class="item"><i class="flag el salvador"></i> El Salvador</div>
|
|
<div class="item"><i class="flag syria"></i> Syria</div>
|
|
<div class="item"><i class="flag swaziland"></i> Swaziland</div>
|
|
<div class="item"><i class="flag caicos islands"></i> Caicos Islands</div>
|
|
<div class="item"><i class="flag chad"></i> Chad</div>
|
|
<div class="item"><i class="flag french territories"></i> French Territories</div>
|
|
<div class="item"><i class="flag togo"></i> Togo</div>
|
|
<div class="item"><i class="flag thailand"></i> Thailand</div>
|
|
<div class="item"><i class="flag tajikistan"></i> Tajikistan</div>
|
|
<div class="item"><i class="flag tokelau"></i> Tokelau</div>
|
|
<div class="item"><i class="flag timorleste"></i> Timorleste</div>
|
|
<div class="item"><i class="flag turkmenistan"></i> Turkmenistan</div>
|
|
<div class="item"><i class="flag tunisia"></i> Tunisia</div>
|
|
<div class="item"><i class="flag tonga"></i> Tonga</div>
|
|
<div class="item"><i class="flag turkey"></i> Turkey</div>
|
|
<div class="item"><i class="flag trinidad"></i> Trinidad</div>
|
|
<div class="item"><i class="flag tuvalu"></i> Tuvalu</div>
|
|
<div class="item"><i class="flag taiwan"></i> Taiwan</div>
|
|
<div class="item"><i class="flag tanzania"></i> Tanzania</div>
|
|
<div class="item"><i class="flag ukraine"></i> Ukraine</div>
|
|
<div class="item"><i class="flag uganda"></i> Uganda</div>
|
|
<div class="item"><i class="flag us minor islands"></i> US Minor Islands</div>
|
|
<div class="item"><i class="flag united states"></i> United States</div>
|
|
<div class="item"><i class="flag uruguay"></i> Uruguay</div>
|
|
<div class="item"><i class="flag uzbekistan"></i> Uzbekistan</div>
|
|
<div class="item"><i class="flag vatican city"></i> Vatican City</div>
|
|
<div class="item"><i class="flag saint vincent"></i> Saint Vincent</div>
|
|
<div class="item"><i class="flag venezuela"></i> Venezuela</div>
|
|
<div class="item"><i class="flag british virgin islands"></i> British Virgin Islands</div>
|
|
<div class="item"><i class="flag us virgin islands"></i> Us Virgin Islands</div>
|
|
<div class="item"><i class="flag vietnam"></i> Vietnam</div>
|
|
<div class="item"><i class="flag vanuatu"></i> Vanuatu</div>
|
|
<div class="item"><i class="flag wallis and futuna"></i> Wallis and Futuna</div>
|
|
<div class="item"><i class="flag samoa"></i> Samoa</div>
|
|
<div class="item"><i class="flag yemen"></i> Yemen</div>
|
|
<div class="item"><i class="flag mayotte"></i> Mayotte</div>
|
|
<div class="item"><i class="flag south africa"></i> South Africa</div>
|
|
<div class="item"><i class="flag zambia"></i> Zambia</div>
|
|
<div class="item"><i class="flag zimbabwe"></i> Zimbabwe</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="another dropdown example">
|
|
<select class="ui search dropdown">
|
|
<option value="">State</option>
|
|
<option value="AL">Alabama</option>
|
|
<option value="AL">Alabama</option>
|
|
<option value="AK">Alaska</option>
|
|
<option value="AZ">Arizona</option>
|
|
<option value="AR">Arkansas</option>
|
|
<option value="CA">California</option>
|
|
<option value="CO">Colorado</option>
|
|
<option value="CT">Connecticut</option>
|
|
<option value="DE">Delaware</option>
|
|
<option value="DC">District Of Columbia</option>
|
|
<option value="FL">Florida</option>
|
|
<option value="GA">Georgia</option>
|
|
<option value="HI">Hawaii</option>
|
|
<option value="ID">Idaho</option>
|
|
<option value="IL">Illinois</option>
|
|
<option value="IN">Indiana</option>
|
|
<option value="IA">Iowa</option>
|
|
<option value="KS">Kansas</option>
|
|
<option value="KY">Kentucky</option>
|
|
<option value="LA">Louisiana</option>
|
|
<option value="ME">Maine</option>
|
|
<option value="MD">Maryland</option>
|
|
<option value="MA">Massachusetts</option>
|
|
<option value="MI">Michigan</option>
|
|
<option value="MN">Minnesota</option>
|
|
<option value="MS">Mississippi</option>
|
|
<option value="MO">Missouri</option>
|
|
<option value="MT">Montana</option>
|
|
<option value="NE">Nebraska</option>
|
|
<option value="NV">Nevada</option>
|
|
<option value="NH">New Hampshire</option>
|
|
<option value="NJ">New Jersey</option>
|
|
<option value="NM">New Mexico</option>
|
|
<option value="NY">New York</option>
|
|
<option value="NC">North Carolina</option>
|
|
<option value="ND">North Dakota</option>
|
|
<option value="OH">Ohio</option>
|
|
<option value="OK">Oklahoma</option>
|
|
<option value="OR">Oregon</option>
|
|
<option value="PA">Pennsylvania</option>
|
|
<option value="RI">Rhode Island</option>
|
|
<option value="SC">South Carolina</option>
|
|
<option value="SD">South Dakota</option>
|
|
<option value="TN">Tennessee</option>
|
|
<option value="TX">Texas</option>
|
|
<option value="UT">Utah</option>
|
|
<option value="VT">Vermont</option>
|
|
<option value="VA">Virginia</option>
|
|
<option value="WA">Washington</option>
|
|
<option value="WV">West Virginia</option>
|
|
<option value="WI">Wisconsin</option>
|
|
<option value="WY">Wyoming</option>
|
|
</select>
|
|
<div class="existing code">
|
|
<select class="ui search dropdown">
|
|
<option value="">State</option>
|
|
<option value="AL">Alabama</option>
|
|
<option value="AL">Alabama</option>
|
|
<option value="AK">Alaska</option>
|
|
<!-- Omitted for brevity !-->
|
|
<option value="WA">Washington</option>
|
|
<option value="WV">West Virginia</option>
|
|
<option value="WI">Wisconsin</option>
|
|
<option value="WY">Wyoming</option>
|
|
</select>
|
|
</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="hover example">
|
|
<h4 class="ui header">Pointing</h4>
|
|
<p>A dropdown can be formatted so that its menu is pointing</p>
|
|
<div class="ui menu">
|
|
<div class="menu">
|
|
<a class="active item">
|
|
Home
|
|
</a>
|
|
<div class="ui pointing dropdown link item">
|
|
<i class="dropdown icon"></i>
|
|
Messages
|
|
<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">
|
|
Browse
|
|
</a>
|
|
<a class="item">
|
|
Help
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another hover example">
|
|
<div class="ui vertical menu">
|
|
<div class="menu">
|
|
<a class="active item">
|
|
Home
|
|
</a>
|
|
<div class="ui left pointing dropdown link item">
|
|
<i class="dropdown icon"></i>
|
|
Messages
|
|
<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">
|
|
Browse
|
|
</a>
|
|
<a class="item">
|
|
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 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 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="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 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="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">
|
|
<i class="dropdown icon"></i>
|
|
Dropdown
|
|
<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="dropdown example">
|
|
<h4 class="ui header">Error</h4>
|
|
<p>An errored dropddown can alert a user to a problem</p>
|
|
<div class="ui floating dropdown error">
|
|
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>
|
|
<br><br>
|
|
<div class="ui selection dropdown error">
|
|
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>
|
|
|
|
<h4 class="ui header">Simple Dropdown (No Javascript)</h4>
|
|
<div class="example">
|
|
<h4 class="ui header">Active</h4>
|
|
<p>An active dropdown has its menu open</p>
|
|
<div class="ui info message">An active state will only affect a simple dropdown. To activate a menu on a dropdown module use <code>$('.ui.dropdown').dropdown('show');</code></div>
|
|
<div class="ui simple active dropdown">
|
|
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 class="example">
|
|
<h4 class="ui header">Disabled</h4>
|
|
<p>A disabled dropdown menu will not open or close</p>
|
|
<div class="ui info message">A disabled state will only affect a simple dropdown. To disable a dropdown module use <code>$('.ui.dropdown').dropdown('destroy');</code></div>
|
|
<div class="ui simple disabled dropdown">
|
|
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 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>
|
|
|
|
<p>All the following <a href="/module.html#/behavior">behaviors</a> can be called using the syntax:</p>
|
|
<div class="code">
|
|
$('.your.element')
|
|
.dropdown('behavior name', argumentOne, argumentTwo)
|
|
;
|
|
</div>
|
|
|
|
<table class="ui definition sortable celled table segment">
|
|
<thead>
|
|
<tr>
|
|
<th>Behavior</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>toggle</td>
|
|
<td>Toggles current visibility of dropdown</td>
|
|
</tr>
|
|
<tr>
|
|
<td>show</td>
|
|
<td>Shows dropdown</td>
|
|
</tr>
|
|
<tr>
|
|
<td>hide</td>
|
|
<td>Hides dropdown</td>
|
|
</tr>
|
|
<tr>
|
|
<td>hide others</td>
|
|
<td>Hides all other dropdowns that is not current dropdown</td>
|
|
</tr>
|
|
<tr>
|
|
<td>restore defaults</td>
|
|
<td>Restores dropdown text and value to its value on page load</td>
|
|
</tr>
|
|
<tr>
|
|
<td>restore default text</td>
|
|
<td>Restores dropdown text to its value on page load</td>
|
|
</tr>
|
|
<tr>
|
|
<td>restore default value</td>
|
|
<td>Restores dropdown value to its value on page load</td>
|
|
</tr>
|
|
<tr>
|
|
<td>save defaults</td>
|
|
<td>Saves current text and value as new defaults (for use with restore)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>set selected(value)</td>
|
|
<td>Sets selected state to a given value</td>
|
|
</tr>
|
|
<tr>
|
|
<td>set text(text)</td>
|
|
<td>Sets dropdown text to a value</td>
|
|
</tr>
|
|
<tr>
|
|
<td>set value(value)</td>
|
|
<td>Sets dropdown input to value</td>
|
|
</tr>
|
|
<tr>
|
|
<td>get text</td>
|
|
<td>Returns current dropdown text</td>
|
|
</tr>
|
|
<tr>
|
|
<td>get value</td>
|
|
<td>Returns current dropdown input value</td>
|
|
</tr>
|
|
<tr>
|
|
<td>get item(value)</td>
|
|
<td>Returns DOM element that matches a given input value</td>
|
|
</tr>
|
|
<tr>
|
|
<td>bind touch events</td>
|
|
<td>Adds touch events to element</td>
|
|
</tr>
|
|
<tr>
|
|
<td>mouse events</td>
|
|
<td>Adds mouse events to element</td>
|
|
</tr>
|
|
<tr>
|
|
<td>bind intent</td>
|
|
<td>Binds a click to document to determine if you click away from a dropdown</td>
|
|
</tr>
|
|
<tr>
|
|
<td>unbind intent</td>
|
|
<td>Unbinds document intent click</td>
|
|
</tr>
|
|
<tr>
|
|
<td>determine intent</td>
|
|
<td>Returns whether event occurred inside dropdown</td>
|
|
</tr>
|
|
<tr>
|
|
<td>determine select action(text, value)</td>
|
|
<td>Triggers preset item selection action based on settings passing text/value</td>
|
|
</tr>
|
|
<tr>
|
|
<td>set active</td>
|
|
<td>Sets dropdown to active state
|
|
<tr>
|
|
<td>set visible</td>
|
|
<td>Sets dropdown to visible state</td>
|
|
</tr>
|
|
<tr>
|
|
<td>remove active</td>
|
|
<td>rRemoves dropdown active state
|
|
<tr>
|
|
<td>remove visible</td>
|
|
<td>Removes dropdown visible state</td>
|
|
</tr>
|
|
<tr>
|
|
<td>is selection</td>
|
|
<td>Returns whether dropdown is a selection dropdown</td>
|
|
</tr>
|
|
<tr>
|
|
<td>is animated</td>
|
|
<td>Returns whether dropdown is animated</td>
|
|
</tr>
|
|
<tr>
|
|
<td>is visible</td>
|
|
<td>Returns whether dropdown is visible</td>
|
|
</tr>
|
|
<tr>
|
|
<td>is hidden</td>
|
|
<td>Returns whether dropdown is hidden</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="ui tab" data-tab="examples">
|
|
|
|
<div class="transition example">
|
|
<h3 class="ui header">Changing Transitions</h3>
|
|
<p>A dropdown can specify a different <a href="/modules/transition.html">transitions</a>.</p>
|
|
|
|
<div class="code" data-type="javascript">
|
|
$('.dropdown')
|
|
.dropdown({
|
|
// you can use any ui transition
|
|
transition: 'drop'
|
|
})
|
|
;
|
|
</div>
|
|
|
|
<div class="ui teal buttons">
|
|
<div class="ui button">Toggle</div>
|
|
<div class="ui floating dropdown icon button">
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item" data-value="drop">Drop</div>
|
|
<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 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="dropdown example">
|
|
<h3 class="ui header">Preserving User Selections</h3>
|
|
<p>This example uses a preset text value to preserve the menu item on page navigation</p>
|
|
<div class="ui ignored info icon message">
|
|
<i class="help circle icon"></i>
|
|
<div class="content">
|
|
<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 <code>hidden input</code> value.</p>
|
|
<p>This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
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 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="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 tiered purple inverted menu">
|
|
<div class="menu">
|
|
<a class="active item">
|
|
Home
|
|
</a>
|
|
<a class="ui dropdown item">
|
|
<i class="dropdown icon"></i>Messages
|
|
<div class="menu">
|
|
<div class="item">
|
|
<i class="dropdown 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">Archive</div>
|
|
</div>
|
|
</a>
|
|
<a class="item">
|
|
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">
|
|
<div class="default text">...</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>
|
|
</div>
|
|
|
|
<h3 class="ui dividing header">Using Different Dropdown Actions</h3>
|
|
|
|
<div class="button example">
|
|
<h4 class="ui header">Combo Dropdowns</h4>
|
|
<div class="ignored">
|
|
<p>A <a href="/elements/button.html">button</a> can be formatted with a dropdown.</p>
|
|
<p>You can change the default action that occurs on selection to different presets built into <em>ui dropdown</em>.</p>
|
|
<p>For example, using the <code>combo</code> preset will change the preceding buttons text value to the current selected alue</p>
|
|
<div class="evaluated code" data-type="javascript">
|
|
$('.combo.dropdown')
|
|
.dropdown({
|
|
action: 'combo'
|
|
})
|
|
;
|
|
</div>
|
|
|
|
<div class="ui teal buttons">
|
|
<div class="ui button">Save</div>
|
|
<div class="ui combo dropdown icon button">
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item"><i class="edit icon"></i> Edit</div>
|
|
<div class="item"><i class="delete icon"></i> Delete</div>
|
|
<div class="item"><i class="hide icon"></i> Hide</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="button example">
|
|
<h4 class="ui header">Link Dropdowns</h4>
|
|
<div class="ignored">
|
|
<p>If each option in your dropdown links out to another page, you might just want to make your menu hide without changing any value.</p>
|
|
<div class="evaluated code" data-type="javascript">
|
|
$('.link.dropdown')
|
|
.dropdown({
|
|
action: 'hide'
|
|
})
|
|
;
|
|
</div>
|
|
|
|
<div class="ui link dropdown icon button">
|
|
<div class="text">Go to</div>
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<a class="item" href="#link1"><i class="home icon"></i> Home</a>
|
|
<a class="item" href="#link2"><i class="users icon"></i> Browse</a>
|
|
<a class="item" href="#link3"><i class="search icon"></i> Search</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="ui tab" data-tab="settings">
|
|
|
|
<h3 class="ui header">
|
|
Dropdown Settings
|
|
<div class="sub header">Dropdown settings modify the dropdown's behavior</div>
|
|
</h3>
|
|
<table class="ui celled sortable definition table segment">
|
|
<thead>
|
|
<tr>
|
|
<th>Setting</th>
|
|
<th class="four wide">Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</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">combo</div>
|
|
<div class="description">changes text of previous element matching text selector</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="header">select</div>
|
|
<div class="description">activates menu item but does not change text</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">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>
|
|
<h3 class="ui header">
|
|
Callbacks
|
|
<div class="sub header">Callbacks specify a function to occur after a specific behavior.</div>
|
|
</h3>
|
|
|
|
<table class="ui celled sortable definition table segment">
|
|
<thead>
|
|
<tr>
|
|
<th class="four wide">Setting</th>
|
|
<th>Context</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>onChange(value, text)</td>
|
|
<td>Dropdown</td>
|
|
<td>Is called after a dropdown item is selected. receives 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>
|
|
|
|
<h3 class="ui header">
|
|
DOM Settings
|
|
<div class="sub header">DOM settings specify how this module should interface with the DOM</div>
|
|
</h3>
|
|
<table class="ui celled sortable definition table segment">
|
|
<thead>
|
|
<tr>
|
|
<th>Setting</th>
|
|
<th class="four wide">Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</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>
|
|
|
|
<h3 class="ui header">
|
|
Debug Settings
|
|
<div class="sub header">Debug settings controls debug output to the console</div>
|
|
</h3>
|
|
<table class="ui celled sortable definition table segment">
|
|
<thead>
|
|
<tr>
|
|
<th>Setting</th>
|
|
<th class="four wide">Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</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>
|