polymer selector doesn't fire tab selection change when selected tab is initialised in ready

StackOverflow https://stackoverflow.com/questions/22122280

  •  18-10-2022
  •  | 
  •  

Pregunta

Just filed an issue https://github.com/ErikGrimes/polymer_elements/issues/117. Reproducing here.

I'm using a polymer-ui-tabs with a polymer-ui-pages and it doesn't reliably change the page when a tab clicked.

To reproduce use the code below. Then

  • observe that the Two tab is selected and the Two page is shown

  • click on the Three tab is selected and the Three page is shown

  • click on the Two tab. The content still shows the Three page

Repeat with the selectedTab = 1; removed from the dart code. Now the tabs work correctly.

polymer_tabs_issue.html

<!DOCTYPE html>
<polymer-element name="polymer-tabs-issue" attributes="selectedTab">

  <link rel="import" href="packages/polymer_ui_elements/polymer_ui_tabs/polymer_ui_tabs.html">
  <link rel="import" href="packages/polymer_ui_elements/polymer_ui_pages/polymer_ui_pages.html">
  <link rel="import" href="packages/polymer_elements/polymer_layout/polymer_layout.html">

  <template>
    <style type="text/css">
      polymer-ui-tabs {
        width: 100%;
        height: 70px; /* not sure why need to set height */
      }
      polymer-ui-pages {
        width: 100%;
        border: 1px solid gray;
        margin: 0px 5px 5px 5px;
      }
      polymer-ui-tabs > * {
        width: 30%;
      }
    </style>

    <div style="width:100%;height:100%;">
      <polymer-layout vertical></polymer-layout>

      <div>
        <polymer-layout></polymer-layout>
        <polymer-ui-tabs selected="{{selectedTab}}">
          <span>One</span>
          <span>Two</span>
          <span>Three</span>
        </polymer-ui-tabs>
        <div flex></div>
      </div>

      <polymer-ui-pages selected="{{selectedTab}}" flex>
          <span>One</span>
          <span>Two</span>
          <span>Three</span>
      </polymer-ui-pages>      
    </div>

  </template>

  <script type="application/dart" src="polymer_tabs_issue.dart">
  </script>

</polymer-element>

index.html

<!doctype html>

<html>
  <head>
    <title>polymer tabs issue</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="import" href="polymer_tabs_issue.html">
    <link rel="import" href="packages/polymer_elements/polymer_layout/polymer_layout.html">
  </head>
  <body>
    <polymer-layout></polymer-layout>
    <polymer-tabs-issue flex></polymer-tabs-issue>

    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

polymer-tabs-issue.dart

library polymer_tabs_issue;

import 'package:polymer/polymer.dart';

@CustomTag('polymer-tabs-issue')
class PolymerTabsIssueElement extends PolymerElement  {

  @published
  dynamic selectedTab;

  PolymerTabsIssueElement.created(): super.created();

  @override
  void ready() {
    selectedTab = 1;
  }

}
¿Fue útil?

Solución

can you please try

  @override
  void ready() {
    selectedTab = '1';
  }

It worked for me but my polymer-selection/polymer-selector alredy contain some modifications not yet published

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top