112 lines
2.9 KiB
Handlebars
112 lines
2.9 KiB
Handlebars
<Rose::LinkButton @route="index" @style="primary" @iconRight="flight-icons/svg/entry-point-16">
|
|
Content
|
|
</Rose::LinkButton>
|
|
|
|
<h2>Checkbox Group</h2>
|
|
<Rose::Form::Checkbox::Group
|
|
@items={{this.items}}
|
|
@selectedItems={{this.selectedItems}}
|
|
@onChange={{this.checkboxGroupChanged}}
|
|
as |group|
|
|
>
|
|
<group.checkbox
|
|
@label={{group.item.name}}
|
|
value={{group.item.id}} />
|
|
</Rose::Form::Checkbox::Group>
|
|
|
|
<p>
|
|
Items selected:
|
|
{{#each this.selectedItems as |selected|}}
|
|
{{selected.id}},
|
|
{{/each}}
|
|
</p>
|
|
|
|
<Rose::Button @style='primary' {{on 'click' this.clearSelected}}>
|
|
Clear Selected Items
|
|
</Rose::Button>
|
|
|
|
<Rose::Separator />
|
|
|
|
<h2>KeyValue Dropdown</h2>
|
|
<Rose::Dropdown
|
|
@text="Credential library details"
|
|
@showCaret={{true}}
|
|
@ignoreClickInside={{true}}
|
|
as |dropdown|
|
|
>
|
|
<dropdown.key-value>
|
|
<:key>ID</:key>
|
|
<:value>cl_nbv9375hLHs</:value>
|
|
</dropdown.key-value>
|
|
|
|
<dropdown.separator />
|
|
|
|
<dropdown.key-value>
|
|
<:key>Name</:key>
|
|
<:value>Key/Value</:value>
|
|
</dropdown.key-value>
|
|
|
|
<dropdown.separator />
|
|
|
|
<dropdown.key-value>
|
|
<:key>Description</:key>
|
|
<:value>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda illo ratione libero ducimus magnam, porro sed provident repellat mollitia a, repellendus placeat. Magni consequuntur cumque, debitis obcaecati dolores quasi natus?</:value>
|
|
</dropdown.key-value>
|
|
|
|
</Rose::Dropdown>
|
|
|
|
<h2>Condensed dropdown</h2>
|
|
<Rose::Dropdown
|
|
@style="condensed"
|
|
@text="Credential library details"
|
|
@showCaret={{true}}
|
|
as |dropdown|
|
|
>
|
|
<dropdown.section @title="ID">
|
|
<dropdown.item>cl_nbv9375hLHs</dropdown.item>
|
|
</dropdown.section>
|
|
|
|
<dropdown.separator />
|
|
|
|
<dropdown.section @title="Name">
|
|
<dropdown.item>Key/Value</dropdown.item>
|
|
</dropdown.section>
|
|
|
|
<dropdown.separator />
|
|
|
|
<dropdown.section @title="Description">
|
|
<dropdown.item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus vitae sollicitudin turpis.</dropdown.item>
|
|
</dropdown.section>
|
|
</Rose::Dropdown>
|
|
|
|
<h2>Normal Dropdown</h2>
|
|
<Rose::Dropdown
|
|
@text="Credential library details"
|
|
@showCaret={{true}}
|
|
as |dropdown|
|
|
>
|
|
<dropdown.section @title="ID">
|
|
<dropdown.item>cl_nbv9375hLHs</dropdown.item>
|
|
</dropdown.section>
|
|
<dropdown.separator />
|
|
|
|
<dropdown.section @title="Name">
|
|
<dropdown.item>Key/Value</dropdown.item>
|
|
</dropdown.section>
|
|
<dropdown.separator />
|
|
|
|
<dropdown.section @title="Description">
|
|
<dropdown.item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus vitae sollicitudin turpis.</dropdown.item>
|
|
</dropdown.section>
|
|
</Rose::Dropdown>
|
|
|
|
<h2>Normal Dropdown</h2>
|
|
<Rose::Dropdown
|
|
@text="Credential library details"
|
|
@showCaret={{true}}
|
|
as |dropdown|
|
|
>
|
|
<dropdown.link @route="about">Menu item</dropdown.link>
|
|
<dropdown.link @route="about">Menu item 2</dropdown.link>
|
|
</Rose::Dropdown>
|