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}}