我尝试使用core-submenu
创建一个页面(因此也是"子页面"(不是真正的组件))。但正如我在网络上看到的那样,问题是"有了这个,因为按core-submenu
项会触发selected
事件,即使自然只需要在按下子元素时触发它。
我发现这个link解释了实现我想要的方法,但这种方法依赖于所有页面上的id和core-submenu
个孩子。我没有必要"循环" - 生成我的菜单。通过不使用core-submenu
,即使没有最轻微的javascript代码,一切都在工作。
是否有可以使用的核心页面和核心子菜单的内置支持?换句话说:一种不需要(或最少)使用javascript的方法吗?
.
. //some code here
.
<core-menu theme="core-light-theme" selected="{{selected}}" selectedItem={{item}}>
<core-submenu icon="settings" label="Favorites">
<core-item icon="https" label="Hello"></core-item>
<core-item icon="https" label="World"></core-item>
</core-submenu>
</core-menu>
.
. //some code here
.
<core-animated-pages transitions="cross-fade" selected="{{selected}}">
<section id="page-1">
<div cross-fade>Hello content</div>
</section>
<section id="page-2">
<div cross-fade>World content</div>
</section>
</core-animated-pages>
.
. //some code here
.
谢谢!
答案 0 :(得分:2)
尝试使用valueattr for ex:
<core-menu theme="core-light-theme">
<core-submenu icon="settings" label="Favorites" valueattr="number" selected="{{number}}">
<core-item icon="https" label="Hello" number="0"></core-item>
<core-item icon="https" label="World" number="1"></core-item>
</core-submenu>
<core-submenu icon="settings" label="Favorites2" valueattr="number" selected="{{number}}">
<core-item icon="https" label="Hello2" number="2"></core-item>
<core-item icon="https" label="World2" number="3"></core-item>
</core-submenu>
</core-menu>
<core-animated-pages transitions="cross-fade" selected="{{number}}">
<section id="page-1">
<div cross-fade>Hello content - {{number}}</div>
</section>
<section id="page-2">
<div cross-fade>World content - {{number}}</div>
</section>
<section id="page-3">
<div cross-fade>Hello content - {{number}}</div>
</section>
<section id="page-4">
<div cross-fade>World content - {{number}}</div>
</section>
</core-animated-pages>
答案 1 :(得分:1)
好吧,你可以抛弃“共享选中”的想法,而是在“核心选择”事件上做出回应。
这样可以正常使用。
<template is='auto-binding'>
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar>Menu</core-toolbar>
<core-menu on-core-select='{{navFunc}}'>
<core-item label='page1'></core-item>
<core-submenu label='something' type='submenu'>
<core-item label='page2'></core-item>
<core-item label='page3'></core-item>
<core-submenu label='super submenu' type='submenu'>
<core-item label='page4'></core-item>
<core-item label='page5'></core-item>
</core-submenu>
</core-submenu>
<core-submenu label='more here' type='submenu'>
<core-item label='page6'></core-item>
<core-item label='page7'></core-item>
</core-submenu>
</core-menu>
</core-header-panel>
<core-animated-pages selected='{{myselection}}' valueattr='label'>
<section label='page1'>Page1</section>
<section label='page2'>Page2</section>
<section label='page3'>Page3</section>
<section label='page4'>Page4</section>
<section label='page5'>Page5</section>
<section label='page6'>Page6</section>
<section label='page7'>Page7</section>
</core-animated-pages>
</core-scaffold>
</template>
<script>
var template = document.querySelector('template[is="auto-binding"]');
template.navFunc = function(e, detail){
if (detail.item.getAttribute('type') !== 'submenu' && detail.isSelected == true) {
template.myselection = detail.item.getAttribute('label');
}
}
</script>