github.com/manicqin/nomad@v0.9.5/ui/app/templates/components/freestyle/sg-dropdown.hbs (about) 1 {{#freestyle-usage "dropdown" title="Simple Dropdown"}} 2 {{#power-select 3 options=options 4 selected=selectedOption 5 searchField="name" 6 searchEnabled=(gt options.length 10) 7 onChange=(action (mut selectedOption)) 8 as |option|}} 9 {{option.name}} 10 {{/power-select}} 11 {{/freestyle-usage}} 12 13 {{#freestyle-annotation}} 14 Power Select currently fulfills all of Nomad's dropdown needs out of the box. 15 {{/freestyle-annotation}} 16 17 {{#freestyle-usage "dropdown-sized" title="Dropdown Resized"}} 18 <div class="columns"> 19 <div class="column is-3"> 20 {{#power-select 21 options=options 22 selected=selectedOption2 23 searchField="name" 24 searchEnabled=(gt options.length 10) 25 onChange=(action (mut selectedOption2)) 26 as |option|}} 27 {{option.name}} 28 {{/power-select}} 29 </div> 30 </div> 31 {{/freestyle-usage}} 32 33 {{#freestyle-annotation}} 34 Dropdowns are always 100% wide. To control the width of a dropdown, adjust the dimensions of its container. One way to achieve this is using columns. 35 {{/freestyle-annotation}} 36 37 {{#freestyle-usage "dropdown-search" title="Dropdown with Search"}} 38 <div class="columns"> 39 <div class="column is-3"> 40 {{#power-select 41 options=manyOptions 42 selected=selectedOption3 43 searchField="name" 44 searchEnabled=(gt manyOptions.length 10) 45 onChange=(action (mut selectedOption3)) 46 as |option|}} 47 {{option.name}} 48 {{/power-select}} 49 </div> 50 </div> 51 {{/freestyle-usage}} 52 53 {{#freestyle-annotation}} 54 Whether or not the dropdown has a search box is configurable. Typically the default is to show a search once a dropdown has more than 10 options. 55 {{/freestyle-annotation}}