我正在尝试使用 polymer-ui-tabs
传统选项卡组件的组件,您可以在其中根据选择的选项卡切换内容。除非我遗漏了 polymer-ui-tabs
组件似乎只提供选项卡选择器位,而没有用于切换内容的内置机制。那是对的吗?
如果没有,那么我该如何在它之上构建它?我发现的最有可能的是onPolymerSelect
在 polymer_selector
但该方法目前看起来像这样
Stream<CustomEvent> get onPolymerSelect {
Element selection = $['selection'];
if(selection != null) {
// TODO return selection.onPolymerSelect;
}
}
我刚遇到http://kevmoo.github.io/widget.dart/#tabswidget我会调查的,但只是想确保在我拉入另一个图书馆之前我没有遗漏任何东西
最佳答案
虽然它不在 Dart 中,但这里有一个如何使用 polymer-ui-tabs
的示例和 polymer-ui-animated-pages
一起达到预期的效果(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:
<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>
如您所见,绑定(bind)选项卡元素和动画页面之间的当前选择允许您切换到选项卡所需的内容。
关于dart - 使用 polymer ui 元素选项卡选择选项卡时切换内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21815936/