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