I am trying to make "flex" attribute work nicely when it is specified as light DOM. The sample code below is what I have in a custom element that I am working on.
This works:
<core-scroll-header-panel fixed>
<core-toolbar>
<paper-icon-button icon="arrow-back"></paper-icon-button>
<span flex>Hello!</span>
<paper-icon-button icon="search"></paper-icon-button>
<!--<content select="[toolbar]"></content>-->
</core-toolbar>
<div content>
stuff...
</div>
</core-scroll-header-panel>
Content of select="[toolbar]" is the same 3 lines in the example above. This does not work. Span does not flex:
<core-scroll-header-panel fixed>
<core-toolbar>
<content select="[toolbar]"></content>
</core-toolbar>
<div content>
stuff...
</div>
</core-scroll-header-panel>
Any idea how to make this work? I am ok with a solution where I need to place additional styles in the custom element that I am creating but not sure how to go about it.
Using select="[toolbar] on the <content> insertion point means that your light dom nodes will need a toolbar attribute to be pulled in:
<my-element>
<paper-icon-button toolbar icon="arrow-back"></paper-icon-button>
<span toolbar flex>Hello!</span>
<paper-icon-button toolbar icon="search"></paper-icon-button>
</my-element>
I was able to get this working without issue. It also needed a fit layout attr on the core-scroll-header-panel to give it a size.
<script src="https://www.polymer-project.org/0.5/webcomponents.min.js"></script>
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-scroll-header-panel/core-scroll-header-panel.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-toolbar/core-toolbar.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-icon-button/paper-icon-button.html">
<polymer-element name="my-element" noscript>
<template>
<core-scroll-header-panel fit>
<core-toolbar>
<content select="[toolbar]"></content>
</core-toolbar>
<div content>
stuff...
</div>
</core-scroll-header-panel>
</template>
</polymer-element>
<my-element>
<paper-icon-button toolbar icon="arrow-back"></paper-icon-button>
<span toolbar flex>Hello!</span>
<paper-icon-button toolbar icon="search"></paper-icon-button>
</my-element>
Related
everyone!
I wanted to use paper-header-panel with mode waterfall and custom element 'iron-swipeable-pages'. My code looks somehow like this: (it is not the exact copy, just the structure)
<paper-drawer-panel id="drawer" force-narrow>
<div drawer>
<!-- Drawer panel -->
</div>
<div main>
<paper-header-panel id="paperHeaderPanel" mode="waterfall">
<paper-toolbar id="appbar">
<!-- Toolbar content -->
</paper-toolbar>
<iron-swipeable-pages
padding="16"
id="ironSwipeablePages"
edge-swipe-sensitivity="30"
selected="{{selected}}">
<div id="overview">
1
</div>
<div id="timetable">
2
</div>
<div id="teachers">
3
</div>
<div id="calendar">
4
</div>
</iron-swipeable-pages>
</paper-header-panel>
</div>
</paper-drawer-panel>
The <div> elements inside <iron-swipeable-pages> are scrollable but when I scroll them the waterfall effect on paper-header-panel isn't working.
I tried this:
this.$.paperHeaderPanel.scroller = this.$.overview;
In ready script of element because I saw that property isn't marked as read-only in element reference. However, it does not work. Do you have any ideas how to make waterfall effect work?
How do I close the drawer panel when I click a paper item. I do not seem to understand the documentation or other similar questions.
<paper-drawer-panel responsive-width="800px">
<paper-header-panel drawer id="drawer">
<div class="horizontal-section-container">
<div class="horizontal-section">
<paper-menu>
<paper-icon-item onclick="closeDrawer()" id="icon">
<iron-icon icon="favorite" item-icon></iron-icon>
Favorite
</paper-icon-item>
<paper-item>Inbox</paper-item>
<paper-item>Starred</paper-item>
<paper-item>Sent mail</paper-item>
<paper-item>Drafts</paper-item>
</paper-menu>
</div>
</div>
<!--<ul>
<li><paper-ripple></paper-ripple>One</li>
<li><paper-ripple></paper-ripple>Two</li>
<li><paper-ripple></paper-ripple>Three</li>
</ul>-->
</paper-header-panel>
<!-- <paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div class="title">Title</div>
</paper-toolbar>
<div>
</div>
</paper-header-panel>
-->
I am using polymer with meteor 1.2.1. Can anyone please help me out?
On your paper-icon-item (why not use paper-icon-button here?) Add the attribute paper-drawer-toggle.
So you code will look like:
Favorite
The docs for the paper-drawer-element state:
An element that should toggle the drawer will automatically do so if it's given the paper-drawer-toggle attribute. Also this element will automatically be hidden in wide layout.
this will be an alternative method
drawerToggle: function() {
if (this.$.drawer.narrow && this.$.drawer.getBoundingClientRect().width < parseInt(this.$.drawer.responsiveWidth)) {
this.$.drawer.togglePanel();
} else {
this.$.drawer.forceNarrow = !this.$.drawer.forceNarrow;
}
}
http://jsbin.com/winedi/edit?html,output
In the onclick function of your paper element add this snippet.
if (!this.$.drawer.persistent) {
this.$.drawer.close();
}
I am building a full-screen app with Polymer. Currently, I've defined my layout like this:
<body unresolved class="fullbleed">
<template is="dom-bind" id="app">
<paper-scroll-header-panel fixed>
<paper-toolbar>
<div class="spacer title" style="margin-left:0px;">My App</div>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
</paper-toolbar>
<paper-drawer-panel id="paperDrawerPanel">
<div drawer>
<my-nav flex></my-nav>
</div>
<div main class="content">
<my-view></my-view>
</div>
</paper-drawer-panel>
</paper-scroll-header-panel>
</template>
</body>
The view in <div main class="content"> looks like this:
my-view.html
<dom-module id="project-view">
<template>
<neon-animated-pages class="flex" selected="[[selectedPageIndex]]" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
<!-- Page 1 -->
<div>
<paper-header-panel mode="seamed">
<div class="paper-header">
<paper-toolbar class="view-toolbar">
<paper-icon-button icon="menu"></paper-icon-button>
<span class="flex"></span>
<paper-icon-button icon="menu"></paper-icon-button>
</paper-toolbar>
</div>
<div class="content">
<paper-material elevation="2">
<h1>Welcome</h1>
<p>
This will be a BIG text block that require scrolling. The toolbar should always be visible. The "paper" should scroll under the toolbar like a Google Doc
</p>
</paper-material>
</div>
</paper-header-panel>
</div>
<!-- Page 2 -->
<div>
<paper-material elevation="2">
<p>Another page</p>
</paper-material>
</div>
</neon-animated-pages>
<script>
Polymer({
is: "my-view",
ready: function() {
this.selectedPageIndex = 0;
}
});
</script>
</template>
</dom-module>
When I run this page, the content under the toolbar will not scroll. It stays fixed in position. I do not understand why. How do I create some paper under a toolbar so that it scrolls beneath the toolbar like Google Docs?
Update:
Main layout changed to:
<paper-header-panel class="flex" style="background-color:lightcoral;">
<paper-toolbar>
<div class="spacer title" style="margin-left:0px;">My App</div>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
</paper-toolbar>
<div class="flex content" style="background-color:lightsalmon;">
<div class="horizontal layout">
<div drawer>
<my-nav flex></my-nav>
</div>
<div main class="content">
<my-view></my-view>
</div>
</div>
</div>
</paper-header-panel>
The content scrolls. However, the content of the paper-drawer-panel does not fill the remaining area below the toolbar. I do not understand why. It's like the iron-flex-layout stuff isn't working. What am I doing wrong?
My guess is that it has something to do with the paper-drawer-panel being inside of the paper-scroll-header-panel element. On top of that likely being the culprit, you should consider that if you do have the paper-drawer-panel inside of the paper-scroll-header-panel, it will scroll with your content.
I would try either removing or moving the paper-drawer-panel to start with, and then adding it back in once you have the scrolling working.
I'm not sure if this is already implemented, but this blog post might help you as it explicitly mentions the paper-toolbar together with flex layout :
https://blog.polymer-project.org/announcements/2015/12/01/deprecating-deep/
So you could try using mixins instead of the flex-class.
Try to use paper-dialog-scrollable. All you have to do is set width and height of the scroll area. Works with static and dynamic content.
I'm trying to use paper elements, and I played a bit with the different panels. I tried modifying the example from the documentation:
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar><div>Application</div></paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
I want to have the drawer inside the header panel, so that the header take the whole width of the page.
Here is my attempt: (plunker)
<body class="fullbleed layout vertical">
<paper-header-panel>
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<paper-icon-button icon="menu" (click)="document.querySelector('#panel').togglePanel()"></paper-icon-button>
<div>My app</div>
</paper-toolbar>
<paper-drawer-panel id="panel">
<div drawer> drawer </div>
<div main> main </div>
</paper-drawer-panel>
</paper-header-panel>
</body>
Here, the drawer doesn't close. The buttons don't do anything. In my console, I can use $('#panel').togglePanel(), and I see it changing the selected attribute on the panel, but the drawer doesn't close. What's wrong with my code and how can I make the "menu" button close my drawer?
Edit: replaced $('#panel') by document.querySelector('#panel')
You were trying to use JQuery, here is the Javascript way of doing it:
replace:
(click)="$('#panel').togglePanel()"
with:
onClick="document.querySelector('#panel').togglePanel()"
I'm playing around with Polymer project and want to create a layout similar to Google Play Music (https://play.google.com/music).
How can I hide the drawer by default and display the icon? Basically the small screen behavior of paper-drawer-panel should be forced.
How can I create a app toolbar similar to Play Music?
<body unresolved class="fullbleed layout vertical">
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<paper-drawer-panel responsiveWidth="9999px">
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div>Drawer content...</div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div>Main content...</div>
</paper-header-panel>
</paper-drawer-panel>
</template>
</body>
Erm... How about just force-narrow?
<paper-header-panel force-narrow>
...
</paper-header-panel>
as described in "paper-header-panel.html":
/**
* If true, ignore `responsiveWidth` setting and force the narrow layout.
*/
forceNarrow: {
type: Boolean,
value: false
},
I found the solution! The documentation is pretty useless when such basics like attributes are not correct.
<paper-drawer-panel responsive-width="10000px">