Skip to content

Commit c67d1c1

Browse files
committed
New dropdown docs
1 parent 70965c0 commit c67d1c1

1 file changed

Lines changed: 39 additions & 2 deletions

File tree

server/documents/modules/dropdown.html.eco

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1854,6 +1854,38 @@ themes : ['Default', 'GitHub', 'Material']
18541854
;
18551855
</div>
18561856
</div>
1857+
<div class="js example">
1858+
<h4 class="ui header">
1859+
Initializing with Javascript Only
1860+
<div class="ui teal label">New in 2.3.0</div>
1861+
</h4>
1862+
<p>You can specify a list of values in the settings object to avoid having to stub the html yourself.</p>
1863+
<p>Adding <code>selected: true</code> to an item will have that item selected by default.</p>
1864+
<p>You can also use the <code>placeholder</code> setting to specify placeholder text before an option is selected.</p>
1865+
<div class="code" data-label="HTML" data-type="html">
1866+
<div class="ui dropdown">
1867+
<div class="text"></div>
1868+
<i class="dropdown icon"></i>
1869+
</div>
1870+
</div>
1871+
<div class="code" data-label="Javascript" data-type="javascript">
1872+
$('.ui.dropdown')
1873+
.dropdown({
1874+
values: [
1875+
{
1876+
name: 'Male',
1877+
value: 'male'
1878+
},
1879+
{
1880+
name : 'Female',
1881+
value : 'female',
1882+
selected : true
1883+
}
1884+
]
1885+
})
1886+
;
1887+
</div>
1888+
</div>
18571889
<div class="no dropdown example">
18581890
<h4 class="ui header">Specifying Different Text &amp; Hidden Input Values</h4>
18591891
<p>You can specify different values for selected text, and selected form values by adding <code>data-text</code> or <code>data-value</code> to any item. This is useful if you include additional data, like icons, that you want to appear only inside the dropdown menu.</p>
@@ -2185,8 +2217,8 @@ themes : ['Default', 'GitHub', 'Material']
21852217
</thead>
21862218
<tbody>
21872219
<tr>
2188-
<td>setup menu</td>
2189-
<td>Recreates dropdown menu from select <code>option</code> values.</td>
2220+
<td>change values (values)</td>
2221+
<td>Changes dropdown to use new values</td>
21902222
</tr>
21912223
<tr>
21922224
<td>refresh</td>
@@ -2354,6 +2386,11 @@ themes : ['Default', 'GitHub', 'Material']
23542386
</tr>
23552387
</thead>
23562388
<tbody>
2389+
<tr>
2390+
<td>values</td>
2391+
<td>false</td>
2392+
<td>When specified allows you to initialize dropdown with specific values. See usage guide for details.</td>
2393+
</tr>
23572394
<tr>
23582395
<td>on</td>
23592396
<td>click</td>

0 commit comments

Comments
 (0)