I have a paper-dialog-scrollable as my main section for content. However, if I have anything other than text within the dialog, when scrolling, the subtle shadow that is produced on the dialog header is underneath the content.
Text only - With shadow separator
Div only - Without shadow separator
Is there any way to correct this? I am thinking maybe it is a z-index issue?
<div class="contentSection" style="width:100%">
<paper-tabs selected="0" noink>
<paper-tab link>
TAB 1
</paper-tab>
<paper-tab link>
TAB 2
</paper-tab>
<paper-tab link>
TAB 3
</paper-tab>
</paper-tabs>
<paper-dialog-scrollable>
<sample-content size="10"></sample-content>
</paper-dialog-scrollable>
</div>
Related
For example, I have a route between multiple pages like login, home, contact etc. But under home I would like to create a data route for a drawer panel which would route to content within the home page. Or something like swipe-pages between tabs? Is this possible at all?
<paper-tabs selected="{{selectedPage}}">
<paper-tab>Page 0</paper-tab>
<paper-tab>Page 1</paper-tab>
<paper-tab>Page 2</paper-tab>
</paper-tabs>
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">
<paper-material elevation="1">
<swipe-pages attr-for-selected="data-route" selected="{{selectedPage}}">
<swipe-page layout vertical center center-justified>1</swipe-page>
<swipe-page layout vertical center center-justified>2</swipe-page>
<swipe-page layout vertical center center-justified>3</swipe-page>
</swipe-pages>
</paper-material>
</section>
Background
Here is the documentation for the <paper-tabs> element.
Here is an issue describing the lack of content in the demo examples.
The demo examples illustrate tab headers but omit tab content.
Question
Can someone please point to an example showing how <paper-tabs> can be used to control the display of content?
It's in the docs of the first link:
A common usage for paper-tabs is to use it along with iron-pages to switch between different views.
<paper-tabs selected="{{selected}}">
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
<iron-pages selected="{{selected}}">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
</iron-pages>
I'm currently using core-scaffold for my basic app structure. However, i want to have a different toolbar for every page. I want to do something similar to this:
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar>
Veganolux
</core-toolbar>
<core-menu>
<paper-item icon="store" label="Restaurants" on-tap="{{showRestaurants}}"></paper-item>
<paper-item icon="settings" label="Settings" on-tap="{{showSettings}}"></paper-item>
<paper-item icon="info" label="About" on-click="{{showAbout}}"></paper-item>
</core-menu>
</core-header-panel>
<div tool>Restaurants</div>
<core-pages id="pages" selected="0">
<section id="pageRestaurants">
<div tool>Toolbar with buttons</div>
</section>
<section id="pageSettings">
<div tool>Toolbar without buttons</div>
</section>
<section id="pageAbout">
<div tool>Toolbar with other buttons</div>
</section>
</core-pages>
</core-scaffold>
This is however not possible, because the is not a direct child of core-scaffold. I know that I could add databinding to change the title, but it gets to complex if I add different buttons/etc. to the toolbar.
One option is to create an activePage variable that holds the currently selected page. Your on-tap event handlers would update the activePage variable. Then you could wrap sections of the core-header-panel in conditional templates like <template if="{{ activePage === 'restaurants' }}">.
The other option is to create multiple layout elements and wrap the page element in a layout like this http://erikringsmuth.github.io/app-router/#/layouts.
I noticed there were no "selectbox" widgets within the Paper Elements section of Polymer documentation, nor did I see one in the Polymer GitHub repos. Also I don't recall seeing any specific guidance on the Material Design specifications as to how a selectbox should look or behave.
Are there proposals out there? Or specific plans to incorporate designs for selectboxes within material design / polymer paper elements?
I definitely understand that you can basically get the same functionality from checkboxes (multi) or radio buttons (single), but from an aesthetic perspective, depending on the specific application, I get the feeling it may be a good idea to have 'select' available as an option.
Perhaps one of these will fill your needs?
core-selector
<core-selector selected="0">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</core-selector>
core-dropdown
<core-dropdown selected="Financier" valueattr="label">
<core-item label="Croissant"></core-item>
<core-item label="Donut"></core-item>
<core-item label="Financier"></core-item>
<core-item label="Madeleine"></core-item>
</core-dropdown>
You can use the paper-dropdown-menu, for example:
<paper-dropdown-menu label="Favorite fruit" name="fruit">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<paper-item>apples</paper-item>
<paper-item>oranges</paper-item>
<paper-item>pears</paper-item>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
I'm trying to create a toggle menu with Polymer.
What I want is plain simple, when I click an item I want to display only the related div as the content.
I'm using the core-scalffold element which gives you a menu and a content layout.
Which should be the best approach to accomplish this using polymer components and events?
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader">
</core-toolbar>
<core-menu>
<core-item label="Content 1"></core-item>
<core-item label="Content 2"></core-item>
</core-menu>
</core-header-panel>
<span tool>Title</span>
<div class="content1">
Hi there content1!
</div>
<div class="content2">
Hi there content2!
</div>
</core-scaffold>
The core-pages element provides a way of making selectable sections, so this is a good choice for the content divs. Then, since core-menu and the core-pages both have selected properties, it's easy to bind the two elements together. To use Polymer data-binding, we have to use a template. If we put the whole thing in an auto-binding template we get something like this:
<template is="auto-binding">
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader">
</core-toolbar>
<core-menu selected="0" selectedIndex="{{selected}}">
<core-item label="Content 1"></core-item>
<core-item label="Content 2"></core-item>
</core-menu>
</core-header-panel>
<span tool>Title {{selected}}</span>
<core-pages selected="{{selected}}">
<div class="content1">
Hi there content1!
</div>
<div class="content2">
Hi there content2!
</div>
</core-pages>
</core-scaffold>
</template>
Note: I bound selectedIndex property of core-menu so I could use selected for setting the default.
http://jsbin.com/wivec/1/edit
If you really want a solution that uses events instead of binding, let me know.