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?
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;
}
}
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
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):
index.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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With