I am creating a new webapp in Polymer 1.0 which needs the following layout.
A header panel which covers the entire page while loading and condenses to the height of a small toolbar
A responsive drawer panel which is swipeable in case of mobiles and gets persistent on large screens.
The polymer already had its own web components for this purpose namely,
app-header-panel and app-drawer-panel
I guess the straight forward solution is by containing the entire drawer panel within the header panel. They worked perfect until I put both of them together in a single page. I'm facing some layout issues when using them together.
The persistent drawer moving behind the app-header-panel instead of sticking to the content area of the header panel. (NOTE: The app-header-layout has higher z-index than app-drawer-panel).
How to solve this issue?
First: clear all your css that tries to change the z-index or postion or anything else like these of any component of app-layout or it's going to mess up the component.
Here's my sample:
<app-drawer-layout fullbleed
force-narrow>
<!-- Drawer content -->
<app-drawer id="appDrawer"
swipe-open>
<app-toolbar>Menu</app-toolbar>
<!-- Some content -->
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header fixed
effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu"
drawer-toggle></paper-icon-button>
<div title>My App</div>
</app-toolbar>
</app-header>
<!-- Some content -->
</app-header-layout>
</app-drawer-layout>
Do not forget to import all dependencies:
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.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/app-header.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-toolbar/app-toolbar.html">
Related
I was looking for json format icon from the polymer iron icons list which is not available
something similar to http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/high-resolution-dark-blue-denim-jeans-icons-alphanumeric/072287-high-resolution-dark-blue-denim-jeans-icon-alphanumeric-bracket-curley.png
I am tried below workaround but it didnt work either
<paper-icon-button id="json">{}</paper-icon-button>
https://codepen.io/nagasai/pen/rwqYYZ
<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-icons/iron-icons.html">
<div class="toolbar">
</head>
<body>
<paper-icon-button id="json">{}</paper-icon-button>
<paper-icon-button id="save" icon="icons:save"></paper-icon-button>
</body>
<paper-icon-button> has a src property to specify the URL of the desired image. You could even specify the .png URL you indicated in the question, like this:
<paper-icon-button src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/high-resolution-dark-blue-denim-jeans-icons-alphanumeric/072287-high-resolution-dark-blue-denim-jeans-icon-alphanumeric-bracket-curley.png"></paper-icon-button>
codepen
I have chosen a navigation menu bar with tabs for fulfilling my application requirement.
If I set seven tabs in navigation mode, the window width is good enough to show all the tabs. When I add more than seven, the tabs are visible, and I can access them by scrolling horizontally. Although, tabs are visible only on scrolling to the right, and the user may not be aware that more tabs are available, so I want to add scroll arrows to my toolbar.
I am using Polymer. How do I add scroll arrows to my toolbar? Thanks.
Also I want to add scrollbar to app drawer also. Please help me in that too.
With Polymer's <paper-tabs>, you could set the scrollable property to enable the arrows for scrolling.
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo'
});
});
<head>
<base href="https://polygit.org/polymer+1.7.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-tabs/paper-tabs.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<paper-tabs selected="0" scrollable>
<paper-tab>NUMBER ONE ITEM</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>THE THIRD ITEM</paper-tab>
<paper-tab>THE ITEM FOUR</paper-tab>
<paper-tab>FIFTH</paper-tab>
<paper-tab>THE SIXTH TAB</paper-tab>
<paper-tab>NUMBER SEVEN</paper-tab>
<paper-tab>EIGHT</paper-tab>
<paper-tab>NUMBER NINE</paper-tab>
<paper-tab>THE TENTH</paper-tab>
<paper-tab>THE ITEM ELEVEN</paper-tab>
<paper-tab>TWELFTH ITEM</paper-tab>
</paper-tabs>
</template>
</dom-module>
</body>
codepen
I've been playing with Polymer. I've successfully built a "hello world" app. My app includes the iron-elements. I'm now trying to integrate the paper-elements. Unfortunately, I can't seem to get them to work in my project.
I installed them via bower install PolymerElements/paper-elements. I then imported the .html similar to the way I did for the iron elements. However, the items didn't appear. So, I decided to take a step back and just do a "hello world" with the paper elements. To my surprise, I couldn't figure out how to just display a Button with Paper. Surely I'm not this dumb.
I sought out a basic app I could pull from GitHub and use. However, I didn't have any luck doing that either. Currently, I have the following:
<html>
<head>
<title>Hello</title>
<script src="res/packages/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- Polymer -->
<link rel="import" href="res/packages/polymer/polymer.html">
<!-- Paper Elements -->
<link rel="import" href="res/packages/font-roboto/roboto.html">
<link rel="import" href="res/packages/paper-header-panel/paper-header-panel.html">
<link rel="import" href="res/packages/paper-toolbar/paper-toolbar.html">
<link rel="import" href="res/packages/paper-button/paper-button.html">
<!-- End of Paper Elements -->
<!-- End of Polymer -->
</head>
<body unresolved>
<h1>Hello</h1>
<paper-header-panel>
<paper-button raisedButton label="button"></paper-button>
</paper-header-panel>
</body>
</html>
what am I doing wrong? Can someone either tell me what I'm missing or point me to a basic "hello world" app with Paper?
Thank you!
Remove your paper-header-panel and try this:
<paper-button raised>Raised button</paper-button>
The problem I am having here is that the page renders fine when I do not import "paper-input". But when I import "Paper-input" the page does not render. I have not tested any other imports at the moment to see if the page renders. Any ideas why it doesn't render? I've just tried using the imports from the polymer website such as "" and it does not work. Also I have created a test file using all imports starting with the http and it seems to work fine. I do prefer to have the imports locally on my server instead of using the online sources.
<!--Header & Tabs -->
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
<!-- Input text box -->
<link rel="import" href="../components/paper-input/paper-input.html">
<!-- Font -->
<link rel="import" href="../components/font-roboto/roboto.html">
<script src="../components/webcomponentsjs/webcomponents.js"></script>
<body unresolved>
<core-header-panel>
<core-toolbar>
<paper-tabs id="tabs" selected="0" self-end>
<paper-tab name="first">first</paper-tab>
<paper-tab name="second">second</paper-tab>
<paper-tab name="third">third</paper-tab>
</paper-tabs>
</core-toolbar>
</core-header-panel>
<!-- input box -->
<paper-input label="Name" ></paper-input>
</body>
Say I've got one polymer app test-app, one regular div div-a, and one polymer element page-a.
Now I'm trying to build a animated-pages, which contains div-a and page-a
<link rel="import" href="../../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../../bower_components/core-icons/core-icons.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../page-a/page-a.html">
<polymer-element name="test-app" flex vertical layout>
<template>
<core-animated-pages
selected="{{selected}}"
transitions="cross-fade"
>
<section name="div-a">
<div cross-fade>
<span>div-a</span>
</div>
</section>
<section name="page-a">
<page-a cross-fade></page-a>
</section>
</core-animated-pages>
</template>
<script src="./test-app.js"></script>
</polymer-element>
The problem is: when performing the transition, the animation on div-a works fine, but the one on page-a doesnot work. Instead of fading in, the page-a just suddenly appears.
Another strange point is: if I change transitions="cross-fade" into transitions="cross-fade-all", and remove other cross-fade defined on div and page-a, both transitions work find.
Any idea?
Cross-fade doesn't work directly on elements that have overflow: hidden set.