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
Related
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">
I'm making an SPA website using Polymer. My main HTML page looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
<script src="/bower_components/system.js/dist/system.js"></script>
<script>
System.config({
map:{
traceur: '/bower_components/traceur/traceur.min.js'
}
});
</script>
<meta charset="UTF-8">
<link rel="import" href="/html/foobar-app.html">
</head>
<body>
<foobar-app></foobar-app>
</body>
</html>
with foobar-app defined as:
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-pages/iron-pages.html">
<link rel="import" href="/bower_components/paper-toast/paper-toast.html">
<link rel="import" href="/html/pages/all-territories.html">
<link rel="import" href="/html/pages/app-login.html">
<dom-module id="foobar-app">
<template>
<style></style>
<iron-pages id="pages" selected="1">
<app-login on-logged-in="onLoggedIn"></app-login>
<all-territories></all-territories>
</iron-pages>
<iron-ajax
url="http://api.foobar.com/data">
</iron-ajax>
</template>
<script>
(function() {
Polymer({
is: 'foobar-app',
// ...
});
})();
</script>
</dom-module>
When I make a change to foobar-app's code everything works fine and updates if I refresh the page. But if I make a change to one of its sub-components or to one of the sub-component's own sub-components, the related html doesn't refresh and I have to manually browse to the related HTML file and press refresh. Else, only the top HTML file is refreshed (foobar-app.html).
How can I ask Chrome to refresh the current page and all its imports, sub-imports etc. whatever the deepness?
I've tried the following without success:
Pressing CTRL + MAJ + R twice
Pressing CTRL + R twice
Try opening the inspector for this page (right click, inspect). Then right click on the refresh icon, finally select "Empty Cache and Hard Reload" from the refresh drop down.
I have had problems with IFrames doing this, but never ajax calls; but this fixed it for me.
I want to toggle the open/closed state of the content of a paper-card element by clicking the heading of the paper-card only.
When I click inside the open content, I want the card to remain in the open state. And not toggle to the closed state.
Open this jsBin to read further and demo what I'm describing.
http://jsbin.com/kecemorojo/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
<!---- >
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<!---->
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-card/paper-card.html" rel="import">
<link href="iron-collapse/iron-collapse.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<paper-card heading="Click Me to Open" on-tap="_toggleCollapse">
<iron-collapse id="collapse">
<div class="card-content">
I want to do stuff inside this content area. Some of it will involve clicking things. But when I click things, I want this paper card to remain open and not close. So I can still see this text and the other things I need to click on. But, unfortunately, with this setup, when you click on this text, the card closes and no one can read the text anymore. I'm looking for a solution that let's me open and close the card by clicking on the header "Click Me to Open" only. See what I mean by clicking on this paragraph right now. Watch it close. And not remain open like I want it.
</div>
</iron-collapse>
</paper-card>
</template>
<script>
(function(){
Polymer({
is: "x-element",
_toggleCollapse: function() {
this.$.collapse.toggle();
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
_toggleCollapse: function(e) {
if (!e.target.classList.contains('card-content')) {
this.$.collapse.toggle();
}
}
In addition to the accepted answer, at least two other solutions also exist:
if (e.target.classList.contains('title-text'))
here
and
if (e.target.classList.contains('title-text', 'style-scope', 'paper-card'))
here
Depending on the situation, one or the other might work better depending on what is being clicked inside the paper-card content section.
http://jsbin.com/kacatozolo/1/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
<!---- >
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<!---->
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-card/paper-card.html" rel="import">
<link href="iron-collapse/iron-collapse.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<paper-card heading="Click Me to Open" on-tap="_toggleCollapse">
<iron-collapse id="collapse">
<div class="card-content">
I want to do stuff inside this content area. Some of it will involve clicking things. But when I click things, I want this paper card to remain open and not close. So I can still see this text and the other things I need to click on. But, unfortunately, with this setup, when you click on this text, the card closes and no one can read the text anymore. I'm looking for a solution that let's me open and close the card by clicking on the header "Click Me to Open" only. See what I mean by clicking on this paragraph right now. Watch it close. And not remain open like I want it.
</div>
</iron-collapse>
</paper-card>
</template>
<script>
(function(){
Polymer({
is: "x-element",
_toggleCollapse: function(e) {
if (e.target.classList.contains('title-text', 'style-scope', 'paper-card')) {
this.$.collapse.toggle();
}
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
Can't see the value inside the input and the menu has horizontal scrollbars, even with small words.
Have you experienced the same issue and found a solution?
I opened a thread on github project if anyone interested.
Here is some code I used (this code is a part of a larger module and I use webcomponents.js to make it work):
<dom-module id="test-form">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<template>
<paper-dropdown-menu label="Center">
<paper-menu class="dropdown-content">
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-menu>
</paper-dropdown-menu>
</template>
<script>
Polymer({
is: "test-form"
});
</script>
</dom-module>
[Edited to remove parts about wc being supported by polymer on IE10, since accepted answer changed]
Your component name must include a dash.
Polymer is based on http://webcomponents.org/. You can see that IE and Safari do not support it. EDGE will probably support it, but don't hold your breath.
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.