Most "Material Design" sites feature a side nav drawer with two-level navigation in it using collapsible zippy menu items. How would you implement this in Polymer 1.0? Is there an element for this, or do I have to mix together a bunch of different elements?
Some sites that have this:
Material Design Spec
Polymer Docs
Google Developer Site
Angular Material
I assume this would be built with a <paper-drawer-panel> with a <paper-menu> in it, plus the zippy behavior from <iron-collapse>.
What's the right way to nest a <paper-menu> inside another one? I tried nesting them in a few different ways but the results have not been ideal.
Also, I'm surprised you have to write custom JavaScript to get collapsibles to work. The collapsibles in Bootstrap let you link them together just with css selectors.
Since this question was asked, Polymer has implemented <paper-submenu>, to be used within its <paper-menu>.
For more information on how it works, see the Docs and Demo for paper-menu.
Here is a code sample from the Polymer site:
<paper-menu>
<paper-submenu>
<paper-item class="menu-trigger">Topics</paper-item>
<paper-menu class="menu-content">
<paper-item>Topic 1</paper-item>
<paper-item>Topic 2</paper-item>
<paper-item>Topic 3</paper-item>
</paper-menu>
</paper-submenu>
<paper-submenu>
<paper-item class="menu-trigger">Faves</paper-item>
<paper-menu class="menu-content">
<paper-item>Fave 1</paper-item>
<paper-item>Fave 2</paper-item>
</paper-menu>
</paper-submenu>
<paper-submenu disabled>
<paper-item class="menu-trigger">Unavailable</paper-item>
<paper-menu class="menu-content">
<paper-item>Disabled 1</paper-item>
<paper-item>Disabled 2</paper-item>
</paper-menu>
</paper-submenu>
</paper-menu>
Related
A simple material design dropdown can be created like this:
<paper-dropdown-menu>
<paper-menu class="dropdown-content">
<paper-item>First Option</paper-item>
<paper-item>Second Option</paper-item>
</paper-menu>
</paper-dropdown-menu>
or like this:
<paper-dropdown-menu>
<paper-listbox class="dropdown-content">
<paper-item>First Option</paper-item>
<paper-item>Second Option</paper-item>
</paper-listbox>
</paper-dropdown-menu>
Both look the same, what's the difference? When do you use which one?
When it comes to Polymer 2.0, you'd notice that
<paper-menu> is deprecated in favour of <paper-listbox>.
https://github.com/PolymerElements/paper-menu#paper-menu
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.