82 lines
2.6 KiB
Handlebars
82 lines
2.6 KiB
Handlebars
<Rose::Header as |header|>
|
|
<header.brand @logo="logo" @text="Product Name" />
|
|
|
|
<header.nav as |nav|>
|
|
<nav.dropdown @text="org-name" @icon="user-organization" as |dropdown|>
|
|
<dropdown.link @route="index">Menu item</dropdown.link>
|
|
<dropdown.link @route="about" @style="danger">Menu item - danger</dropdown.link>
|
|
<dropdown.separator />
|
|
<dropdown.button>Button menu item</dropdown.button>
|
|
</nav.dropdown>
|
|
|
|
<nav.link @route="index">Section</nav.link>
|
|
<nav.link @route="about">Section</nav.link>
|
|
</header.nav>
|
|
|
|
<header.utilities as |utilities|>
|
|
<utilities.dropdown
|
|
@text="user@example.net"
|
|
@iconOnly={{true}}
|
|
@icon="user-square-fill" as |dropdown|
|
|
>
|
|
<dropdown.link @route="index">Menu item</dropdown.link>
|
|
<dropdown.link @route="about" @style="danger">Menu item - danger</dropdown.link>
|
|
<dropdown.button>Button - default</dropdown.button>
|
|
<dropdown.separator />
|
|
<dropdown.button @style="danger">Button - danger</dropdown.button>
|
|
</utilities.dropdown>
|
|
</header.utilities>
|
|
</Rose::Header>
|
|
|
|
<Rose::Dropdown @text="Dropdown" as |dropdown|>
|
|
<dropdown.link @route="index">Menu item</dropdown.link>
|
|
<dropdown.link @route="about" @style="danger">Menu item - danger</dropdown.link>
|
|
<dropdown.separator></dropdown.separator>
|
|
|
|
<dropdown.button>Button menu item</dropdown.button>
|
|
<dropdown.button @style="danger">Button - danger</dropdown.button>
|
|
<dropdown.separator />
|
|
|
|
<dropdown.section @title="Dropdown Section Title">
|
|
<dropdown.link @route="index">Menu item</dropdown.link>
|
|
</dropdown.section>
|
|
</Rose::Dropdown>
|
|
|
|
<Rose::Dropdown @showCaret={{false}} @icon="more-horizontal" as |dropdown|>
|
|
<dropdown.link @route="index">Menu item</dropdown.link>
|
|
<dropdown.button>Button menu item</dropdown.button>
|
|
</Rose::Dropdown>
|
|
|
|
<Rose::Form as |form|>
|
|
<form.radioGroup tagName="ul" @name="color" @selectedValue="red" as |radioGroup|>
|
|
<Rose::Dropdown @text="Color" as |dropdown|>
|
|
<ul>
|
|
<li>
|
|
<dropdown.item>
|
|
<radioGroup.radio
|
|
@label="Red"
|
|
@value="red"
|
|
@icon="user-organization" />
|
|
</dropdown.item>
|
|
</li>
|
|
<li>
|
|
<dropdown.item>
|
|
<radioGroup.radio
|
|
@label="Green"
|
|
@value="green"
|
|
/>
|
|
</dropdown.item>
|
|
</li>
|
|
<li>
|
|
<dropdown.item>
|
|
<radioGroup.radio
|
|
@label="Blue"
|
|
@value="blue"
|
|
/>
|
|
</dropdown.item>
|
|
</li>
|
|
</ul>
|
|
</Rose::Dropdown>
|
|
</form.radioGroup>
|
|
</Rose::Form>
|