I'm learning Polymer and I encountered a little problem while doing the menu. Apparently, when I add the dropdown menu it displays opened always, it doesn't close and open at will. Also, I checked the code at the github repo from Polymer and its demos and can't find out what am I doing wrong.
<paper-toolbar>
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-menu>
<paper-menu-button>
</paper-menu-button>
<div class="title">Title</div>
<paper-icon-button icon="refresh"></paper-icon-button>
</paper-toolbar>
You are having an extra <paper-menu-button> before
</paper-menu-button>
<div class="title">Title</div>
This is how your code should looks
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="paper-slider/paper-slider.html" rel="import">
<link href="paper-toolbar/paper-toolbar.html" rel="import">
<link href="paper-menu/paper-menu.html" rel="import">
<link href="paper-menu-button/paper-menu-button.html" rel="import">
<link href="paper-item/paper-item.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
<link rel="import" href="iron-icons/iron-icons.html">
<dom-module id="my-app">
<template>
<paper-toolbar>
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger">+</paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-menu>
</paper-menu-button>
<div class="title">Title</div>
<paper-icon-button icon="refresh"></paper-icon-button>
</paper-toolbar>
</template>
<script>
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'my-app',
properties: {
}
});
});
</script>
</dom-module>
<my-app></my-app>
I don't know if you have imported all the required imports, but here is a Plunkr , you can see it in action
Related
I am very new to Polymer and I was trying use a paper-menu-button inside a paper-toolbar, to reproduce what was shown by Kevin Schaaf on Polymer Summit 2015, but it turns out that the element is not shown. Bellow is my code:
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-menu-button/paper-menu-button.html">
<dom-module id="input-header">
<template>
<paper-toolbar>
<paper-icon-button icon="mail"></paper-icon-button>
<div>{{title}}</div>
<paper-menu-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
<paper-input label="Thread name:" value="{{title}}"></paper-input>
</paper-menu-button>
</paper-toolbar>
</template>
<script>
Polymer({
is: 'input-header',
properties: {
label: {
type: String,
notify: true
}
}
});
</script>
</dom-module>
What Am I doing wrong? Thanks in advance.
The classes are important. Also you don't have a paper-menu with the dropdown-content class defined. I'm not sure about having paper-input???
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-menu>
</paper-menu-button>
I have no idea what you are trying. Using paper-input inside paper-menu-button which should show some items doesn't make point for me, but anyway, if you want to see paper-icon-button inside paper-menu-button you have to add dropdown-trigger class.
Code should be:
<paper-toolbar>
<paper-icon-button icon="mail"></paper-icon-button>
<div>{{title}}</div>
<paper-menu-button>
<paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
<paper-input label="Thread name:" value="{{title}}"></paper-input>
</paper-menu-button>
</paper-toolbar>
paper-menu-button should have some dropdown content so that's why i don't get it.
Maybe use some wrap div around paper-icon-button and paper-input and set dropdown-trigger class to it
I have already use the horizontal-align:"right", but it doesn't work...
<paper-toolbar>
<paper-icon-button src="AC.png" paper-drawer-toggle></paper-icon-button>
<paper-menu-button id="sortbt" >
<paper-icon-button icon="hardware:keyboard-arrow-down" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>Not pay yet</paper-item>
<paper-item>paid</paper-item>
<paper-item>by boss num</paper-item>
</paper-menu>
</paper-menu-button>
<paper-icon-button icon="icons:home" id="homebt" horizontal-align="right"></paper-icon-button>
</paper-toolbar>
what should i do in polymer 1.x
The easiest way IMO is to put a flexed span to take up the middle space.
<!doctype html>
<head>
<meta name="description" content="Polymer Example">
<meta charset="utf-8">
<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="paper-menu-button/paper-menu-button.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
</head>
<body>
<paper-toolbar>
<paper-icon-button icon="icons:menu" paper-drawer-toggle></paper-icon-button>
<paper-menu-button id="sortbt" >
<paper-icon-button icon="hardware:keyboard-arrow-down" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>Not pay yet</paper-item>
<paper-item>paid</paper-item>
<paper-item>by boss num</paper-item>
</paper-menu>
</paper-menu-button>
<span style="flex: 1;"></span>
<paper-icon-button icon="icons:home" id="homebt"></paper-icon-button>
</paper-toolbar>
</body>
No need for span element. style="margin-left: auto" is sufficient.
<!doctype html>
<head>
<meta name="description" content="Polymer Example">
<meta charset="utf-8">
<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="paper-menu-button/paper-menu-button.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
</head>
<body>
<paper-toolbar>
<paper-icon-button icon="icons:menu" paper-drawer-toggle></paper-icon-button>
<paper-menu-button id="sortbt" >
<paper-icon-button icon="hardware:keyboard-arrow-down" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>Not pay yet</paper-item>
<paper-item>paid</paper-item>
<paper-item>by boss num</paper-item>
</paper-menu>
</paper-menu-button>
<paper-icon-button icon="icons:home" id="homebt" style="margin-left: auto"></paper-icon-button>
</paper-toolbar>
</body>
Here is another example of complete layout with flexbox. Look at the sticky footer.
Please provide a working JSBin that makes this <paper-toolbar> "look pretty" as follows:
Vertically center the <paper-input> and <paper-dropdown-menu> elements to the middle of the <paper-toolbar>.
Vertically align the <paper-input> and <paper-dropdown-menu> horizontal input field lines with each other.
Horizontally space the <paper-input> and <paper-dropdown-menu> elements between each other by at least 20px.
Link to JSBin
http://jsbin.com/hiwoqapawu/edit?html,output
<html>
<head>
<title>My Element</title>
<script data-require="polymer#*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<script data-require="polymer#*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"></script>
<base href="http://element-party.xyz/" />
<link rel="import" href="all-elements.html" />
</head>
<body>
<dom-module id="my-element">
<style>
paper-toolbar {
background: var(--paper-blue-100);
}
</style>
<template>
<paper-toolbar>
<paper-input id="search" label="Search">
<iron-icon icon="search" prefix></iron-icon>
<paper-icon-button suffix icon="clear"></paper-icon-button>
</paper-input>
<paper-dropdown-menu label="Sort by">
<paper-menu class="dropdown-content">
<paper-item>Foo</paper-item>
<paper-item>Bar</paper-item>
<paper-item>Qux</paper-item>
</paper-menu>
</paper-dropdown-menu>
</paper-toolbar>
</template>
<script>
Polymer({
is: "my-element"
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>
Link to JSBin
http://jsbin.com/bumisimali/edit?html,output
<html>
<head>
<title>My Element</title>
<script data-require="polymer#*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<script data-require="polymer#*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"></script>
<base href="http://element-party.xyz/" />
<link rel="import" href="all-elements.html" />
</head>
<body>
<dom-module id="my-element">
<style>
paper-toolbar {
background: var(--paper-blue-100);
#apply(--layout-around-justified);
}
paper-dropdown-menu, paper-input {
#apply(--layout-self-end);
}
</style>
<template>
<paper-toolbar>
<div class="flex"></div>
<paper-input id="search" label="Search">
<iron-icon icon="search" prefix></iron-icon>
<paper-icon-button suffix icon="clear"></paper-icon-button>
</paper-input>
<div class="flex"></div>
<paper-dropdown-menu label="Sort by">
<paper-menu class="dropdown-content">
<paper-item>Foo</paper-item>
<paper-item>Bar</paper-item>
<paper-item>Qux</paper-item>
</paper-menu>
</paper-dropdown-menu>
<div class="flex"></div>
</paper-toolbar>
</template>
<script>
Polymer({
is: "my-element"
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>
I'm new to polymer and using version 1.0, and I'm having same problems with the paper dropdown menu button.
Every time I click on it, its height gets smaller.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<link rel="import" href="bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<style>
html,body {
height: 100%;
margin: 0;
background-color: #EFFBFB;
font-family: 'RobotoDraft', sans-serif;
}
</style>
</head>
<body>
<paper-toolbar id="mainToolbar">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<div class="app-name">Dashbord</div>
<span class="flex"></span>
<paper-menu-button horizontal-align="right" horizontal-offset="20" vertical-align="top" vertical-offset="50" height="100%">
<paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-menu>
</paper-menu-button>
</paper-toolbar>
<div class="horizontal-section-container">
<div class="horizontal-section">
<paper-menu>
<paper-item><iron-icon icon="inbox" item-icon></iron-icon> Inbox</paper-item>
<paper-item><iron-icon icon="send" item-icon></iron-icon> Outbox</paper-item>
<paper-item><iron-icon icon="delete" item-icon></iron-icon> Trash</paper-item>
<paper-item><iron-icon icon="report" item-icon></iron-icon> Spam</paper-item>
</paper-menu>
</div>
</div>
</body>
Another thing is that the demo hse the same problem to.
Do I need to reinstall somthing? chang my imports?
Thanks.
How does one make the <paper-menu-button> dropdown work properly? Here is a jsBin.
http://jsbin.com/xamixicuna/4/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="http://polygit.org/polymer:+v1.1.0/components/">
<title>JS Bin</title>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-menu-button/paper-menu-button.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="paper-menu/paper-menu.html">
<link rel="import" href="paper-item/paper-item.html">
</head>
<body>
Click the below menu icon to make the dropdown menu appear.
<br>
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-menu>
</paper-menu-button>
</body>
</html>
added webcomponents, seems to be working: http://jsbin.com/rucejo/2/edit?html,output
Excellent.
And if you use the <paper-menu-button> in <paper-toolbar> you need use <div> tags before. the <paper-toolbar> don't support the <paper-menu-button>