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>
Related
Recently tried to migrate a Polymer1 app to Polymer2 but I am really having a hard time to get stuff working. Here are some things I noticed when trying:
Do I really have to hand pick every paper/iron element for polymer2? I used to just install paper-elements and the like, this was a convenient way to simply get all components in a category, is there a similar way to get all paper-elements for polymer 2?
The Api for paper-toolbar specifies a justify property that would center the content, but this does not seem to work in the case below:
```
<paper-toolbar class="tall" justify="center" bottom-justify="center">
<div slot="top" class="title">Top Title</div>
<div slot="middle" class="title">Middle Title</div>
<div slot="bottom" class="title">Bottom Title</div>
</paper-toolbar>
```
The fullbleed class on the body does not work anymore. I've included the iron-layout-classes and iron-layout files, but these do not have any effect :(
Am I missing something?
Yes you have to pick every paper/iron elements.
Elements have dependencies and you just need to install few of them to have a whole lot of polymer elements, I don't see the advantage of downloading a pack of elements when you will just not use them all anyways.
And the reason why middleJustify or bottomJustify are not working in your case is because you are using a class="title". the toolbar will turn the slot title into a flex element, that means the element will stretch as far as possible to the right in the available space of its container. Because the title is taking all the available space justifying it to center will just fail (trying to center something that's all-contained in its container and it won't move).
If you want to justify to the center, try that :
<paper-toolbar class="tall" bottom-justify="center">
<div slot="top" class="title">Top Title</div>
<div slot="middle" class="title">Middle Title</div>
<div slot="bottom">Bottom Title</div> <!-- remove the class title, not recommended for a title -->
</paper-toolbar>
or
<paper-toolbar class="tall" justify="center" bottom-justify="center">
<div slot="top" class="title">Top Title</div>
<div slot="middle" class="title">Middle Title</div>
<div slot="bottom" class="title" style="text-align:center;">Bottom Title</div>
</paper-toolbar>
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>
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>
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'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.