When a user clicks in a report button, they should be able to select one or more types of issues. I'm trying something like this:
<core-icon-button icon="report" on-tap="{{ openDropdown }}">
<core-dropdown>
<core-selector valueattr="label" multi>
<core-item label="Type 1"></core-item>
<core-item label="Type 2"></core-item>
<core-item label="Type 3"></core-item>
</core-selector>
<button on-tap="{{ reportIssue }}">Report</button>
</core-dropdown>
</core-icon-button>
But when I select any item the dropdown closes. My expected behaviour would be to close the dropdown only after reportIssue is called.
Is what I'm trying to do possible with core-dropdown (or any other core element) or should I build a custom element for this? Feels like a waste since almost all the behaviour I need is provided already by core-dropdown.
EDIT: The problem seems to be that I had core-dropdown inside core-icon-button. After I changed that everything works as expected. :)
Try closeAttribute or closeSelector. See core-overlay documentation
Related
In my Polymer 0.5 app, core-scaffold has stopped showing it's menu in latest version of Chrome(49).
Here is basic core-scaffold Plunk, Chrome dose not show the menu items.
It there some way to get the menu back?
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar>Application</core-toolbar>
<core-menu theme="core-light-theme">
<core-item icon="settings" label="item1"></core-item>
<core-item icon="settings" label="item2"></core-item>
</core-menu>
</core-header-panel>
<div tool>Title</div>
<div>
Main content goes here...
</div>
</core-scaffold>
That's a Chrome bug https://github.com/Polymer/polymer/issues/3499
The bug is already fixed in Canary (51).
Chrome pre-49 erroneously supported ::content[attribute] as a synonym for attribute]::content (not surprisingly, because the spec is hella confusing).
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader" style="height:100px; background-color:#E5E5E5; padding-top:18px;">
<span><my-logo>
<img src="images/logo.png" />
</my-logo></span>
</core-toolbar>
<core-menu>
<core-item name="livemusic" label="Live music"><paper-ripple></paper-ripple></core-item>
</core-menu>
</core-header-panel>
<paper-input label="Your Name" block></paper-input>
</core-scaffold>
I want the paper-input to show in the navigation bar. But it doesn't. how do I do it? (I tried to put it within the core-toolbar tags)
Thanks in advance
If you put it in your core-toolbar it should work.
Have you tried using other html to test if it really is just the papêr-input, or any html ? If this is only the paper-input, it's probably just an import issue (as peter said). If not, it's probably a css issue.
Anyway, sending us a plunk link would help us.
I started playing around with Polymer few days ago and so far I understand it quite good, but just now I ran into an problem. I tried to change default width of but I couldn't get the desired result. First I tried to change width in css only with these changes:
#navheader {
background-color: #56BA89;
}
core-drawer-panel .transition > #main{
left:100px!important;
}
core-drawer-panel .transition > #drawer{
width:100px!important;
}
core-drawer-panel .narrow-layout > #drawer:not(.core-selected){
width:100px!important;
}
and here is the html part:
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu>
<core-item label="One"></core-item>
<core-item label="Two"></core-item>
<core-item label="Three"></core-item>
<core-item label="Four"></core-item>
<core-item label="Five"></core-item>
<core-item label="Six"></core-item>
<core-item label="Seven"></core-item>
</core-menu>
</core-header-panel>
<span tool>Title</span>
<div class="content">
If drawer is hidden, press button to display drawer.
</div>
</core-scaffold>
It didn't wanted to overwrite the default style without !important. This is what i got: http://screencast.com/t/7AQHblQvk and it looks good until it collapse, like this: http://screencast.com/t/oDg3ptLpp . Then I tried to change default width inside of core-drawer-panel.html so I modified this part of code:
/**
* Width of the drawer panel.
*
* #attribute drawerWidth
* #type string
* #default '256px'
*/
drawerWidth: '100px',
and nothing happened. It didn't changed the width of element, so now I am out of ideas and knowledge about how to achieve this. Can anyone help?
Thanks in advance! :)
There's a drawerWidth attribute for changing the width:
<core-drawer-panel drawerWidth="100px">
https://www.polymer-project.org/docs/elements/core-elements.html#core-drawer-panel
In addition to ebidel 's answer from the polymer developer guide:
Attribute names with dashes are converted to camelCase property names by capitalizing the character following each dash, then removing the dashes. For example, the attribute first-name maps to firstName.
If the above answer doesn't work, try this one:
<core-drawer-panel drawer-width="100px">
I started with
<core-tooltip label="{{editor.userEditor.username}}"
position="left">
<paper-icon-button id="accountbutton" icon="account-circle"
halign="right">
</paper-icon-button>
</core-tooltip>
which is pretty textbook and works fine.
Now I want the icon button to be a menu instead so I changed it to
<core-tooltip label="{{editor.userEditor.username}}"
position="left">
<paper-menu-button id="accountbutton" icon="account-circle"
halign="right">
<paper-item label="Logout {{editor.userEditor.username}}">
</paper-item>
</paper-menu-button>
</core-tooltip>
Problem is (somewhat unsurprisingly maybe in hindsight) the tooltip is open when the menu is open to. Obviously that is undesirable.
How do I avoid that?
See jsbin.com/saziziwixu
I started using the polymer core-pages and core-menu elements.
And I wan to know if I am implementing it right.
My page is simple and looks like this:
<core-menu selected="0" selected="{{selected}}">
<core-item label="Organization"></core-item>
<core-item label="Bank Setup"></core-item>
</core-header-panel>
<span tool class="tabAdminPolymer_title"></span>
<core-pages class="sss" selected="{{selected}}">
<div class="pages">
Hi there content1!
</div>
</core-pages>
Using Java Script on menu click event I am changing the content of the class .page
My content is backbone controls that renders using obj.render js function.
Your implementation is sound but there are some simple errors which are breaking it. Please try the following corrections.
You're using the "selected" attribute twice:
<core-menu selected="0" selected="{{selected}}">
to
<core-menu selected="{{selected}}">
You're closing the wrong tag:
</core-header-panel>
to
</core-menu>
That's it. Code works otherwise.