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.
1549 lines
63 KiB
1549 lines
63 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">
|
|
<h2 class="ui dividing header">Types</h2>
|
|
|
|
<div class="dropdown example">
|
|
<h4 class="ui header">Dropdown</h4>
|
|
<p>A dropdown</p>
|
|
<div class="ui dropdown">
|
|
<div class="text">Shop</div>
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="header">Categories</div>
|
|
<div class="item">Clothing</div>
|
|
<div class="item">Home Goods</div>
|
|
<div class="item">Bedroom</div>
|
|
<div class="divider"></div>
|
|
<div class="header">Order</div>
|
|
<div class="item">Status</div>
|
|
<div class="item">Cancellations</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown example">
|
|
<h4 class="ui header">Selection</h4>
|
|
<p>A dropdown can be used to select between choices in a form</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>Keep in mind however, if you initialize a dropdown directly on a select element, the dropdown contents will be hidden until javascript can render the element, causing a flash of unstyled content.</p>
|
|
</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 fluid 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" data-value="ad"><i class="ad flag"></i>Andorra</div>
|
|
<div class="item" data-value="ae"><i class="ae flag"></i>United Arab Emirates</div>
|
|
<div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
|
|
<div class="item" data-value="ag"><i class="ag flag"></i>Antigua</div>
|
|
<div class="item" data-value="ai"><i class="ai flag"></i>Anguilla</div>
|
|
<div class="item" data-value="al"><i class="al flag"></i>Albania</div>
|
|
<div class="item" data-value="am"><i class="am flag"></i>Armenia</div>
|
|
<div class="item" data-value="an"><i class="an flag"></i>Netherlands Antilles</div>
|
|
<div class="item" data-value="ao"><i class="ao flag"></i>Angola</div>
|
|
<div class="item" data-value="ar"><i class="ar flag"></i>Argentina</div>
|
|
<div class="item" data-value="as"><i class="as flag"></i>American Samoa</div>
|
|
<div class="item" data-value="at"><i class="at flag"></i>Austria</div>
|
|
<div class="item" data-value="au"><i class="au flag"></i>Australia</div>
|
|
<div class="item" data-value="aw"><i class="aw flag"></i>Aruba</div>
|
|
<div class="item" data-value="ax"><i class="ax flag"></i>Aland Islands</div>
|
|
<div class="item" data-value="az"><i class="az flag"></i>Azerbaijan</div>
|
|
<div class="item" data-value="ba"><i class="ba flag"></i>Bosnia</div>
|
|
<div class="item" data-value="bb"><i class="bb flag"></i>Barbados</div>
|
|
<div class="item" data-value="bd"><i class="bd flag"></i>Bangladesh</div>
|
|
<div class="item" data-value="be"><i class="be flag"></i>Belgium</div>
|
|
<div class="item" data-value="bf"><i class="bf flag"></i>Burkina Faso</div>
|
|
<div class="item" data-value="bg"><i class="bg flag"></i>Bulgaria</div>
|
|
<div class="item" data-value="bh"><i class="bh flag"></i>Bahrain</div>
|
|
<div class="item" data-value="bi"><i class="bi flag"></i>Burundi</div>
|
|
<div class="item" data-value="bj"><i class="bj flag"></i>Benin</div>
|
|
<div class="item" data-value="bm"><i class="bm flag"></i>Bermuda</div>
|
|
<div class="item" data-value="bn"><i class="bn flag"></i>Brunei</div>
|
|
<div class="item" data-value="bo"><i class="bo flag"></i>Bolivia</div>
|
|
<div class="item" data-value="br"><i class="br flag"></i>Brazil</div>
|
|
<div class="item" data-value="bs"><i class="bs flag"></i>Bahamas</div>
|
|
<div class="item" data-value="bt"><i class="bt flag"></i>Bhutan</div>
|
|
<div class="item" data-value="bv"><i class="bv flag"></i>Bouvet Island</div>
|
|
<div class="item" data-value="bw"><i class="bw flag"></i>Botswana</div>
|
|
<div class="item" data-value="by"><i class="by flag"></i>Belarus</div>
|
|
<div class="item" data-value="bz"><i class="bz flag"></i>Belize</div>
|
|
<div class="item" data-value="ca"><i class="ca flag"></i>Canada</div>
|
|
<div class="item" data-value="cc"><i class="cc flag"></i>Cocos Islands</div>
|
|
<div class="item" data-value="cd"><i class="cd flag"></i>Congo</div>
|
|
<div class="item" data-value="cf"><i class="cf flag"></i>Central African Republic</div>
|
|
<div class="item" data-value="cg"><i class="cg flag"></i>Congo Brazzaville</div>
|
|
<div class="item" data-value="ch"><i class="ch flag"></i>Switzerland</div>
|
|
<div class="item" data-value="ci"><i class="ci flag"></i>Cote Divoire</div>
|
|
<div class="item" data-value="ck"><i class="ck flag"></i>Cook Islands</div>
|
|
<div class="item" data-value="cl"><i class="cl flag"></i>Chile</div>
|
|
<div class="item" data-value="cm"><i class="cm flag"></i>Cameroon</div>
|
|
<div class="item" data-value="cn"><i class="cn flag"></i>China</div>
|
|
<div class="item" data-value="co"><i class="co flag"></i>Colombia</div>
|
|
<div class="item" data-value="cr"><i class="cr flag"></i>Costa Rica</div>
|
|
<div class="item" data-value="cs"><i class="cs flag"></i>Serbia</div>
|
|
<div class="item" data-value="cu"><i class="cu flag"></i>Cuba</div>
|
|
<div class="item" data-value="cv"><i class="cv flag"></i>Cape Verde</div>
|
|
<div class="item" data-value="cx"><i class="cx flag"></i>Christmas Island</div>
|
|
<div class="item" data-value="cy"><i class="cy flag"></i>Cyprus</div>
|
|
<div class="item" data-value="cz"><i class="cz flag"></i>Czech Republic</div>
|
|
<div class="item" data-value="de"><i class="de flag"></i>Germany</div>
|
|
<div class="item" data-value="dj"><i class="dj flag"></i>Djibouti</div>
|
|
<div class="item" data-value="dk"><i class="dk flag"></i>Denmark</div>
|
|
<div class="item" data-value="dm"><i class="dm flag"></i>Dominica</div>
|
|
<div class="item" data-value="do"><i class="do flag"></i>Dominican Republic</div>
|
|
<div class="item" data-value="dz"><i class="dz flag"></i>Algeria</div>
|
|
<div class="item" data-value="ec"><i class="ec flag"></i>Ecuador</div>
|
|
<div class="item" data-value="ee"><i class="ee flag"></i>Estonia</div>
|
|
<div class="item" data-value="eg"><i class="eg flag"></i>Egypt</div>
|
|
<div class="item" data-value="eh"><i class="eh flag"></i>Western Sahara</div>
|
|
<div class="item" data-value="er"><i class="er flag"></i>Eritrea</div>
|
|
<div class="item" data-value="es"><i class="es flag"></i>Spain</div>
|
|
<div class="item" data-value="et"><i class="et flag"></i>Ethiopia</div>
|
|
<div class="item" data-value="eu"><i class="eu flag"></i>European Union</div>
|
|
<div class="item" data-value="fi"><i class="fi flag"></i>Finland</div>
|
|
<div class="item" data-value="fj"><i class="fj flag"></i>Fiji</div>
|
|
<div class="item" data-value="fk"><i class="fk flag"></i>Falkland Islands</div>
|
|
<div class="item" data-value="fm"><i class="fm flag"></i>Micronesia</div>
|
|
<div class="item" data-value="fo"><i class="fo flag"></i>Faroe Islands</div>
|
|
<div class="item" data-value="fr"><i class="fr flag"></i>France</div>
|
|
<div class="item" data-value="ga"><i class="ga flag"></i>Gabon</div>
|
|
<div class="item" data-value="gb"><i class="gb flag"></i>England</div>
|
|
<div class="item" data-value="gd"><i class="gd flag"></i>Grenada</div>
|
|
<div class="item" data-value="ge"><i class="ge flag"></i>Georgia</div>
|
|
<div class="item" data-value="gf"><i class="gf flag"></i>French Guiana</div>
|
|
<div class="item" data-value="gh"><i class="gh flag"></i>Ghana</div>
|
|
<div class="item" data-value="gi"><i class="gi flag"></i>Gibraltar</div>
|
|
<div class="item" data-value="gl"><i class="gl flag"></i>Greenland</div>
|
|
<div class="item" data-value="gm"><i class="gm flag"></i>Gambia</div>
|
|
<div class="item" data-value="gn"><i class="gn flag"></i>Guinea</div>
|
|
<div class="item" data-value="gp"><i class="gp flag"></i>Guadeloupe</div>
|
|
<div class="item" data-value="gq"><i class="gq flag"></i>Equatorial Guinea</div>
|
|
<div class="item" data-value="gr"><i class="gr flag"></i>Greece</div>
|
|
<div class="item" data-value="gs"><i class="gs flag"></i>Sandwich Islands</div>
|
|
<div class="item" data-value="gt"><i class="gt flag"></i>Guatemala</div>
|
|
<div class="item" data-value="gu"><i class="gu flag"></i>Guam</div>
|
|
<div class="item" data-value="gw"><i class="gw flag"></i>Guinea-Bissau</div>
|
|
<div class="item" data-value="gy"><i class="gy flag"></i>Guyana</div>
|
|
<div class="item" data-value="hk"><i class="hk flag"></i>Hong Kong</div>
|
|
<div class="item" data-value="hm"><i class="hm flag"></i>Heard Island</div>
|
|
<div class="item" data-value="hn"><i class="hn flag"></i>Honduras</div>
|
|
<div class="item" data-value="hr"><i class="hr flag"></i>Croatia</div>
|
|
<div class="item" data-value="ht"><i class="ht flag"></i>Haiti</div>
|
|
<div class="item" data-value="hu"><i class="hu flag"></i>Hungary</div>
|
|
<div class="item" data-value="id"><i class="id flag"></i>Indonesia</div>
|
|
<div class="item" data-value="ie"><i class="ie flag"></i>Ireland</div>
|
|
<div class="item" data-value="il"><i class="il flag"></i>Israel</div>
|
|
<div class="item" data-value="in"><i class="in flag"></i>India</div>
|
|
<div class="item" data-value="io"><i class="io flag"></i>Indian Ocean Territory</div>
|
|
<div class="item" data-value="iq"><i class="iq flag"></i>Iraq</div>
|
|
<div class="item" data-value="ir"><i class="ir flag"></i>Iran</div>
|
|
<div class="item" data-value="is"><i class="is flag"></i>Iceland</div>
|
|
<div class="item" data-value="it"><i class="it flag"></i>Italy</div>
|
|
<div class="item" data-value="jm"><i class="jm flag"></i>Jamaica</div>
|
|
<div class="item" data-value="jo"><i class="jo flag"></i>Jordan</div>
|
|
<div class="item" data-value="jp"><i class="jp flag"></i>Japan</div>
|
|
<div class="item" data-value="ke"><i class="ke flag"></i>Kenya</div>
|
|
<div class="item" data-value="kg"><i class="kg flag"></i>Kyrgyzstan</div>
|
|
<div class="item" data-value="kh"><i class="kh flag"></i>Cambodia</div>
|
|
<div class="item" data-value="ki"><i class="ki flag"></i>Kiribati</div>
|
|
<div class="item" data-value="km"><i class="km flag"></i>Comoros</div>
|
|
<div class="item" data-value="kn"><i class="kn flag"></i>Saint Kitts and Nevis</div>
|
|
<div class="item" data-value="kp"><i class="kp flag"></i>North Korea</div>
|
|
<div class="item" data-value="kr"><i class="kr flag"></i>South Korea</div>
|
|
<div class="item" data-value="kw"><i class="kw flag"></i>Kuwait</div>
|
|
<div class="item" data-value="ky"><i class="ky flag"></i>Cayman Islands</div>
|
|
<div class="item" data-value="kz"><i class="kz flag"></i>Kazakhstan</div>
|
|
<div class="item" data-value="la"><i class="la flag"></i>Laos</div>
|
|
<div class="item" data-value="lb"><i class="lb flag"></i>Lebanon</div>
|
|
<div class="item" data-value="lc"><i class="lc flag"></i>Saint Lucia</div>
|
|
<div class="item" data-value="li"><i class="li flag"></i>Liechtenstein</div>
|
|
<div class="item" data-value="lk"><i class="lk flag"></i>Sri Lanka</div>
|
|
<div class="item" data-value="lr"><i class="lr flag"></i>Liberia</div>
|
|
<div class="item" data-value="ls"><i class="ls flag"></i>Lesotho</div>
|
|
<div class="item" data-value="lt"><i class="lt flag"></i>Lithuania</div>
|
|
<div class="item" data-value="lu"><i class="lu flag"></i>Luxembourg</div>
|
|
<div class="item" data-value="lv"><i class="lv flag"></i>Latvia</div>
|
|
<div class="item" data-value="ly"><i class="ly flag"></i>Libya</div>
|
|
<div class="item" data-value="ma"><i class="ma flag"></i>Morocco</div>
|
|
<div class="item" data-value="mc"><i class="mc flag"></i>Monaco</div>
|
|
<div class="item" data-value="md"><i class="md flag"></i>Moldova</div>
|
|
<div class="item" data-value="me"><i class="me flag"></i>Montenegro</div>
|
|
<div class="item" data-value="mg"><i class="mg flag"></i>Madagascar</div>
|
|
<div class="item" data-value="mh"><i class="mh flag"></i>Marshall Islands</div>
|
|
<div class="item" data-value="mk"><i class="mk flag"></i>MacEdonia</div>
|
|
<div class="item" data-value="ml"><i class="ml flag"></i>Mali</div>
|
|
<div class="item" data-value="ar"><i class="ar flag"></i>Burma</div>
|
|
<div class="item" data-value="mn"><i class="mn flag"></i>Mongolia</div>
|
|
<div class="item" data-value="mo"><i class="mo flag"></i>MacAu</div>
|
|
<div class="item" data-value="mp"><i class="mp flag"></i>Northern Mariana Islands</div>
|
|
<div class="item" data-value="mq"><i class="mq flag"></i>Martinique</div>
|
|
<div class="item" data-value="mr"><i class="mr flag"></i>Mauritania</div>
|
|
<div class="item" data-value="ms"><i class="ms flag"></i>Montserrat</div>
|
|
<div class="item" data-value="mt"><i class="mt flag"></i>Malta</div>
|
|
<div class="item" data-value="mu"><i class="mu flag"></i>Mauritius</div>
|
|
<div class="item" data-value="mv"><i class="mv flag"></i>Maldives</div>
|
|
<div class="item" data-value="mw"><i class="mw flag"></i>Malawi</div>
|
|
<div class="item" data-value="mx"><i class="mx flag"></i>Mexico</div>
|
|
<div class="item" data-value="my"><i class="my flag"></i>Malaysia</div>
|
|
<div class="item" data-value="mz"><i class="mz flag"></i>Mozambique</div>
|
|
<div class="item" data-value="na"><i class="na flag"></i>Namibia</div>
|
|
<div class="item" data-value="nc"><i class="nc flag"></i>New Caledonia</div>
|
|
<div class="item" data-value="ne"><i class="ne flag"></i>Niger</div>
|
|
<div class="item" data-value="nf"><i class="nf flag"></i>Norfolk Island</div>
|
|
<div class="item" data-value="ng"><i class="ng flag"></i>Nigeria</div>
|
|
<div class="item" data-value="ni"><i class="ni flag"></i>Nicaragua</div>
|
|
<div class="item" data-value="nl"><i class="nl flag"></i>Netherlands</div>
|
|
<div class="item" data-value="no"><i class="no flag"></i>Norway</div>
|
|
<div class="item" data-value="np"><i class="np flag"></i>Nepal</div>
|
|
<div class="item" data-value="nr"><i class="nr flag"></i>Nauru</div>
|
|
<div class="item" data-value="nu"><i class="nu flag"></i>Niue</div>
|
|
<div class="item" data-value="nz"><i class="nz flag"></i>New Zealand</div>
|
|
<div class="item" data-value="om"><i class="om flag"></i>Oman</div>
|
|
<div class="item" data-value="pa"><i class="pa flag"></i>Panama</div>
|
|
<div class="item" data-value="pe"><i class="pe flag"></i>Peru</div>
|
|
<div class="item" data-value="pf"><i class="pf flag"></i>French Polynesia</div>
|
|
<div class="item" data-value="pg"><i class="pg flag"></i>New Guinea</div>
|
|
<div class="item" data-value="ph"><i class="ph flag"></i>Philippines</div>
|
|
<div class="item" data-value="pk"><i class="pk flag"></i>Pakistan</div>
|
|
<div class="item" data-value="pl"><i class="pl flag"></i>Poland</div>
|
|
<div class="item" data-value="pm"><i class="pm flag"></i>Saint Pierre</div>
|
|
<div class="item" data-value="pn"><i class="pn flag"></i>Pitcairn Islands</div>
|
|
<div class="item" data-value="pr"><i class="pr flag"></i>Puerto Rico</div>
|
|
<div class="item" data-value="ps"><i class="ps flag"></i>Palestine</div>
|
|
<div class="item" data-value="pt"><i class="pt flag"></i>Portugal</div>
|
|
<div class="item" data-value="pw"><i class="pw flag"></i>Palau</div>
|
|
<div class="item" data-value="py"><i class="py flag"></i>Paraguay</div>
|
|
<div class="item" data-value="qa"><i class="qa flag"></i>Qatar</div>
|
|
<div class="item" data-value="re"><i class="re flag"></i>Reunion</div>
|
|
<div class="item" data-value="ro"><i class="ro flag"></i>Romania</div>
|
|
<div class="item" data-value="rs"><i class="rs flag"></i>Serbia</div>
|
|
<div class="item" data-value="ru"><i class="ru flag"></i>Russia</div>
|
|
<div class="item" data-value="rw"><i class="rw flag"></i>Rwanda</div>
|
|
<div class="item" data-value="sa"><i class="sa flag"></i>Saudi Arabia</div>
|
|
<div class="item" data-value="sb"><i class="sb flag"></i>Solomon Islands</div>
|
|
<div class="item" data-value="sc"><i class="sc flag"></i>Seychelles</div>
|
|
<div class="item" data-value="sd"><i class="sd flag"></i>Sudan</div>
|
|
<div class="item" data-value="se"><i class="se flag"></i>Sweden</div>
|
|
<div class="item" data-value="sg"><i class="sg flag"></i>Singapore</div>
|
|
<div class="item" data-value="sh"><i class="sh flag"></i>Saint Helena</div>
|
|
<div class="item" data-value="si"><i class="si flag"></i>Slovenia</div>
|
|
<div class="item" data-value="sj"><i class="sj flag"></i>Svalbard, I Flag Jan Mayen</div>
|
|
<div class="item" data-value="sk"><i class="sk flag"></i>Slovakia</div>
|
|
<div class="item" data-value="sl"><i class="sl flag"></i>Sierra Leone</div>
|
|
<div class="item" data-value="sm"><i class="sm flag"></i>San Marino</div>
|
|
<div class="item" data-value="sn"><i class="sn flag"></i>Senegal</div>
|
|
<div class="item" data-value="so"><i class="so flag"></i>Somalia</div>
|
|
<div class="item" data-value="sr"><i class="sr flag"></i>Suriname</div>
|
|
<div class="item" data-value="st"><i class="st flag"></i>Sao Tome</div>
|
|
<div class="item" data-value="sv"><i class="sv flag"></i>El Salvador</div>
|
|
<div class="item" data-value="sy"><i class="sy flag"></i>Syria</div>
|
|
<div class="item" data-value="sz"><i class="sz flag"></i>Swaziland</div>
|
|
<div class="item" data-value="tc"><i class="tc flag"></i>Caicos Islands</div>
|
|
<div class="item" data-value="td"><i class="td flag"></i>Chad</div>
|
|
<div class="item" data-value="tf"><i class="tf flag"></i>French Territories</div>
|
|
<div class="item" data-value="tg"><i class="tg flag"></i>Togo</div>
|
|
<div class="item" data-value="th"><i class="th flag"></i>Thailand</div>
|
|
<div class="item" data-value="tj"><i class="tj flag"></i>Tajikistan</div>
|
|
<div class="item" data-value="tk"><i class="tk flag"></i>Tokelau</div>
|
|
<div class="item" data-value="tl"><i class="tl flag"></i>Timorleste</div>
|
|
<div class="item" data-value="tm"><i class="tm flag"></i>Turkmenistan</div>
|
|
<div class="item" data-value="tn"><i class="tn flag"></i>Tunisia</div>
|
|
<div class="item" data-value="to"><i class="to flag"></i>Tonga</div>
|
|
<div class="item" data-value="tr"><i class="tr flag"></i>Turkey</div>
|
|
<div class="item" data-value="tt"><i class="tt flag"></i>Trinidad</div>
|
|
<div class="item" data-value="tv"><i class="tv flag"></i>Tuvalu</div>
|
|
<div class="item" data-value="tw"><i class="tw flag"></i>Taiwan</div>
|
|
<div class="item" data-value="tz"><i class="tz flag"></i>Tanzania</div>
|
|
<div class="item" data-value="ua"><i class="ua flag"></i>Ukraine</div>
|
|
<div class="item" data-value="ug"><i class="ug flag"></i>Uganda</div>
|
|
<div class="item" data-value="um"><i class="um flag"></i>Us Minor Islands</div>
|
|
<div class="item" data-value="us"><i class="us flag"></i>United States</div>
|
|
<div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
|
|
<div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
|
|
<div class="item" data-value="va"><i class="va flag"></i>Vatican City</div>
|
|
<div class="item" data-value="vc"><i class="vc flag"></i>Saint Vincent</div>
|
|
<div class="item" data-value="ve"><i class="ve flag"></i>Venezuela</div>
|
|
<div class="item" data-value="vg"><i class="vg flag"></i>British Virgin Islands</div>
|
|
<div class="item" data-value="vi"><i class="vi flag"></i>Us Virgin Islands</div>
|
|
<div class="item" data-value="vn"><i class="vn flag"></i>Vietnam</div>
|
|
<div class="item" data-value="vu"><i class="vu flag"></i>Vanuatu</div>
|
|
<div class="item" data-value="wf"><i class="wf flag"></i>Wallis and Futuna</div>
|
|
<div class="item" data-value="ws"><i class="ws flag"></i>Samoa</div>
|
|
<div class="item" data-value="ye"><i class="ye flag"></i>Yemen</div>
|
|
<div class="item" data-value="yt"><i class="yt flag"></i>Mayotte</div>
|
|
<div class="item" data-value="za"><i class="za flag"></i>South Africa</div>
|
|
<div class="item" data-value="zm"><i class="zm flag"></i>Zambia</div>
|
|
<div class="item" data-value="zw"><i class="zw flag"></i>Zimbabwe</div>
|
|
</div>
|
|
</div>
|
|
<div class="existing code">
|
|
<div class="ui fluid 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" data-value="ad"><i class="ad flag"></i>Andorra</div>
|
|
<div class="item" data-value="ae"><i class="ae flag"></i>United Arab Emirates</div>
|
|
<div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
|
|
<div class="item" data-value="ag"><i class="ag flag"></i>Antigua</div>
|
|
<!-- Omitted Some Countries !-->
|
|
<div class="item" data-value="zm"><i class="zm flag"></i>Zambia</div>
|
|
<div class="item" data-value="zw"><i class="zw flag"></i>Zimbabwe</div>
|
|
</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>
|
|
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 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="item">
|
|
Home
|
|
</a>
|
|
<div class="ui pointing dropdown link item">
|
|
<i class="dropdown icon"></i>
|
|
Shopping
|
|
<div class="menu">
|
|
<div class="header">Categories</div>
|
|
<div class="item">
|
|
<i class="dropdown icon"></i>
|
|
Clothing
|
|
<div class="menu">
|
|
<div class="header">Mens</div>
|
|
<div class="item">Shirts</div>
|
|
<div class="item">Pants</div>
|
|
<div class="item">Jeans</div>
|
|
<div class="item">Shoes</div>
|
|
<div class="divider"></div>
|
|
<div class="header">Womens</div>
|
|
<div class="item">Dresses</div>
|
|
<div class="item">Shoes</div>
|
|
<div class="item">Bags</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">Home Goods</div>
|
|
<div class="item">Bedroom</div>
|
|
<div class="divider"></div>
|
|
<div class="header">Order</div>
|
|
<div class="item">Status</div>
|
|
<div class="item">Cancellations</div>
|
|
</div>
|
|
</div>
|
|
<a class="item">
|
|
Forums
|
|
</a>
|
|
<a class="item">
|
|
Contact Us
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another hover example">
|
|
<div class="ui vertical menu">
|
|
<div class="menu">
|
|
<a class="item">
|
|
Home
|
|
</a>
|
|
<div class="ui left pointing dropdown link item">
|
|
<i class="dropdown icon"></i>
|
|
Messages
|
|
<div class="menu">
|
|
<div class="item">Inbox</div>
|
|
<div class="item">Starred</div>
|
|
<div class="item">Sent Mail</div>
|
|
<div class="item">Drafts (143)</div>
|
|
<div class="divider"></div>
|
|
<div class="item">Spam (1009)</div>
|
|
<div class="item">Trash</div>
|
|
</div>
|
|
</div>
|
|
<a class="item">
|
|
Browse
|
|
</a>
|
|
<a class="item">
|
|
Help
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another button example">
|
|
<div class="ui icon top left pointing dropdown button">
|
|
<i class="wrench icon"></i>
|
|
<div class="menu">
|
|
<div class="header">Display Density</div>
|
|
<div class="item">Comfortable</div>
|
|
<div class="item">Cozy</div>
|
|
<div class="item">Compact</div>
|
|
<div class="ui divider"></div>
|
|
<div class="item">Settings</div>
|
|
<div class="item">
|
|
<i class="dropdown icon"></i>
|
|
Upload Settings
|
|
<div class="menu">
|
|
<div class="item">
|
|
<i class="check icon"></i>
|
|
Convert Uploaded Files to PDF
|
|
</div>
|
|
<div class="item">
|
|
<i class="check icon"></i>
|
|
Digitize Text from Uploaded Files
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">Manage Apps</div>
|
|
<div class="item">Keyboard Shortcuts</div>
|
|
<div class="item">Help</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another button example">
|
|
<div class="ui info message ignored">Bottom pointing dropdown menus have sub-menus open upwards</div>
|
|
<div class="ui icon bottom left pointing dropdown button">
|
|
<i class="wrench icon"></i>
|
|
<div class="menu">
|
|
<div class="item">
|
|
<i class="dropdown icon"></i>
|
|
New
|
|
<div class="menu">
|
|
<div class="item">Document</div>
|
|
<div class="item">Image</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">Save</div>
|
|
<div class="item">Edit</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui icon bottom right pointing dropdown button">
|
|
<i class="wrench icon"></i>
|
|
<div class="menu">
|
|
<div class="item">
|
|
<i class="dropdown icon"></i>
|
|
New
|
|
<div class="menu">
|
|
<div class="item">Document</div>
|
|
<div class="item">Image</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">Save</div>
|
|
<div class="item">Edit</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another button example">
|
|
<div class="ui labeled icon top right pointing dropdown button">
|
|
<i class="filter icon"></i>
|
|
<span class="text">Filter Posts</span>
|
|
<div class="menu">
|
|
<div class="ui icon input">
|
|
<i class="search icon"></i>
|
|
<input type="text" name="search" placeholder="Search issues...">
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="header">
|
|
<i class="tags icon"></i>
|
|
Filter by tag
|
|
</div>
|
|
<div class="item">
|
|
<div class="ui red empty circular label"></div>
|
|
Important
|
|
</div>
|
|
<div class="item">
|
|
<div class="ui blue empty circular label"></div>
|
|
Announcement
|
|
</div>
|
|
<div class="item">
|
|
<div class="ui black empty circular label"></div>
|
|
Discussion
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="header">
|
|
<i class="calendar icon"></i>
|
|
Filter by date
|
|
</div>
|
|
<div class="item">
|
|
<i class="circle icon"></i>
|
|
This Week
|
|
</div>
|
|
<div class="item">
|
|
<i class="circle icon"></i>
|
|
This Month
|
|
</div>
|
|
<div class="item">
|
|
<i class="circle icon"></i>
|
|
This Year
|
|
</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="ui transparent left icon input">
|
|
<i class="search icon"></i>
|
|
<input type="text" name="search" placeholder="Search issues...">
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="header">
|
|
<i class="tags icon"></i>
|
|
Filter by tag
|
|
</div>
|
|
<div class="item">
|
|
<div class="ui red empty circular label"></div>
|
|
Important
|
|
</div>
|
|
<div class="item">
|
|
<div class="ui blue empty circular label"></div>
|
|
Announcement
|
|
</div>
|
|
<div class="item">
|
|
<div class="ui black empty circular label"></div>
|
|
Discussion
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui left pointing dropdown icon button">
|
|
<i class="settings icon"></i>
|
|
<div class="menu">
|
|
<div class="ui transparent left icon input">
|
|
<i class="search icon"></i>
|
|
<input type="text" name="search" placeholder="Search issues...">
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="header">
|
|
<i class="tags icon"></i>
|
|
Filter by tag
|
|
</div>
|
|
<div class="item">
|
|
<div class="ui red empty circular label"></div>
|
|
Important
|
|
</div>
|
|
<div class="item">
|
|
<div class="ui blue empty circular label"></div>
|
|
Announcement
|
|
</div>
|
|
<div class="item">
|
|
<div class="ui black empty circular label"></div>
|
|
Discussion
|
|
</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">Content</h2>
|
|
|
|
<div class="dropdown example">
|
|
<h4 class="ui header">Header</h4>
|
|
<p>A dropdown can contain a header</p>
|
|
<div class="ui floating labeled icon dropdown button">
|
|
<i class="filter icon"></i>
|
|
<span class="text">Filter</span>
|
|
<div class="menu">
|
|
<div class="header">
|
|
<i class="tags icon"></i>
|
|
Filter by tag
|
|
</div>
|
|
<div class="item">
|
|
Important
|
|
</div>
|
|
<div class="item">
|
|
Announcement
|
|
</div>
|
|
<div class="item">
|
|
Discussion
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown example">
|
|
<h4 class="ui header">Divider</h4>
|
|
<p>A dropdown can contain dividers to separate related content</p>
|
|
<div class="ui floating labeled icon dropdown button">
|
|
<i class="filter icon"></i>
|
|
<span class="text">Filter</span>
|
|
<div class="menu">
|
|
<div class="header">
|
|
<i class="tags icon"></i>
|
|
Filter by tag
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="item">
|
|
Important
|
|
</div>
|
|
<div class="item">
|
|
Announcement
|
|
</div>
|
|
<div class="item">
|
|
Discussion
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown example">
|
|
<h4 class="ui header">Label</h4>
|
|
<p>A dropdown can contain a <a href="/elements/input.html">ui label</a>.</p>
|
|
<div class="ui floating labeled icon dropdown button">
|
|
<i class="filter icon"></i>
|
|
<span class="text">Filter</span>
|
|
<div class="menu">
|
|
<div class="header">
|
|
Search Issues
|
|
</div>
|
|
<div class="ui left icon input">
|
|
<i class="search icon"></i>
|
|
<input type="text" name="search" placeholder="Search...">
|
|
</div>
|
|
<div class="header">
|
|
<i class="tags icon"></i>
|
|
Filter by tag
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="item">
|
|
<div class="ui red empty circular label"></div>
|
|
Important
|
|
</div>
|
|
<div class="item">
|
|
<div class="ui blue empty circular label"></div>
|
|
Announcement
|
|
</div>
|
|
<div class="item">
|
|
<div class="ui black empty circular label"></div>
|
|
Discussion
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown example">
|
|
<h4 class="ui header">Input</h4>
|
|
<p>A dropdown can contain a <a href="/elements/input.html">ui input</a></p>
|
|
<div class="ui floating labeled icon dropdown button">
|
|
<i class="filter icon"></i>
|
|
<span class="text">Filter</span>
|
|
<div class="menu">
|
|
<div class="header">
|
|
Search Issues
|
|
</div>
|
|
<div class="ui left icon input">
|
|
<i class="search icon"></i>
|
|
<input type="text" name="search" placeholder="Search...">
|
|
</div>
|
|
<div class="header">
|
|
<i class="tags icon"></i>
|
|
Filter by tag
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="item">
|
|
<div class="ui red empty circular label"></div>
|
|
Important
|
|
</div>
|
|
<div class="item">
|
|
<div class="ui blue empty circular label"></div>
|
|
Announcement
|
|
</div>
|
|
<div class="item">
|
|
<div class="ui black empty circular label"></div>
|
|
Discussion
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown example">
|
|
<h4 class="ui header">Image</h4>
|
|
<p>A dropdown can contain a <a href="/elements/input.html">ui image</a></p>
|
|
<div class="ui floating labeled icon dropdown button">
|
|
<i class="add user icon"></i>
|
|
<span class="text">Add User</span>
|
|
<div class="menu">
|
|
<div class="header">
|
|
People You Might Know
|
|
</div>
|
|
<div class="item">
|
|
<img class="ui mini avatar image" src="/images/avatar/small/jenny.jpg">
|
|
Jenny Hess
|
|
</div>
|
|
<div class="item">
|
|
<img class="ui mini avatar image" src="/images/avatar/small/elliot.jpg">
|
|
Elliot Fu
|
|
</div>
|
|
<div class="item">
|
|
<img class="ui mini avatar image" src="/images/avatar/small/stevie.jpg">
|
|
Stevie Feliciano
|
|
</div>
|
|
<div class="header">
|
|
Your Friends' Friends
|
|
</div>
|
|
<div class="item">
|
|
<img class="ui mini avatar image" src="/images/avatar/small/christian.jpg">
|
|
Christian
|
|
</div>
|
|
<div class="item">
|
|
<img class="ui mini avatar image" src="/images/avatar/small/matt.jpg">
|
|
Matt
|
|
</div>
|
|
<div class="item">
|
|
<img class="ui mini avatar image" src="/images/avatar/small/justen.jpg">
|
|
Justen Kitsune
|
|
</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="link 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.example .dropdown')
|
|
.dropdown({
|
|
action: 'hide'
|
|
})
|
|
;
|
|
</div>
|
|
|
|
<div class="ui 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>
|