I would like the paper-ripple effect to fill<div class='title bottom'> also. Any ideas on how to make it do that?
<body unresolved>
<paper-header-panel shadow="true"
mode="waterfall-tall"
class="fit">
<paper-toolbar>
<paper-ripple fit></paper-ripple>
<div class='title'></div>
<paper-tabs noink="true" selected="0">
<!-- only HOME gets route. Others will but down below -->
<paper-tab class="route" onclick="page('/')">
HOME
</paper-tab>
<paper-tab onclick="page('/resume')">
RESUME
</paper-tab>
<paper-tab>
CONTACT
</paper-tab>
</paper-tabs>
<div class='title bottom'>
<h1 id="name-title">Foo<p> bar<p></h1>
</div>
</paper-toolbar>
UPDATE...plunker example condenses paper-header-panel in non waterfall mode:
<paper-header-panel
mode="waterfall-tall"
class="fit">
<div>
<paper-toolbar>
<paper-tabs>
<!-- only HOME gets route. Others will but down below -->
<paper-tab class="route" onclick="page('/')">
HOME
</paper-tab>
</paper-tabs>
</paper-toolbar>
<paper-ripple></paper-ripple>
</div>
</paper-header-panel>
paper-toolbar has three vertically stacked divs. So having a paper-ripple that takes the whole space is not an option here. What you can do is to wrap the paper-toolbar with a parent div and have the paper-ripple sit at the same level as the paper-toolbar.
Note that this parent div needs to have a paper-header class so that the paper-header-panel knows it's the header and will assign proper styling to it. Also, to constraint the paper-ripple, this parent div needs to be relative position.
The last change you need to make is to manually give the paper-toolbar a tall class since it's no longer the paper-header-panel's direct children.
<paper-header-panel mode="waterfall-tall" class="fit">
<div class="paper-header relative">
<paper-toolbar class="tall">
<div class="title"></div>
<paper-tabs noink selected="0">
<paper-tab class="route" onclick="page('/')">HOME</paper-tab>
<paper-tab onclick="page('/resume')">RESUME</paper-tab>
<paper-tab>CONTACT</paper-tab>
</paper-tabs>
<div class="title bottom">
<h1 id="name-title">Foo<p> bar<p></h1>
</div>
</paper-toolbar>
<paper-ripple></paper-ripple>
</div>
</paper-header-panel>
Check out this plunker.
Related
I have started learning Polymer & lit-element and was working on active & inactive status grid where i have used paper-tabs with iron-pages.
Question: When I switch between the paper-tabs, the iron-selected class is adding to the paper-tab links but not getting added to the iron-pages content.
How to make the iron-selected class work with the iron-pages content?
Any solution would be great!
constructor() {
super();
this.currentPage = 0;
}
render() {
return html `
<div class="card">
<paper-tabs scrollable selected=${this.currentPage}>
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
<iron-pages selected=${this.currentPage}>
<div>some story for tab 1</div>
<div>some story for tab 2</div>
<div>some story for tab 3</div>
</iron-pages>
</div>
`;
}
}
Unlike Polymer, lit-html doesn't have a two way data binding mechanism so you have to take care of updating the currentPage property in the selected-changed event:
render() {
return html`
<div class="card">
<paper-tabs scrollable
selected=${this.currentPage /* This is unidirectional */}
#selected-changed=${e => this.currentPage = e.detail.value}>
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
<iron-pages selected=${this.currentPage}>
<div>some story for tab 1</div>
<div>some story for tab 2</div>
<div>some story for tab 3</div>
</iron-pages>
</div>
`;
}
Referring to the following code:-
<app-header-layout has-scrolling-region>
<app-header condenses reveals fixed effects="waterfall">
<app-toolbar style="height: 48px;">
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div title>My App</div>
</app-toolbar>
<app-toolbar primary style="height: 48px;">
<paper-tabs attr-for-selected="name" fallback-selection="tab-1" selected={{selected}} style="width: 100%" noink scrollable>
<paper-tab name="tab-1">Tab 1</paper-tab>
<paper-tab name="tab-2">Tab 2</paper-tab>
</paper-tabs>
</app-toolbar>
</app-header>
<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
</iron-pages>
</app-header-layout>
I intend to fixed the paper-tabs, and reveal the first app-toolbar immediately when slide back up. Currently I have to scroll to top for the first app-toolbar to reveal itself.
Does anybody knoow what's the proper way to achieve it? Thanks!
Just want the share that the problem has been fixed in 0.9.1
https://github.com/PolymerElements/app-layout/issues/232
We currently have an paper tab view with 3 tabs, each tab loads its own iron page. Inside the iron page we pull a list of elements using an API. The iron list successfully loads the api results but we can only view the first few elements.
The other elements are hidden as we are unable to scroll. How do we make the list scrollable? as the list view grows in size. The list is dynamically loaded when a particular tab is selected.
<paper-drawer-panel id="paperDrawerPanel">
<!-- Drawer Scroll Header Panel -->
<paper-scroll-header-panel drawer fixed>
<!-- Drawer Toolbar -->
<paper-toolbar id="drawerToolbar">
<span class="paper-font-title"><div class="logo"></div></span>
</paper-toolbar>
<!-- Drawer Content -->
<paper-menu class="list" attr-for-selected="data-route" selected="[[route]]">
<a data-route="home" href="/" >
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
<a data-route="todays-sminq" href="/todays-sminq" on-click="onDataRouteClick">
<iron-icon icon="info"></iron-icon>
<span>Today's sminq</span>
</a>
<a data-route="upcoming-sminq" href="/upcoming-sminq" on-click="onDataRouteClick">
<iron-icon icon="mail"></iron-icon>
<span>Upcoming sminq</span>
</a>
<a on-click="logOut">
<iron-icon icon="user"></iron-icon>
<span>Log Out</span>
</a>
</paper-menu>
</paper-scroll-header-panel>
<!-- Main Area -->
<paper-header-panel main condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar" class="small">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<!-- Toolbar icons -->
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
<!-- Application name -->
<div class="middle middle-container center horizontal layout">
<div class="app-name">Sminq</div>
</div>
<!-- Application sub title -->
<!--<div class="bottom bottom-container center horizontal layout">-->
<!--<div class="bottom-title paper-font-subhead">waiting is now fun</div>-->
<!--</div>-->
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home" >
<live-sminq ></live-sminq>
<!--paper-material elevation="1">
</paper-material>
<paper-material elevation="1">
</paper-material>
<paper-material elevation="1" class="paper-font-body2">
</paper-material-->
</section>
<section data-route="todays-sminq" id="sectiontodays" >
<todays-sminq></todays-sminq>
<!--paper-material elevation="1">
</paper-material-->
</section>
<section data-route="sminq-info">
<sminq-single
token_id ="{{params.id}}" token_number="{{params.no}}" user_name="{{params.name}}"
status_type="{{params.status}}"
user_mobile ="{{params.mobile}}"
queue_id ="{{params.queueId}}"
sminq_type="{{params.sminqType}}"
joinDate="{{params.date}}"
>
</sminq-single>
</section>
<section data-route="live-tokens"class="layout vertical fit">
<live-tokens
queue_id="{{params.id}}" user_name="{{params.name}}">
</live-tokens>
</section>
<section data-route="upcoming-sminq">
<upcoming-sminq>
</upcoming-sminq>
</section>
<section data-route="not-found">
<paper-material elevation="1">
<h2 class="page-title">Page Not Found</h2>
<p></p>
</paper-material>
</section>
</iron-pages>
</div>
</paper-header-panel>
</paper-drawer-panel>
This is our main index.html we have created separate module which loads the tabs and the list view
The code for this module is attached below
<iron-ajax
id="list"
headers='{"Authorization": "xxxx","X-Vertical-Type": "xxx" }'
content-type="application/json"
url=""
handle-as="json"
method="GET"
on-error="handleErr"
debounce-duration="300"
last-response="{{ liveQueues }}"
on-response="ajaxResponse">
</iron-ajax>
<!--<template auto is="dom-if" if="{{loading}}"style="width:100%;">-->
<!--<paper-progress value="10" indeterminate="true" ></paper-progress>-->
<!--</template>-->
<div></div>
<span style="display:none;">[[selected]]</span>
<paper-spinner id="spinner" alt="Loading tokens numbers" ></paper-spinner>
<paper-tabs id="scrollableTabs" selected={{selected}} scrollable >
<template is="dom-repeat" items="[[liveQueues]]" as="queue" >
<paper-tab on-click="listLiveTokens" >[[queue.queueName]]</paper-tab>
</template>
</paper-tabs>
<iron-pages selected="{{selected}}">
<template is="dom-repeat" items="[[liveQueues]]" as="queue" >
<paper-material elevation="1">
<iron-list items="[[queueTokens]]" as="token">
<template>
<div>
<div class="item" tabindex="0">
<span class="avatar" >[[token.tokenNumber]]</span>
<a href$="{{_getDetailsLink(token.tokenId,token.tokenNumber,token.userName,token.statusType,token.userMobile,token.joinDate)}}">
<div class="pad">
<div class="primary">[[token.userName]]</div>
<div class="secondary">[[token.userMobile]]</div>
<div class="secondary dim">[[token.notes]]</div>
<div class="secondary dim">[[token.joinTime]]</div>
</div>
</a>
<iron-icon icon$="[[iconForItem(sminq)]]"></iron-icon>
</div>
</div>
</template>
</iron-list>
</paper-material>
</template>
</iron-pages>
<iron-ajax
id="tokens"
headers='{"Authorization": "xxx","X-Vertical-Type": "xxxx" }'
content-type="application/json"
url=""
handle-as="json"
method="GET"
on-error="tokenError"
debounce-duration="300"
last-response="{{ queueTokens }}"
on-response="tokenResponse">
</iron-ajax>
<template is="dom-if" if="{{isQueueId}}">
<sminq-add queue_id="{{queueId}}"></sminq-add>
</template>
You can implement IronResizableBehavior to resize your list when you switch tabs (note: it should work by default though):
iron-list lays out the items when it receives a notification via the resize event. This event is fired by any element that implements IronResizableBehavior.
By default, elements such as iron-pages, paper-tabs or paper-dialog will trigger this event automatically. If you hide the list manually (e.g. you use display: none) you might want to implement IronResizableBehavior or fire this event manually right after the list became visible again. e.g.
document.querySelector('iron-list').fire('resize');
I am encountering some problems with a custom element created by me, called <little-game></little-game>.
This is <little-game></little-game> template code :
<template>
<a href="{{link}}">
<paper-material elevation="1">
<paper-ripple></paper-ripple>
<iron-image src="{{img_url}}"></iron-image>
<div id="description">{{name}}</div>
<div id="category">{{category}}</div>
</paper-material>
</a></template>
And the :host css of this element:
:host {
display: inline-block;
text-decoration: none;
z-index:1;
}
Those <little-game></little-game> elements are displayed in a page and inside this page i have a <paper-scroll-header-panel> and a <paper-toolbar>. The problem is when i scroll down and the .tall <paper-toolbar> gets smaller, i can click through the <paper-toolbar> on <little-game>/<paper-ripple> element.
<paper-ripple> css :
paper-ripple {
z-index:1;}
mainToolbar html :
<paper-toolbar id="mainToolbar" class="tall">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<!-- Toolbar icons -->
<!--paper-icon-button icon="refresh"></paper-icon-button-->
<paper-icon-button icon="more-vert"></paper-icon-button>
<!-- Application name -->
<div class="middle middle-container center horizontal layout">
<div class="app-name">App title</div>
</div>
<!-- Application sub title -->
<div class="bottom bottom-container center horizontal layout">
<div class="bottom-title paper-font-subhead">App subtitle</div>
</div>
</paper-toolbar>
mainToolbar css :
#mainToolbar {
z-index:3;}
So the main problem is about that i can click the <little-game></little-game> element through the toolbar.
There is an image to understand what i am talking about in a better way:
I think you need to cancel the tap event from propagating through, try adding an on-tap event handler on the paper-toolbar e.g.
<paper-toolbar id="mainToolbar" class="tall" on-tap="{{cancelEvent}}">
then add the function to cancel it
cancelEvent: function(event) {
event.stopPropagation();
}
How to place paper-icon-buttonin right corner of application header ?
Now my icon floats under title and it's not looking good.
Screenshot below
My element Code:
<polymer-element name="sidebar-layout" attributes="selected" noscript>
<template>
<link rel="stylesheet" href="/assets/css/sidebar-layout.css">
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar>Menu</core-toolbar>
<core menu theme="core-light-theme">
<core-item icon="info-outline" label="Notes" active?="{{selected == 'notes-page'}}"><a is="pushstate-anchor" href="/notes"></a></core-item>
<core-item icon="key" label="Logowanie" active?="{{selected == 'login-page'}}}}"><a is="pushstate-anchor" href="/login"></a></core-item>
<core-item icon="key" label="Pozalogowaniu" active?="{{selected == 'main-page'}}}}"><a is="pushstate-anchor" href="/main-page"></a></core-item>
</core>
</core-header-panel>
<div tool>
<content select=".title"></content>
<paper-icon-button id="morebutton"
icon="more-vert"></paper-icon-button>
</div>
<div class="content">
<content></content>
</div>
</core-scaffold>
</template>
</polymer-element>
Though you can do this using CSS pretty nicely here's a workaround that makes more semantic sense, adding a flex attribute to the <content> element or a <span> tag like I have dont below.
<polymer-element name="sidebar-layout" attributes="selected" noscript>
<template>
<link rel="stylesheet" href="/assets/css/sidebar-layout.css">
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar>Menu</core-toolbar>
<core menu theme="core-light-theme">
<core-item icon="info-outline" label="Notes" active?="{{selected == 'notes-page'}}"><a is="pushstate-anchor" href="/notes"></a></core-item>
<core-item icon="key" label="Logowanie" active?="{{selected == 'login-page'}}}}"><a is="pushstate-anchor" href="/login"></a></core-item>
<core-item icon="key" label="Pozalogowaniu" active?="{{selected == 'main-page'}}}}"><a is="pushstate-anchor" href="/main-page"></a></core-item>
</core>
</core-header-panel>
<div tool>
<content select=".title"></content>
<span flex></span>
<paper-icon-button id="morebutton"
icon="more-vert"></paper-icon-button>
</div>
<div class="content">
<content></content>
</div>
</core-scaffold>
</template>
</polymer-element>
This <span> tag with the flex attribute takes just the amount of space that it lets the icon fit in the far right.
More about the flex attribute at:
https://www.polymer-project.org/0.5/docs/polymer/layout-attrs.html
https://www.polymer-project.org/0.5/docs/elements/layout-elements.html
You should learn about layout attributes.
Specifically in this case the attribute justified does the job
<div horizontal layout justified tool>
<content select=".title"></content>
<paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
</div>