How to change icon on core-collapse toggle in polymer ? -
is there way change polymer core-icon on core-collapse collapse without using jquery ?
this code
<template repeat="{{contacts}}"> <div style="margin-top:10px;" class="page-holder contact-dropdown dropdown-holder " horizontal layout center center-justified on-tap="{{toggle}}" ident="{{cardid}}"> <div><img src="http://lorempixel.com/80/80"></div> <div flex style="margin-left:15px;"> <p class="user-name">name</p> <p class="user-dropdown-info">city <span class="blue bold" style="margin-right:15px;">city</span> nr <span class="red bold">297493</span></p> </div> <div> <core-icon style="margin-left:-10px;" ident="{{oldicon}}" class="down-icon" icon="arrow-drop-down"></core-icon> <core-icon style="margin-left:-10px;display: none; " ident="{{newicon}}" class="down-icon" icon="arrow-drop-up"></core-icon></div> </div> <div class="page-holder dropdown-holder" horizontal layout center center-justified> <core-collapse class="collapse-content" id="{{cardid}}"> <div class="page-holder page-border" horizontal layout center center-justified> <div> <core-icon class="dropdown-icon collapsed-holder" icon="fa:phone"></core-icon> </div> <div flex><p class="text-dropdown">call</p></div> </div> <div class="page-holder page-border " horizontal layout center center-justified> <div> <core-icon class="dropdown-icon collapsed-holder" icon="fa:envelope"></core-icon> </div> <div flex><p class="text-dropdown">send e-mail</p></div> </div> <div class="page-holder page-border" horizontal layout center center-justified> <div> <core-icon class="dropdown-icon collapsed-holder" icon="fa:mobile"></core-icon> </div> <div flex><p class="text-dropdown">send msg</p></div> </div> </core-collapse> </div> </template> i've tried trigger function in toggle function , don't think it's idea because firebug console returns null icon variable.
iconclick: function(event, detail, sender) { var icon= this.getelementsbyclassname('down-icon')[0]; icon.toggle(); }, toggle: function (e, detail, sender) { this.iconclick(); }
i think "polymery" way achieve want relying on data-binding without code, binding opened attribute of core-collapse element , hiding icons using hidden layout attribute conditional binding.
minimal sample:
<template> <core-icon hidden?="{{opened}}" icon="arrow-drop-down" on-click="{{toggle}}"></core-icon> <core-icon hidden?="{{!opened}}" icon="arrow-drop-up" on-click="{{toggle}}"></core-icon> <core-collapse id="collapse" opened="{{opened}}"><div>content</div></core-collapse> </template> <script> polymer({ toggle: function () { this.$.collapse.toggle(); } }); </script> the reason why this.getelementsbyclassname returns nothing because querying element's light dom, elements in shadow dom, have use this.shadowroot.getelementsbyclassname instead.
Comments
Post a Comment