Vulcan/client/views/nav/dropdown_component.html

60 lines
1.8 KiB
HTML
Raw Normal View History

<!--
Dropdown Component
dropdownName (String)
2015-03-23 10:49:21 +09:00
| The name of the dropdown
dropdownItems (Array)
2015-03-23 10:49:21 +09:00
| An array containing the contents of the dropdown
- route (String/Function) [optional]
- label (String/Function) [optional]
- description (String) [optional]
- itemClass (String) [optional]
| an optional CSS class
- adminOnly (Boolean) [optional]
2015-03-23 10:49:21 +09:00
| whether to only show the item to admins
2015-03-22 12:27:05 +09:00
- template (String) [optional]
2015-03-23 10:49:21 +09:00
| if a template is provided, it will override the route/label/description
2015-03-22 12:27:05 +09:00
- data (Object) [optional]
2015-03-23 10:49:21 +09:00
| data contexnt for the template
dropdownLabel (String) [optional]
2015-03-23 10:32:56 +09:00
dropdownClass (String) [optional]
2015-03-23 10:49:21 +09:00
| An optional default CSS class given to the dropdown
2015-03-23 10:32:56 +09:00
2015-03-23 11:28:36 +09:00
dropdownMode (String) [optional]
| "accordion", "hover", or "list" (defaults to "list")
-->
<template name="dropdownComponent">
2015-03-23 10:32:56 +09:00
<div class="dropdown {{dropdownClass}}">
<div class="dropdown-top-level" href="/">{{dropdownLabel}}</div>
<div class="dropdown-menu">
{{#with dropdownItems}}
<ul class="dropdown-contents" role="menu" aria-labelledby="dLabel">
{{#each this}}
{{#if showDropdownItem}}
2015-03-22 12:27:05 +09:00
{{#if hasTemplate}}
{{> Template.dynamic template=template data=data}}
{{else}}
<li class="dropdown-item {{itemClass}}">
2015-03-22 12:27:05 +09:00
<a class="dropdown-sub-level" href="{{itemRoute}}">
<span class="menu-label">{{itemLabel}}</span>
{{#if description}}<span class="menu-description">{{_ description}}</span>{{/if}}
</a>
</li>
{{/if}}
{{/if}}
{{/each}}
</ul>
{{/with}}
2015-03-23 11:28:36 +09:00
<a class="show-more" href="#">
2015-03-24 13:13:04 +09:00
{{{icon "open"}}}
{{{icon "close"}}}
2015-03-23 11:28:36 +09:00
</a>
</div>
</div>
</template>