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.
Related
I'm currently using the app-layout elements (Version 0.10.4), specifically app-toolbar.
When creating a div with the "main-title" attribute tied to it, it does not "work." I'm not exactly sure, if it might be what I imported.
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/app-layout/app-layout.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
or it could possibly be that I'm using app-toolbar wrong.
<body>
<app-header-layout>
<app-header effects="waterfall" reveals>
<app-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
</app-toolbar>
</app-header>
<main>
</main>
</app-header-layout>
</body>
All feedback is appreciated, thanks!
Your imports look correct to me. Given that the docs don't fully describe what main-title does, it's possible that you're assuming the wrong behavior for the attribute. Note that main-title expands the title's width across the toolbar. See the demos below.
<head>
<base href="https://polygit.org/polymer+1.7.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="app-layout/app-layout.html">
</head>
<body>
<style is="custom-style">
app-toolbar {
background-color: #4285f4;
color: white;
margin-bottom: 10px;
}
.my-title {
border: solid 1px red;
}
</style>
<app-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<div class="my-title" main-title>With <code>main-title</code></div>
<paper-icon-button icon="account-circle"></paper-icon-button>
</app-toolbar>
<app-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<div class="my-title">Without <code>main-title</code></div>
<paper-icon-button icon="account-circle"></paper-icon-button>
</app-toolbar>
</body>
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.
I searched many tutorials and all documentation about App router, I have tried the guide at https://erikringsmuth.github.io/app-router/ but I do not understand how I can load an HTML page inside a div, without the other reloaded. I know this is make it with AJAX, but with polymer that is different, how could do ?. This is the code for my index.html file:
<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<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-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-icon/iron-icon.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<link rel="import" href="bower_components/paper-menu/paper-submenu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/iron-collapse/iron-collapse.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-styles/typography.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="bower_components/iron-ajax/iron-request.html">
<link rel="import" href="bower_components/app-router/app-router.html">
<link rel="import" href="bower_components/pushstate-anchor/pushstate-anchor.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Reino Unido</title>
</head>
<body>
<paper-drawer-panel>
<div drawer class="menu">
<paper-toolbar class="drawer">
<span>Reino Unido</span>
</paper-toolbar>
<paper-menu class="list">
<paper-item>
<iron-icon icon="home"></iron-icon><span class="Menu">Inicio</span></paper-item>
<paper-item>
<iron-icon icon="shopping-cart"></iron-icon><span class="Menu">Catálogo</span></paper-item>
<paper-item>
<iron-icon icon="star"></iron-icon><span class="Menu">Promociones</span></paper-item>
<paper-item>
<iron-icon icon="drafts"></iron-icon><span class="Menu">Contáctanos</span></paper-item>
<paper-item>
<iron-icon icon="info"></iron-icon><span class="Menu">Acerca de</span></paper-item>
</paper-menu>
</div>
<div main class="page">
<paper-toolbar class="main">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<span title class="flex">Inicio</span>
<paper-icon-button icon="refresh"></paper-icon-button>
</paper-toolbar>
<div id="sections">
Here I want to load HTML pages
</div>
</div>
</paper-drawer-panel>
<app-router>
<app-route path="/catalogo" import="catalogo.html"></app-route>
</app-router>
</body>
</html>
And the app, looks like:
Screnshoot of the App
You can create every page as a web component and then put the custom element tag inside the div.
This way will save your code very clean and understandable.
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>
In this JSBin I need to:
align the two buttons in the toolbar flush with the right edge of the viewport (right justify) and
vertically align the text to the middle of the buttons
Please provide a working JSBin example of how to do that.
Code
http://jsbin.com/nimoyomali/1/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="paper-header-panel/paper-header-panel.html">
<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="paper-drawer-panel/paper-drawer-panel.html">
</head>
<body class="fullbleed vertical layout">
<paper-drawer-panel class="flex">
<paper-header-panel drawer>
<paper-toolbar>
<div>Logo</div>
</paper-toolbar>
<div>Drawer content...</div>
</paper-header-panel>
<paper-header-panel main class="flex seamed">
<paper-toolbar class="seamed">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>App Name</div>
<span class="flex"></span>
<paper-button style="background:white;
color:black;
height:100%;
border-radius:0px;
margin:0;
border-left:solid 1px black;"
>Button 1</paper-button>
<paper-button style="background:white;
color: black;
height: 100%;
border-radius: 0px;
margin: 0;
border-left: 1px solid black;
vertical-align: middle;"
>Button 2</paper-button>
</paper-toolbar>
<div>Main content...</div>
</paper-header-panel>
</paper-drawer-panel>
</body>
</html>
To center the text within the paper-button, you can try -
paper-button {
--paper-button: {
#apply(--layout-vertical);
#apply(--layout-center-center);
};
}
The paper-toolbar has a default left and right padding of 16px. The easiest way to get rid of it is to apply a -16px right margin to the right button.
See this jsbin for a working demo.
And here is the JSbin with the margin applied.
Code
http://jsbin.com/vikazaqedu/3/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="paper-header-panel/paper-header-panel.html">
<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="paper-button/paper-button.html">
<style is="custom-style">
paper-button {
--paper-button: {
#apply(--layout-vertical);
#apply(--layout-center-center);
};
background:white;
color:black;
height:100%;
border-radius:0;
border-left:solid 1px black;
margin:0;
}
paper-button.last {
margin: 0 -16px 0 0;
}
</style>
</head>
<body class="fullbleed vertical layout">
<paper-drawer-panel class="flex">
<paper-header-panel drawer>
<paper-toolbar>
<div>Logo</div>
</paper-toolbar>
<div>Drawer content...</div>
</paper-header-panel>
<paper-header-panel main class="flex seamed">
<paper-toolbar class="seamed">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>App Name</div>
<span class="flex"></span>
<paper-button>Button 1</paper-button>
<paper-button class="last">Button 2</paper-button>
</paper-toolbar>
<div>Main content...</div>
</paper-header-panel>
</paper-drawer-panel>
</body>
</html>