After some search I found that I could scroll core-header-panel by scroller property, but I cannot apply the same thing to core-scaffold.
Is there any way to scroll core-scaffold to the top ??
A core-scaffold element is just a collection of a bunch of other core elements with a bit of commonly used functionality. If the documentation doesn't answer your question one tip is to just look inside the source of the element.
That's for example the content of the core-scaffold.
<div vertical layout drawer>
<content select="[navigation], nav"></content>
</div>
<core-header-panel id="headerPanel" main mode="{{mode}}">
<core-toolbar>
<core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button>
<content select="[tool]"></content>
</core-toolbar>
<content select="*"></content>
</core-header-panel>
The .$ property will contain a path to any element by its id. So $.yourScaffoldID.$.headerPanel is a path you can use to access it through javascript or data-binding.
Thanks to #Winchestro answer,
I could solve it by defining a scroller property for my custom-core-scaffold and make it return the core-header-panel scroller.
get scroller() {
return this.$.headerPanel.scroller;
}
Related
I'm trying to learn Polymer. Currently, I have a custom element that needs to animate content within some paper. In an attempt to do this, I currently have the following:
<paper-material elevation="4">
<h4>Hello</h4>
<neon-animated-pages selected="0" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
<div>
Thank you for visiting. I think you'll enjoy what you're
gonna find. To dive in, click the "Next" button.
<br />
<paper-button>Next</paper-button>
</div>
<div>
some more information
</div>
</neon-animated-pages>
</paper-material>
The odd part is, the content within the neon-animated-pages element does not render within the paper properly. I've included a screenshot below showing how it renders.
What am I doing wrong?
If you look at the source of neon-animated-pages, you will see that it is a position: relative div, and its children (the pages) are all position: absolute (taken out of the document flow).
This means that unless you give a height to your neon-animated-pages element (either by directly setting the height CCS property or the fitor flex class), you will see some overflow like this.
I'm having a bit of confusion when trying to use Polymer's core-media-query element to adjust my layout accordingly. I understand how to set the breakpoint for when the query is going to be true, but I'm unsure of how to adjust individual attributes for the element I'm trying to change at the breakpoint.
Here's what I have so far:
<core-media-query query="max-width: 884px" queryMatches="{{smallScreen}}">
</core-media-query>
and my element:
<div class="footer-container" vertical?="{{smallScreen}}"
horizontal?="{{!smallScreen}}" center-justified layout center>
Which I found here on Github. It works great for moving the layout to vertical when smallScreen == true but I also need to change like, center-justified to end-justified and some other of the attributes. How do I go about doing this?
I've tried doing this:
<div class="left-container" center?="{{smallScreen}}" start?="{{!smallScreen}"
vertical center-justified layout>
But it doesn't appear to be doing anything. It gets that it's !smallScreen but doesn't seem to see when the query is true. hmm
edit: it appears to work with center-justified and end-justified just not work cross-axis stuff
you could use conditional templates.
<template if="{{smallScreen}}">
// things to show when smallScreen is true
</template>
<template if={{!smallScreen}}">
// things to show if smallScreen is false
</template>
I'm wanting to create a layout kinda like google inbox. Specifically:
A banner that can scroll away (thanks core-scroll-header-panel)
A long list as the main content (thanks core-list)
A menu button top left that reveals a core-navigation-panel (rather than a popup)
On the surface that seems like it should be achievable roughly as follows
<core-drawer-panel forceNarrow>
<core-header-panel drawer>
<core-toolbar></core-toolbar>
<core-menu>...</core-menu>
</core-header-panel>
<core-scroll-header-panel main>
<core-toolbar></core-toolbar>
<core-list>....</core-list>
</core-scroll-header-panel>
</core-drawer-panel>
However, my attempts at this have failed (http://jsbin.com/womovo), as the menu for the drawer panel is missing.
Is this layout possible at the moment, either using the above components or others (not sure if core-scaffold helps)?
the menu is there you can click the edge of the page a pull it out. or run
document.querySelector('core-drawer-panel').togglePanel();
in console to show it.
edit: i feel like http://jsbin.com/soqopuyiqi is what you are looking for.
I want to add core-icon-button (e.g. "+" icon) at the end of the toolbar of core-scaffold, that is, inside of
< div tool >
How can I do that?
The "+" icon should be shown at the end of the toolbar in any width of the page.
Thanks.
The core-scaffold element is composed by 3 content areas:
navigation: everything you put inside an element with the attribute navigation or nav is then injected as the content for a core-drawer-panel
tool : here the tool attribute is used and the content of the tool element is used as the content for a core-toolbar inside a core-header-panel
the rest of the content is displayed in the center of the page
So to answer your question:
<div tool>
<div>My Main Content Title in the Toolbar</div>
<core-icon-button icon="add" on-tap="{{addAction}}"></core-icon-button>
</div>
More info on the Building single page apps using web components article on the Polymer website, or by digging into the code of the element
I was able to install and run the polymer 'unquote' tutorial successfully.
Now I want to modify it, but I can't figure out how. Specifically, the post-cards are lined up vertically in one column. I would like to line them up in different ways. For example horizontally and/or in multiple columns.
There is a hint in the tutorial:
http://www.polymer-project.org/docs/start/tutorial/step-2.html
"The layout horizontal center attributes are Polymer shorthand to create a flexbox layout."
So I looked at flexbox documentation at css-tricks.com/snippets/css/a-guide-to-flexbox/
Then I changed the attributes from 'layout horizontal center'
to 'layout vertical center', 'layout horizontal left', ...
Nothing changed. The post-cards always line up vertically in one column. Can somebody steer me in the right direction? The answer could be as simple as a link to the documentation that I can't find.
Erwan, I must be missing something obvious. I can't figure out how to incorporate your idea into this code in post-list.html.
<div layout vertical center>
<template repeat="{{post in posts}}">
<post-card favorite="{{post.favorite}}" on-favorite-tap="{{handleFavorite}}" hidden?="{{show == 'favorites' && !post.favorite}}">
<img src="{{post.avatar}}" width="70" height="70">
<h2>{{post.username}}</h2>
<p>{{post.text}}</p>
</post-card>
</template>
</div>
I am a dummy.
You might need to update the enclosing layout element's attributes.
For example, in my app, I have a core-card with paper-item(s) in it, stacked vertically. The attributes of the core-card contains : vertical layout. If I change the attributes to horizontal layout, the items are stacked horizontally.
Here is the HTML :
<core-card id="core_card" vertical layout >
<paper-item label="Title 0" icon="keep" id="paper_item0" center horizontal layout>Description 0</paper-item>
<paper-item label="Title 1" icon="keep" id="paper_item1" center horizontal layout>Description 1</paper-item>
<paper-item label="Title 2" icon="keep" id="paper_item2" center horizontal layout>Description 2</paper-item>
</core-card>
For more information on layout attributes and flexbox : see polymer documentation
One thing to consider when modifying polymer examples is to look at
https://www.polymer-project.org/docs/polymer/layout-attrs.html
What still trips me is the use o start, center and end instead of left center and right for both vertical and horizontal layout.