126 lines
3.4 KiB
HTML
126 lines
3.4 KiB
HTML
<!--
|
|
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
|
|
-->
|
|
|
|
<!--
|
|
Use to create nested menus inside of `core-menu` elements.
|
|
|
|
<core-menu selected="0">
|
|
|
|
<core-submenu icon="settings" label="Topics">
|
|
<core-item label="Topic 1"></core-item>
|
|
<core-item label="Topic 2"></core-item>
|
|
</core-submenu>
|
|
|
|
<core-submenu icon="settings" label="Favorites">
|
|
<core-item label="Favorite 1"></core-item>
|
|
<core-item label="Favorite 2"></core-item>
|
|
<core-item label="Favorite 3"></core-item>
|
|
</core-submenu>
|
|
|
|
</core-menu>
|
|
|
|
There is a margin set on the submenu to indent the items.
|
|
You can override the margin by doing:
|
|
|
|
core-submenu::shadow #submenu {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
To style the item for the submenu, do something like this:
|
|
|
|
core-submenu::shadow > #submenuItem {
|
|
color: blue;
|
|
}
|
|
|
|
To style all the `core-item`s in the light DOM:
|
|
|
|
polyfill-next-selector { content: 'core-submenu > #submenu > core-item'; }
|
|
core-submenu > core-item {
|
|
color: red;
|
|
}
|
|
|
|
The above will style `Topic1` and `Topic2` to have font color red.
|
|
|
|
<core-submenu icon="settings" label="Topics">
|
|
<core-item label="Topic1"></core-item>
|
|
<core-item label="Topic2"></core-item>
|
|
</core-submenu>
|
|
|
|
@group Polymer Core Elements
|
|
@element core-submenu
|
|
@extends core-item
|
|
-->
|
|
|
|
<link rel="import" href="../core-item/core-item.html">
|
|
<link rel="import" href="../core-menu/core-menu.html">
|
|
<link rel="import" href="../core-collapse/core-collapse.html">
|
|
|
|
<polymer-element name="core-submenu" attributes="selected selectedItem selectedAttribute label icon src valueattr">
|
|
<template>
|
|
|
|
<link rel="stylesheet" href="core-submenu.css">
|
|
|
|
<core-item id="submenuItem" src="{{src}}" label="{{label}}" icon="{{icon}}" class="{{ {'core-selected' : active} | tokenList}}" on-tap="{{activate}}">
|
|
<content select=".item-content"></content>
|
|
</core-item>
|
|
|
|
<core-menu id="submenu" selected="{{selected}}" selectedItem="{{selectedItem}}" selectedAttribute="{{selectedAttribute}}" valueattr="{{valueattr}}">
|
|
<content></content>
|
|
</core-menu>
|
|
|
|
<core-collapse target="{{$.submenu}}" opened="{{opened}}"></core-collapse>
|
|
|
|
</template>
|
|
<script>
|
|
|
|
Polymer('core-submenu', {
|
|
|
|
publish: {
|
|
active: {value: false, reflect: true}
|
|
},
|
|
|
|
opened: false,
|
|
|
|
get items() {
|
|
return this.$.submenu.items;
|
|
},
|
|
|
|
hasItems: function() {
|
|
return !!this.items.length;
|
|
},
|
|
|
|
unselectAllItems: function() {
|
|
this.$.submenu.selected = null;
|
|
this.$.submenu.clearSelection();
|
|
},
|
|
|
|
activeChanged: function() {
|
|
if (this.hasItems()) {
|
|
this.opened = this.active;
|
|
}
|
|
if (!this.active) {
|
|
this.unselectAllItems();
|
|
}
|
|
},
|
|
|
|
toggle: function() {
|
|
this.opened = !this.opened;
|
|
},
|
|
|
|
activate: function() {
|
|
if (this.hasItems() && this.active) {
|
|
this.toggle();
|
|
this.unselectAllItems();
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
</polymer-element>
|