With Polymer 1.1...
using <paper-ripple fit><paper-ripple> how can I enable/disable the animation dynamically?
<template>
<section class="relative enabledHover"
onclick="page('/portfolio')"
on-click="changePaperHeaderPanel">
<paper-ripple fit hidden="{{!enabled}}"></paper-ripple>
<div class="vertical layout">
Related
Is there a method with CSS in which to set the CSS for paper-input such that the label is hidden?
I am wanting to remove the empty space where the label would appear.
Developer tools shows the following property for the area...
<vaadin-grid-column>
<template class="header">
<div class="horizontal layout cell">
<label for="keyFilter" class="cell">Key</label>
<vaadin-grid-filter class="cell" id="keyFilter" path="key" value="[[_filterKey]]">
<paper-input style="" slot="filter" placeholder="Search" value="{{_filterKey::input}}" focus-target></paper-input>
</vaadin-grid-filter>
</div>
</template>
<template class="cell">[[item.key]]</template>
</vaadin-grid-column>
You don't need css to do that. Just add no-label-float inside paper-input element.
For example:
<paper-input no-label-float placeholder="Search"></paper-input>
Is it possible to include a round thumbnail in the paper-card element following the material design card specification on https://material.io/guidelines/components/cards.html#cards-actions ?
The webcomponents.org documentation only showcases a fullscreen image implemented via <paper-card image="demo/donuts.png">, I however would like to implement something like
Is this possible with the paper-card Polymer 2 element?
You can achieve that by using paper-icon-item inside paper-card.
<paper-card heading="Emmental">
<div class="card-content">
<!-- Paper icon item starts here -->
<paper-icon-item>
<div class="avatar blue" slot="item-icon"></div>
<paper-item-body two-line>
<div>Alphonso Engelking</div>
<div secondary>Change photo</div>
</paper-item-body>
</paper-icon-item>
<!-- Paper icon item ends -->
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
Hope this helps :)
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?
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 created a component and I want to put 3 them vertical
I try this
<div flex layout vertical>
<my-comp></my-comp>
<my-comp></my-comp>
<my-comp></my-comp>
</div>
but this does not work..
I guess you are using Polymer 1.0. Try this instead:
<link rel="import" href="/bower_components/iron-flex-layout/classes/iron-flex-layout.html">
...
<div class="flex layout vertical">
<my-comp></my-comp>
<my-comp></my-comp>
<my-comp></my-comp>
</div>
The layout system in Polymer 1.0 now uses CSS classes, instead of attributes as in Polymer 0.5.