github.com/manicqin/nomad@v0.9.5/ui/app/templates/components/freestyle/sg-multi-select-dropdown.hbs (about)

     1  {{#freestyle-usage "multi-select-dropdown" title="Multi-select dropdown"}}
     2    {{multi-select-dropdown
     3      label="Example Dropdown"
     4      options=options1
     5      selection=selection1
     6      onSelect=(action (mut selection1))}}
     7  {{/freestyle-usage}}
     8  {{#freestyle-annotation}}
     9    A wrapper around basic-dropdown for creating a list of checkboxes and tracking the state thereof.
    10  {{/freestyle-annotation}}
    11  
    12  {{#freestyle-usage "multi-select-right-aligned" title="Multi-select dropdown right-aligned"}}
    13    <div style="display:flex; justify-content:flex-end">
    14      {{multi-select-dropdown
    15        label="Example right-aligned Dropdown"
    16        options=options1
    17        selection=selection1
    18        onSelect=(action (mut selection1))}}
    19    </div>
    20  {{/freestyle-usage}}
    21  
    22  {{#freestyle-usage "multi-select-dropdown-may" title="Multi-select dropdown with many options"}}
    23    {{multi-select-dropdown
    24      label="Lots of options in here"
    25      options=optionsMany
    26      selection=selectionMany
    27      onSelect=(action (mut selectionMany))}}
    28  {{/freestyle-usage}}
    29  {{#freestyle-annotation}}
    30    A strength of the multi-select-dropdown is its simple presentation. It is quick to select options and it is quick to remove options.
    31    However, this strength becomes a weakness when there are too many options. Since the selection isn't pinned in any way, removing a selection
    32    can become an adventure of scrolling up and down. Also since the selection isn't pinned, this component can't support search, since search would
    33    entirely mask the selection.
    34  {{/freestyle-annotation}}
    35  
    36  {{#freestyle-usage "multi-select-dropdown-bar" title="Multi-select dropdown bar"}}
    37    <div class="button-bar">
    38      {{multi-select-dropdown
    39        label="Datacenter"
    40        options=optionsDatacenter
    41        selection=selectionDatacenter
    42        onSelect=(action (mut selectionDatacenter))}}
    43      {{multi-select-dropdown
    44        label="Type"
    45        options=optionsType
    46        selection=selectionType
    47        onSelect=(action (mut selectionType))}}
    48      {{multi-select-dropdown
    49        label="Status"
    50        options=optionsStatus
    51        selection=selectionStatus
    52        onSelect=(action (mut selectionStatus))}}
    53    </div>
    54  {{/freestyle-usage}}
    55  {{#freestyle-annotation}}
    56    Since this is a core component for faceted search, it makes sense to construct an arrangement of multi-select dropdowns.
    57    Do this by wrapping all the options in a <code>.button-bar</code> container.
    58  {{/freestyle-annotation}}