使用聚合物ui元素选项卡选择选项卡时切换内容 [英] Switching content when tab selected using polymer ui elements tabs

问题描述

我试图对传统的标签页组件使用 polymer-ui-tabs 组件，根据选择的标签切换内容。除非我缺少一些东西， polymer-ui-tabs 组件似乎只提供了标签选择器位，没有内置的机制切换内容。是正确的吗？

I'm trying to use the polymer-ui-tabs component for a traditional tab component where you switch content based on which tab is selected. Unless I'm missing something the polymer-ui-tabs component only seems to provide the tab selector bit without an in built mechanism for switching content. Is that correct?

如果不是，我该如何建立它呢？我发现的最可能的事情是 onPolymerSelect 在 polymer_selector ，但该方法目前看起来像这样

If it doesn't then how do I build that on top of it? The most likely thing I found was onPolymerSelect in polymer_selector but that method currently looks like this

Stream<CustomEvent> get onPolymerSelect {
  Element selection = $['selection'];
  if(selection != null) {
    // TODO return selection.onPolymerSelect;
  }
}

我刚刚遇到 http://kevmoo.github.io/widget.dart/#tabswidget 我会查看，但只是想要

I just came across http://kevmoo.github.io/widget.dart/#tabswidget which I'll look into but just wanted to make sure I am not missing something before I pull in another library

推荐答案

虽然不是在Dart中，但这里有一个例子如何使用 polymer-ui-tabs 和聚合物ui-animated-pages 来实现所需的效果（演示）：

Although it isn't in Dart, here's an example of how you can use polymer-ui-tabs and polymer-ui-animated-pages together to achieve the desired effect (demo):

索引。 html：

<!-- <script src="platform.js"></script>
     not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>

<link rel="import" href="s-app.html">
<s-app></s-app>

s-app.html：

s-app.html:

<link rel="import" href="polymer.html">
<link rel="import" href="polymer-ui-tabs/polymer-ui-tabs.html">
<link rel="import" href="polymer-ui-animated-pages/polymer-ui-animated-pages.html">
<link rel="import" href="polymer-flex-layout/polymer-flex-layout.html">

<polymer-element name="s-app">  
  <template>
    <style>
      :host {
        display: block;
      }
      polymer-ui-tabs {
        border-top: 1px solid #000;
      }
      polymer-ui-tabs > * {
        border-right: 1px solid #000;
      }
      header {
        padding: 10px;
        background: black;
        color: white;
      }
      polymer-ui-animated-pages > * {
        padding: 10px;
      }

    </style>
    <polymer-flex-layout vertical></polymer-flex-layout>
    <header>
      Header
    </header>
    <polymer-ui-animated-pages selected="{{page}}" flex>
      <div>Page One</div>
      <div>Page Two</div>
      <div>Page Three</div>
    </polymer-ui-animated-pages>
    <polymer-ui-tabs selected="{{page}}">
      <span flex>One</span>
      <span flex>Two</span>
      <span flex>Three</span>
    </polymer-ui-tabs>
  </template>

  <script>
    // switch page on tab
    Polymer('s-app', {page:0});
  </script>

</polymer-element>

如您所见，绑定当前选择的tab元素和动画页面允许您切换到标签的所需内容。

As you can see, binding the current selection between the tab element and the animated page allows you to switch to the desired content for a tab.

这篇关于使用聚合物ui元素选项卡选择选项卡时切换内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！