I just started learning Polymer and I'm trying to put entry and exit animation on a paper dialog. It seems like the entry animation works perfectly, but the exit animation is not. I'm do a workaround by manually coding a jQuery, but I would like to use the built in capability of paper dialog.
Thanks.
<paper-dialog id="dialog" entry-animation="slide-from-top-animation" exit-animation="fade-out-animation" class="dialogstyle" no-cancel-on-outside-click no-cancel-on-esc-key>
<div class="buttons">
<paper-button id="closebutton" dialog-dismiss autofocus><i class="fa fa-times" aria-hidden="true"></i></paper-button>
</div>
<strong>content here</strong>
</paper-dialog>
The exit animation should work as long as you remember to include the fade-out-animation.html.
<head>
<base href="https://polygit.org/polymer+1.11.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-dialog/paper-dialog.html">
<link rel="import" href="neon-animation/web-animations.html">
<link rel="import" href="neon-animation/animations/slide-from-top-animation.html">
<link rel="import" href="neon-animation/animations/fade-out-animation.html">
</head>
<body>
<paper-dialog entry-animation="slide-from-top-animation"
exit-animation="fade-out-animation" opened>
<h2>Header</h2>
<div>Dialog body</div>
</paper-dialog>
</body>
codepen
Related
Im starting a site using Polymer and the Paper Elements designed for it. I have install the components using bower and it seems i have everything in the right place. here is my code:
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
</head>
<body fullbleed unresolved>
<template is="auto-binding">
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar class="tall">
</core-toolbar>
</core-header-panel>
<div tool layout horizontal flex>
<span flex>Toolbar Text</span>
<core-icon icon="account-circle"></core-icon>
<span>7</span>
</div>
<div flex>
<div class="send_message" layout horizontal>
<paper-input flex label="Enter Text..." id="input" value="{{input}}"></paper-input>
<paper-fab icon="send" id="sendButton" on-tap="{{sendMyMessage}}"></paper-fab>
</div>
</div>
</core-scaffold>
</template>
</body>
</html>
Nothing show up once i load the webpage tho. If i take out the template tag i can see the text in my toolbar, but still none of the elements render. Any help is appreciated, thanks in advance!
It looks like you're using an old version of Polymer (< 1.0) based on your usage of core-* elements (replaced by iron-*) and auto-binding (replaced by dom-bind). Polymer docs have a migration guide that could help you upgrade, but it might be easier to start from scratch, using Polymer Starter Kit (which has the latest and greatest).
In addition to paper tabs, I have other areas where a user can click to navigate. So, I want to set the paper-tab manually when this happens.
For paper-tabs, is there a event that I can fire in another template to change the selected attribute value? I saw that there was a iron-select but I think it fires after a change. In addition, I tried this.fire('iron-select', 1); in another template and the paper-tab did not change.
You can bind to the paper-tabs' selected attribute or you can change the value of the paper-tabs' selected property.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<base href="http://polygit.org/polymer+:master/components/">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="paper-header-panel/paper-header-panel.html">
<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="paper-radio-group/paper-radio-group.html">
<link rel="import" href="paper-radio-button/paper-radio-button.html">
<link rel="import" href="paper-button/paper-button.html">
</head>
<body class="fullbleed">
<template is="dom-bind" id="app">
<paper-header-panel>
<paper-toolbar>
<paper-tabs selected="{{selected}}" attr-for-selected="name">
<paper-tab name="one">One</paper-tab>
<paper-tab name="two">Two</paper-tab>
<paper-tab name="three">Three</paper-tab>
</paper-tabs>
</paper-toolbar>
<div class="container">
<paper-radio-group selected="{{selected}}">
<paper-radio-button name="one">One</paper-radio-button>
<paper-radio-button name="two">Two</paper-radio-button>
<paper-radio-button name="three">Three</paper-radio-button>
</paper-radio-group>
<div class="button-group">
<paper-button data-name="one" on-tap="selectTab">One</paper-button>
<paper-button data-name="two" on-tap="selectTab">Two</paper-button>
<paper-button data-name="three" on-tap="selectTab">Three</paper-button>
</div>
</div>
</paper-header-panel>
</template>
<script>
(function() {
var app = document.getElementById('app');
app.selected = "one";
app.selectTab = function(e) {
app.selected = e.target.dataset.name;
};
})();
</script>
</body>
</html>
When I do this:
<!doctype html>
<html>
<head>
<script src='bower_components/webcomponentsjs/webcomponents.js'></script>
<link rel='import' href='bower_components/polymer/polymer.html'>
<link rel='import' href='bower_components/paper-dialog/paper-dialog.html'>
<link rel='import' href='bower_components/paper-input/paper-input.html'>
</head>
<body unresolved>
<paper-input></paper-input>
<paper-dialog style='width:100px;height:100px' opened>
</paper-dialog>
</body>
Then the paper-input does not get focus immediately when clicked in IE 11. I need to click it some times before the cursor appears.
If I remove the
<paper-dialog style='width:100px;height:100px' opened>
</paper-dialog>
From the page, then the paper-input recieves focus immediately.
I have tried jsbinning it, but it does not seem to work at all in IE http://jsbin.com/cuhubazuwi/1/edit?html,output
Any hints appreciated :-)
Cheers
Works with webcomponents-lite so I have moved to that
Using Polymer 1.0, I have created a paper-drawer-panel layout. In the drawer I have a menu using paper-menu with paper-items which are bound to the iron-pages. I took this example from Content Switcheroo with Core-Pages -- Polycasts #09 and converted it to use the Polymer 1.0 elements. In the code below you can see my commented section in which the paper-items are hard-coded. This works fine.
My next step was to try and build my menu dynamically by using the <template is="dom-repeat"> element to iterate over an arbitrary array of menu items. The menu is rendered correctly (I can see all the menu items that are bound to the array), but I cannot click on the items and no iron-pages are displayed. It seems that the data-category attribute which is used for attr-for-selected is not working inside <template is="dom-repeat">.
In what ways can I get this to work?
Edit: Removing the attr-for-selected attributes and switching the iron-pages using the index work, but relying on the index of the array is not an option in my situation.
My index.html is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>My Test</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<style>
</style>
</head>
<body>
<my-app></my-app>
<dom-module id="my-app">
<style>
</style>
<template>
<paper-drawer-panel>
<paper-header-panel drawer class="fit">
<paper-toolbar>
<div>Drawer</div>
</paper-toolbar>
<paper-menu class="content fit" selected="{{page}}" attr-for-selected="data-category">
<!-- This works -->
<!--
<paper-item data-category="item1" label="item1">
<span>John Smith</span>
</paper-item>
<paper-item data-category="item2" label="item2">
<span>Jane Doe</span>
</paper-item>
-->
<!-- This does not work -->
<template is="dom-repeat" items="{{names}}">
<paper-item data-category="{{item.itemNum}}" label="{{item.itemNum}}">
<span>{{item.first}}</span><span>{{item.last}}</span><span>{{item.itemNum}}</span>
</paper-item>
</template>
</paper-menu>
</paper-header-panel>
<paper-header-panel main class="fit">
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div class="flex">Main Content</div>
</paper-toolbar>
<iron-pages selected="{{page}}" attr-for-selected="data-category">
<section data-category="item1">
<h1>Item 1</h1>
<div>Item 1 content...</div>
</section>
<section data-category="item2">
<h1>Item 2</h1>
<div>Item 2 content...</div>
</section>
</iron-pages>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "my-app",
ready: function() {
this.names = [{itemNum: "item1", first: "John", last: "Smith"}, {itemNum: "item2", first: "Jane", last: "Doe"}];
}
});
</script>
</dom-module>
</body>
</html>
Try <paper-item data-category$="{{item.itemNum}}" label$="{{item.itemNum}}">, from the docs, that will call paper-item.setAttribute('data-category', itemNum) instead of paper-item.data-category = itemNum.
https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding
I've been working with MeteorJS and Polymer integration. I've done quite some code but I'm very poor at Design especially with CSS. Any idea how I can remove the fade in the area boxed in Red? I can change the background color, but I don't know how to remove the fading.
I'm using the following code for the Meteor Template:
<template name="default_template">
<head>
<title>agus</title>
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-input/paper-decorator.html">
<link rel="import" href="bower_components/paper-input/paper-autogrow-textarea.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
</head>
<body>
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu>
<core-item label="Profile" id="mnuItemProfile"></core-item>
<core-item label="Dashboard" id="mnuItemDashboard"></core-item>
</core-menu>
</core-header-panel>
<span tool>Agus System</span>
<div class="content">
{{> yield}}
</div>
</core-scaffold>
</body>
</template>
My css only changes colors. Any recommendations (in css) on removing the fade?
Use the "seamed" mode for core-header-panel as in the core-header-panel demo:
<core-header-panel mode="seamed"></core-header-panel>
You can set box-shadow to none, on the element you are changing the background color, so
box-shadow: none;
Hope this help.