56 lines
1.7 KiB
Handlebars
56 lines
1.7 KiB
Handlebars
{{#freestyle-usage "dropdown" title="Simple Dropdown"}}
|
|
{{#power-select
|
|
options=options
|
|
selected=selectedOption
|
|
searchField="name"
|
|
searchEnabled=(gt options.length 10)
|
|
onchange=(action (mut selectedOption))
|
|
as |option|}}
|
|
{{option.name}}
|
|
{{/power-select}}
|
|
{{/freestyle-usage}}
|
|
|
|
{{#freestyle-annotation}}
|
|
Power Select currently fulfills all of Nomad's dropdown needs out of the box.
|
|
{{/freestyle-annotation}}
|
|
|
|
{{#freestyle-usage "dropdown-sized" title="Dropdown Resized"}}
|
|
<div class="columns">
|
|
<div class="column is-3">
|
|
{{#power-select
|
|
options=options
|
|
selected=selectedOption2
|
|
searchField="name"
|
|
searchEnabled=(gt options.length 10)
|
|
onchange=(action (mut selectedOption2))
|
|
as |option|}}
|
|
{{option.name}}
|
|
{{/power-select}}
|
|
</div>
|
|
</div>
|
|
{{/freestyle-usage}}
|
|
|
|
{{#freestyle-annotation}}
|
|
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.
|
|
{{/freestyle-annotation}}
|
|
|
|
{{#freestyle-usage "dropdown-search" title="Dropdown with Search"}}
|
|
<div class="columns">
|
|
<div class="column is-3">
|
|
{{#power-select
|
|
options=manyOptions
|
|
selected=selectedOption3
|
|
searchField="name"
|
|
searchEnabled=(gt manyOptions.length 10)
|
|
onchange=(action (mut selectedOption3))
|
|
as |option|}}
|
|
{{option.name}}
|
|
{{/power-select}}
|
|
</div>
|
|
</div>
|
|
{{/freestyle-usage}}
|
|
|
|
{{#freestyle-annotation}}
|
|
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.
|
|
{{/freestyle-annotation}}
|