richiksc
commented
9 years ago You could use <core-media-query> and <template if="">, like this:
<core-scroll-header-panel flex>
<core-media-query query="max-width:640px" queryMatches="{{handheld}}"></core-media-query>
<core-toolbar style="background: #ffffff;">
<template if="{{handheld}}">
<paper-menu-button>
<paper-icon-button noink icon="menu"></paper-icon-button>
<paper-dropdown class="dropdown">
<core-menu class="menu">
<paper-item><a href="#">Tab1</a></paper-item>
<paper-item><a href="#">Tab2</a></paper-item>
<paper-item><a href="#">Tab3</a></paper-item>
</core-menu>
</paper-dropdown>
</paper-menu-button>
</template>
<div class="title">Title</div>
<div flex></div>
<template if="{{!handheld}}">
<paper-tabs style="max-width: 600px;" class="default" flex link>
<paper-tab><a href="#" horizontal center-center layout>Tab1</a></paper-tab>
<paper-tab><a href="#" horizontal center-center layout>Tab2</a></paper-tab>
<paper-tab><a href="#" horizontal center-center layout>Tab3</a></paper-tab>
</paper-tabs>
</template>
</core-toolbar>
<div class="content">
...
</div>
</core-scroll-header-panel>Just make sure you're using this in a polymer element or a <template is="auto-binding">. Otherwise polymer's data binding doesn't work.
Is it possible to collapse the paper-tabs into a menu-bar icon when it the page hits a specific view port by default?