Is there anything like drawer-toggle except that it doesn't toggle the menu? I want to add a similar attribute to paper-icon-button to show/hide the icon button based on whether the drawer is shown or not. I know I can get the boolean from app-drawer-layout.narrow, but my code is not exactly like the following and it's not easy to have an reference to <app-drawer-layout>. The following is just an example of providing the context of what I meant by drawer-toggle.
<app-drawer-layout>
<app-drawer>
drawer-content
</app-drawer>
<app-header-layout>
<app-header>
<app-toolbar>
<paper-icon-button icon="close" drawer-toggle></paper-icon-button>
<div main-title>App name</div>
</app-toolbar>
</app-header>
main content
</app-header-layout>
</app-drawer-layout>
You can bind a boolean property to the app-drawer-layout's narrow property and use this with an observer to show/hide the paper-icon-button. Example:
<dom-module id="test-app">
<template>
<style>
.hide {
display: none;
}
</style>
<app-drawer-layout fullbleed narrow="{{visible}}">
<app-drawer id="drawer">
drawer content
</app-drawer>
<app-header-layout>
<app-header>
<app-toolbar>
<paper-icon-button id="button" icon="menu" on-tap="_onTap"></paper-icon-button>
<div class="title" main-title>App name</div>
</app-toolbar>
</app-header>
<div>
main content
</div>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
Polymer({
is: 'test-app',
properties: {
visible: {
type: Boolean,
observer: '_visibleChanged'
}
},
_onTap: function() {
console.log(this.visible);
this.$.drawer.toggle();
},
_visibleChanged: function(value) {
this.toggleClass('hide', !value, this.$.button);
}
});
</script>
</dom-module>
Note that now you need to manually handle the drawer toggle (_onTap function).
Related
I have a paper-drawer-panel in one element and a toolbar in a child element. On the toolbar is a menu-button, that should toggle the drawer-panel but it does not. How can I tell the paper-drawer-panel to accept a command from the child element?
Parent-element:
<dom-module id="nav-drawer">
<template>
<paper-drawer-panel drawerFocusSelector="">
<div drawer id="drawerbox">
Contents of drawer panel here.
</div>
<div main>
<tool-bar></tool-bar>
</div>
<paper-drawer-panel>
</template>
</dom-module>
Child element:
<dom-module id="tool-bar">
<template>
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
</paper-toolbar>
</template>
</dom-module>
Thanks for your help. I'm new to Polymer.
I found the answer myself:
The tool-bar element I changed as follows, adding attributes and an on-tap function.
<dom-module id="tool-bar" attributes="togdraw">
<template>
<paper-toolbar>
<paper-icon-button icon="menu" on-tap="toggleDrawer"></paper-icon-button>
</paper-toolbar>
</template>
<script>
.....
toggleDrawer: function() {
this.fire('eventFromChild',{togdraw:"drawer"});
}
....
</script>
</dom-module>
And the nav-drawer I changed like accordingly:
<dom-module id="nav-drawer">
<template>
<paper-drawer-panel drawerFocusSelector="" selected="{{selectPanel}}">
<div drawer id="drawerbox">
Contents of drawer panel here.
</div>
<div main>
<tool-bar></tool-bar>
</div>
<paper-drawer-panel>
</template>
<script>
....
properties: {
selectPanel: String
},
ready: function() {
this.addEventListener('eventFromChild', this.toggleDrawer);
},
toggleDrawer: function(event,selectPanel) {
this.selectPanel = event.detail.togdraw;
return selectPanel;
}
....
</script>
</dom-module>
Using the template from starter kit 2, is it possible to have the app drawer below the app-header? Right now the app drawer starts from the top of viewport and is columnized next to app-header.
I would like my app to be like google keep and google cloud console where the app header spans the entire width of the viewport and the app drawer begins underneath.
After reading the element catalog for app-layout, I did not see a offical api/attribute to set this. I've tried a few things but no success:
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
<app-drawer>
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">View One</a>
<a name="view2" href="/view2">View Two</a>
<a name="view3" href="/view3">View Three</a>
</iron-selector>
</app-drawer>
Basically you need to use an app-drawer-layout inside an app-header-layout.
Here is a JSBin with the desired layout.
And the code itself:
<dom-module id="test-app">
<template>
<style>
:host {
display: block;
--app-primary-color: #3F51B5;
}
app-header {
background-color: var(--app-primary-color);
color: white;
}
app-drawer {
top: 64px;
--app-drawer-content-container: {
padding: 0px;
background-color: #eee;
};
}
</style>
<app-header-layout fullbleed>
<app-header fixed shadow>
<app-toolbar id="toolbar">
<paper-icon-button icon="menu" on-tap="_onTap"></paper-icon-button>
<div main-title>Stormwind</div>
</app-toolbar>
</app-header>
<app-drawer-layout>
<app-drawer id="drawer">
drawer content
</app-drawer>
<div>
main content
</div>
</app-drawer-layout>
</app-header-layout>
</template>
<script>
Polymer({
is: 'test-app',
properties: {
},
ready: function() {
},
attached: function() {
},
_onTap: function() {
this.$.drawer.toggle();
}
});
</script>
</dom-module>
NOTE
You need to manually handle the drawer button (the drawer-toggle property won't work).
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
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();
}
I have followed the polymer demo to create a navigation drawer with a icon to open it on click. The demo only requires one click to open up the navigation drawer, but when I try it with my own code it required double clicks to open up. Any reason why? I have copied the code straight up from the demo. The function openDrawer() looks correct, but opening the drawers a double click. I don't know why it won't open on the first click.
<body fullbleed>
<template is="auto-binding" id="tmp">
<core-drawer-panel id="drawerPanel">
<core-header-panel drawer id="drawer" mode="seamed">
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu selected="{{option}}" valueattr="data-category">
</core-menu>
</core-header-panel>
<core-header-panel main id="main" mode="seamed">
<core-toolbar id="mainheader">
<paper-icon-button id="navicon" icon="menu" onclick="openDrawer()"></paper-icon-button>
<span flex>Booklet</span>
</core-toolbar>
</core-header-panel>
</core-drawer-panel>
</template>
<script>
document.addEventListener('polymer-ready', function() {
var pageStart = document.querySelector('#tmp');
pageStart.option = 'home';
});
function openDrawer() {
var navicon = document.getElementById('navicon');
var drawerPanel = document.getElementById('drawerPanel');
navicon.addEventListener('click', function() {
drawerPanel.togglePanel();
});
}
</script>
</body>
I see a few issues.
Because you have everything in an auto-binding template, you need to listen for template-bound instead of polymer-ready. Only when template-bound fires will your elements have been stamped to the DOM.
The other issue is that you're adding your click listener INSIDE your openDrawer method. You want to add the click listener in the template-bound handler.
Here's a jsbin example
<body fullbleed>
<template is="auto-binding" id="tmp">
<core-drawer-panel id="drawerPanel">
<core-header-panel drawer id="drawer" mode="seamed">
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu selected="{{option}}" valueattr="data-category">
<core-item>Foo</core-item>
<core-item>Bar</core-item>
<core-item>Baz</core-item>
</core-menu>
</core-header-panel>
<core-header-panel main id="main" mode="seamed">
<core-toolbar id="mainheader">
<paper-icon-button id="navicon" icon="menu"></paper-icon-button>
<span flex>Booklet</span>
</core-toolbar>
</core-header-panel>
</core-drawer-panel>
</template>
<script>
document.addEventListener('template-bound', function() {
var navicon = document.getElementById('navicon');
var drawerPanel = document.getElementById('drawerPanel');
navicon.addEventListener('click', function() {
drawerPanel.togglePanel();
});
});
</script>
</body>