http://jsbin.com/yohusonejo/edit?html,output seems to be working as
expected for me.
The yellow bar is the tab's default underline color. If you want it to be
something else at load time, you can call
your handleMenuTap() when the element is attached:
attached: function() {
this.handleMenuTap();
},
+Steve Orvell <[email protected]> in case there's a better way to do this
in custom properties / css land. It would be sweet if this worked:
<style>
:host([selected="0"]) {
--paper-tabs-selection-bar-color: red;
}
:host([selected="1"]) {
--paper-tabs-selection-bar-color: blue;
}
:host([selected="2"]) {
--paper-tabs-selection-bar-color: green;
}
</style>
On Sun, Jul 26, 2015 at 7:04 AM Constantin Gaul <[email protected]>
wrote:
> Hi there,
> I observe a strange behaviour in the paper-tabs ontap listener: When I
> register listeners on a "paper-tabs" menu, changing the tabs selection bar
> color, the color does not change on the first, but only on the second click
> on a tab. This means that the color change on the selection bar always lags
> exactly one click behind - so e.g. when I click on Tab-1 first, and then on
> Tab-2, the color change of Tab-1 is applied first and only after a second
> click on Tab-2, the correct Tab-2 specific color is applied.
>
> For the menu itself I made a component like this which uses the
> {{selected}} variable to specify the currently selected tab:
>
> <dom-module id="my-menu">
>
> <template>
> <paper-tabs id="my_menu" noink selected={{selected}}>
> <paper-tab id="tab1">Tab-1</paper-tab>
> <paper-tab id="tab2">Tab-2</paper-tab>
> <paper-tab id="tab3">Tab-3</paper-tab>
> </paper-tabs>
> </template>
>
> <script>
> My_Menu = Polymer({
> is: 'my-menu',
>
> properties: {
> selected: Number,
> value: 0
> },
> listeners:{
> 'my_menu.tap': 'handleMenuTap'
> },
> handleMenuTap: function(e) {
> console.info("HandleMenuTap happened");
> console.info(this.selected);
> if(this.selected == 0){
> this.customStyle['--paper-tabs-selection-bar-color'] = 'red';
> }
> if(this.selected == 1){
> this.customStyle['--paper-tabs-selection-bar-color'] = 'blue';
> }
> if(this.selected == 2){
> this.customStyle['--paper-tabs-selection-bar-color'] =
> 'green';
> }
> this.updateStyles();
> }
> });
>
> var my_menu = new My_Menu();
>
> </script>
>
> </dom-module>
>
>
> In my index.html body, I call the menu like this:
>
> <my-menu selected=0></my-menu>
>
>
> I'm relatively new to Webcomponents and JavaScript in general. If you
> think that this is not the right approach at all, please also tell me. ;)
>
> Thanks in advance!
> Constantin
>
> Follow Polymer on Google+: plus.google.com/107187849809354688692
> ---
> You received this message because you are subscribed to the Google Groups
> "Polymer" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/polymer-dev/d1537da1-d8fa-4b8e-a8cf-dea20e8b5a6c%40googlegroups.com
> <https://groups.google.com/d/msgid/polymer-dev/d1537da1-d8fa-4b8e-a8cf-dea20e8b5a6c%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CACGqRCDyyroz7O%3DaqKP_2P38CjUHSvYtHazSnH--oyn7bppQoA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
