聚合物 - 根据选定的熨斗更改纸张 - 工具栏内容

在聚合物入门套件上展开我很努力想知道当不同的iron-page处于活动状态时，如何将汉堡包（menu）图标更改为不同的按钮。聚合物 - 根据选定的熨斗更改纸张 - 工具栏内容

的index.html

<paper-toolbar class="paper-toolbar-0" id="mainToolbar"> 

    <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button> 
    <!-- more toolbar content here --> 

</paper-toolbar> 

<iron-pages attr-for-selected="data-route" class="layout vertical center" selected="{{route}}"> 

    <!-- Top Stories -->  
    <section data-route="topstories"> 
    <story-list id="story-list" class="layout vertical center-justified"></story-list> 
    </section> 

    <!-- Item Info -->  
    <section data-route="item-info" class="fullbleed layout center-justified"> 
    <item-info firebase-item-id="[[params.firebaseitemid]]" class="fullbleed flex"></item-info> 
    </section> 

</iron-pages>

当选择item-info路线，我想用back按钮来替换menupaper-toggle-button。可能将工具栏文本从应用程序标题更改为“返回顶部故事”。

现在，我认为通过在这些控件上设置一个id，然后在做出这些更改的item-info元素中包含一些Javascript。我更喜欢一些更模块化的东西，因为这会将我的item-info元素与其外部的内容非常接近。

来源

2015-08-21 Insectatorious

我做了一个自定义聚合物元素，您将一组图标放到工具栏上。

下面是代码：

<dom-module id="my-toolbar-icons"> 
<template> 
    <template is="dom-repeat" items="{{contextualButtons}}" as="button" id="buttonsRepeat"> 
     <paper-icon-button contextual-action="{{button.action}}" icon="{{button.icon}}" on-tap="onContextualButtonTap"></paper-icon-button> 
    </template> 
</template> 

<script> 
Polymer({ 
    is: 'my-toolbar-icons', 
    properties: { 
     contextualButtons: { 
      type: Array, 
      value: function() { 
       return []; 
      } 
     } 
    }, 
    ready: function(){ 
     //set data just to show an icon 
     this.contextualButtons = [{ icon: 'social:person-add', action: 'new' }, { icon: 'delete', action: 'delete' }, { icon: 'cloud-upload', action: 'update' }, { icon: 'image:camera-alt', action: 'takephoto' }, { icon: 'search', action: 'search' }]; 
    }, 
    setData: function (newContextualButtons) { 
     //set data to the array (usage) 
     //var item = document.querySelector("#id-of-this-element") 
     //item.setData(someArrayOfIcons) 
     this.contextualButtons = newContextualButtons; 
    }, 
    onContextualButtonTap: function (event) { 
     var item = this.$.buttonsRepeat.itemForElement(event.target); 
     this.fire('customize-listener', item.action); 
    } 
}); 
</script> 
</dom-module> 

<!--Usage--> 
<my-toolbar-icons id="my-toolbar-icons"></my-toolbar-icons> <!--declaration--> 

<!--with javascript--> 
this.toolbar= document.querySelector("#my-toolbar-icons"); 
this.toolbar.setData([{ icon: 'social:person-add', action: 'new' }]);

这只是一个可以用来做你想做的事的想法。

来源

2015-08-21 14:15:27

整洁的想法 - 当你需要在不同的图标之间循环时，我可以看到这一点。你将如何处理它们之间的转换？很高兴能够做一个像YouTube播放按钮转换到暂停按钮一个很好的过渡。 – Insectatorious

解决我对这个元素的问题就够了。说实话，我并没有考虑如何向每个图标添加转换，但是您可以意识到有一个监听器可以为相应的图标执行操作，只需要向监听器添加额外的功能，嗯，我认为是这样。顺便说一句，我的英语很抱歉。 –

我假设您的paper-toolbar和您的iron-pages都位于相同的模板中，因此两者都可以评估route属性。你可以轻松地去，并有一个if-template或切换hidden parameter of the navigation element。

来源

2015-08-21 11:55:15 Kjell

虽然我已经设法得到这个工作（感谢指针在正确的方向），我不能说我完全满意它 - 例如我有一个功能，需要运行在'后面'按钮的“点击”。现在需要在应用程序级别提供。 – Insectatorious

你也可以通过自定义事件来做到这一点。 Backbutton引发'后退'事件，您的应用程序路由器在文档级侦听此事件。 – Kjell

聚合物 - 根据选定的熨斗更改纸张 - 工具栏内容

回答

相关问题