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>
Related
I have a Polymer app-header element in my master page.
I would like to transition from an image to a solid color when scrolling down. To do so, according to the documentation, I need to add a --app-header-background-rear-layer custom property to my app--header in the stylesheet.
Here is my Master Page:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="DarkSoulsMaster.Master.cs" Inherits="DarkSouls.DarkSoulsMaster" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="stylesheets/main.css" type="text/css"/>
<script>
Polymer = {
lazyRegister: true,
useNativeCSSProperties: true
};
</script>
<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="bower_components/app-layout/app-toolbar/app-toolbar.html"/>
<link rel="import" href="bower_components/app-layout/app-header/app-header.html"/>
<link rel="import" href="bower_components/app-layout/app-scroll-effects/app-scroll-effects.html"/>
<link rel="import" href="bower_components/app-layout/app-header-layout/app-header-layout.html"/>
<link rel="import" href="bower_components/app-layout/app-drawer/app-drawer.html"/>
<link rel="import" href="bower_components/app-layout/app-drawer-layout/app-drawer-layout.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/paper-item/paper-item.html" />
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js" ></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form" runat="server">
<div style="overflow: auto;">
<app-header-layout>
<app-header condenses shadow fixed effects="resize-title blend-background">
<app-toolbar>
<div style="color: white; font-size: 36px; margin:auto" class="title-main" condensed-title>Dark Souls</div>
<paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
</app-toolbar>
<app-toolbar>
<div style="transform-origin: top, center; color: white;" class="title-main" main-title>Dark Souls</div>
</app-toolbar>
</app-header>
<app-drawer-layout>
<app-drawer id="drawer" align="right" persistent="false">
<div style="height: 100%; background-color: white; padding-top:256px;">
<paper-icon-item>
<iron-icon icon="home" item-icon></iron-icon>
דף הבית
</paper-icon-item>
</div>
</app-drawer>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</app-drawer-layout>
</app-header-layout>
</div>
</form>
</body>
</html>
And here is my app-header in the css file:
app-header {
background-position-x: 60%;
background-position-y: 15%;
height: 256px;
background-color: #263238;
--app-header-background-rear-layer: {
background: linear-gradient(rgba(38, 50, 56, 0.5), rgba(38, 50, 56, 0.5)), url(../res/header.jpg); <!--This is the image -->
};
}
The problem is that the image doesn't appear. Only a solid blue-grey header is seen. I am pretty sure the problem is in the custom property: --app-header-background-rear-layer because it is the only thing that doesn't change the appearance of the website.
Polymer custom CSS properties like --app-header-background-rear-layer should be used in a custom style element <style is="custom-style">.
So you should use an inline <style is="custom-style"> element, or import it in a <link rel="import" href="style.css"> element.
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>
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>
I've been working with MeteorJS and Polymer integration. I've done quite some code but I'm very poor at Design especially with CSS. Any idea how I can remove the fade in the area boxed in Red? I can change the background color, but I don't know how to remove the fading.
I'm using the following code for the Meteor Template:
<template name="default_template">
<head>
<title>agus</title>
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-input/paper-decorator.html">
<link rel="import" href="bower_components/paper-input/paper-autogrow-textarea.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
</head>
<body>
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu>
<core-item label="Profile" id="mnuItemProfile"></core-item>
<core-item label="Dashboard" id="mnuItemDashboard"></core-item>
</core-menu>
</core-header-panel>
<span tool>Agus System</span>
<div class="content">
{{> yield}}
</div>
</core-scaffold>
</body>
</template>
My css only changes colors. Any recommendations (in css) on removing the fade?
Use the "seamed" mode for core-header-panel as in the core-header-panel demo:
<core-header-panel mode="seamed"></core-header-panel>
You can set box-shadow to none, on the element you are changing the background color, so
box-shadow: none;
Hope this help.