Hey i'm trying to create a simple drag and drop. Is that possible to style an element dynamically. My code will be more explicit:
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="wireframe-view">
<template>
<div on-tap="handleTap"
style$=width:{{ width }}px; background-color:red;
>Hello, World</div>
</template>
<script>
Polymer({
is: "wireframe-view",
handleTap: function() {
this.width = 200;
}
});
</script>
This should change the width in my "style" propertie :/
If the property value contains spaces quotes are required.
style$="width:{{ width }}px; background-color:red";
Here is a method for dynamically updating the style based on the value of a bound data attribute.
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="conditional-css-example">
<style>
#tapContainer {
width: 100px;
background-color:white;
}
#tapContainer[data-tap-status$="tapped"] {
width: 200px;
background-color:red;
}
</style>
<template>
<div id="tapContainer" data-tap-status$="[[tapStatus]]" on-tap="handleTap">Tap Me!</div>
</template>
<script>
Polymer({
is: "conditional-css-example",
properties: {
tapStatus: String;
},
handleTap: function() {
this.tapStatus='tapped';
}
});
</script>
Related
In my custom element's definition, I have the following code:
<dom-module id="dom-element">
<style>
p {
--test: brown;
color: var(--test);
}
</style>
<template>
<p>I'm a DOM element. This is my local DOM!</p>
</template>
<script>
Polymer({
is: "dom-element"
});
</script>
</dom-module>
However, the CSS custom property isn't working. Polymer just turns this:
p {
--test: brown;
color: var(--test);
}
into this:
p {
color: ;
}
But I want the output to be:
p {
color: brown;
}
The demo can be found here: http://plnkr.co/edit/ogMVPKNvc7SYISomWPWm?p=preview
If I don't use Polymer, and create the custom element in pure JavaScript, the CSS custom property works as expected.
I have searched Google, but didn't find something related. What's the problem here? How can I use the CSS custom property with Polymer?
Polymer 1's CSS shim (enabled by default) apparently doesn't handle the CSS variable declaration in the same rule that uses it, so you'd have to move the declaration to :host in this scenario.
<!-- inside dom-module's template -->
<style>
:host {
--test: brown;
}
p {
color: var(--test);
}
</style>
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo'
});
});
<head>
<base href="https://polygit.org/polymer+1.7.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
:host {
--test: brown;
}
p {
color: var(--test);
}
</style>
<p>Hello world</p>
</template>
</dom-module>
</body>
However, you can enable native CSS properties in Polymer with a global setting (useNativeCSSProperties) declared before importing polymer.html, which would allow your code to work as-is:
<script>window.Polymer = {lazyRegister: true, useNativeCSSProperties: true};</script>
<!-- import polymer.html here -->
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo'
});
});
<head>
<script>window.Polymer = {dom: 'shadow', lazyRegister: 'max', useNativeCSSProperties: true};</script>
<base href="https://polygit.org/polymer+1.7.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
p {
--test: brown;
color: var(--test);
}
</style>
<p>Hello world</p>
</template>
</dom-module>
</body>
codepen
I don't want to use JQuery to do this. Currently, I've created a listview using Polymer. I'm using <template is="dom-repeat"> inside a parent div with a class of list.
The CSS is as follows. As I add new items to the list, I would like the list to scroll to the bottom automatically. Is that possible?
.list {
#apply(--layout-flex);
#apply(--layout-vertical);
position: relative;
overflow: auto;
}
You can set the div's scrollTop to scrollHeight in order to automatically scroll to the bottom:
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
properties: {
items: {
type: Array,
value: () => []
}
},
_addItem: function() {
this.push('items', this.items.length+1);
Polymer.RenderStatus.afterNextRender(this, () => {
this.$.list.scrollTop = this.$.list.scrollHeight;
});
}
});
});
<head>
<base href="https://polygit.org/polymer+1.7.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
#list {
border: solid 1px gray;
width: 100%;
height: 100px;
overflow: auto;
}
</style>
<button on-tap="_addItem">Add item</button>
<div id="list">
<template is="dom-repeat" items="[[items]]">
<div>[[item]]</div>
</template>
</div>
</template>
</dom-module>
</body>
codepen
This plunk demonstrates the behavior I am trying to achieve.
This plunk demonstrates my problem. Which is that the individual <li items do not perform their cascaded-animation behavior. All I did was to substitute a custom element I called <content-el> in the repeater and change the appropriate node definitions.
Please answer by providing a working plunk that animates the individual <content-el> nodes.
http://plnkr.co/edit/ZzG4lDvl4V32Bod36208?p=preview
<link href="content-el.html" rel="import">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="app-layout/app-grid/app-grid-style.html">
<link rel="import" href="neon-animation/neon-animation.html">
<link rel="import" href="paper-card/paper-card.html">
<dom-module id="x-app">
<template>
<style include="app-grid-style">
:host {
display: block;
--app-grid-columns: 2;
--app-grid-gutter: 10px;
--paper-icon-button-ink-color: white;
}
.item {
height: 250px;
position: relative;
background-color: white;
background-size: cover;
background-position: center center;
}
</style>
<button on-tap="play">Play Animation</button>
<div class="centered-container">
<ul class="app-grid">
<template id="items"
is="dom-repeat"
items="[1,2,3,4,5,6]"
>
<li class="item"
style="background-image: url(http://fakeimg.pl/800x800/0079D8/fff/?text=[[item]]);"
>
</li>
</template>
</ul>
</div>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'x-app',
behaviors: [
Polymer.NeonAnimationRunnerBehavior,
],
properties: {
animationConfig: {
type: Object,
value: function() {
return {
'entry': [
{
name: 'slide-from-right-animation',
node: this,
}, {
name: 'cascaded-animation',
animation: 'scale-up-animation',
timing: {
delay: 500,
},
},
],
};
},
},
},
attached: function() {
this.async(function() {
var nodeList = Polymer.dom(this.root).querySelectorAll('li.item');
this.animationConfig['entry'][1].nodes = Array.prototype.slice.call(nodeList);
//console.log(this.animationConfig['entry'][1].nodes);
this.playAnimation('entry');
}.bind(this), 500); // https://github.com/Polymer/polymer/issues/2500
},
play: function() {
this.playAnimation('entry');
},
});
})();
</script>
</dom-module>
<dom-module id="content-el">
<template>
<style>
:host {
box-sizing: border-box;
display: block;
}
</style>
http://plnkr.co/edit/2bijfuGjC7NjIAPhMIj4?p=preview
I'm assigning a string that contains anchor tags to an element's innerHTML. I need to style these, however, I am not sure how to do so. Here's an example using Polymer.dom and updateStyles as suggested by this StackOverflow post:
Polymer({
is: 'x-foo',
properties: {
value: {
type: String,
value: 'Hello',
observer: 'setValue'
}
},
setValue: function() {
Polymer.dom(this).innerHTML = this.value;
this.updateStyles();
}
});
<base href="https://polygit.org/polymer+:1.4.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<dom-module id="x-foo">
<style>
a {
color: red;
}
</style>
<template>
<content></content>
</template>
</dom-module>
<x-foo></x-foo>
And here's a link to the jsfiddle:
https://jsfiddle.net/cbelden/xamfhe52/
You don't need to call updateStyles(). Your dom-module style should be using ::content to target the distributed nodes:
<style>
::content a {
color: red;
}
</style>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
properties: {
value: {
type: String,
value: 'Hello',
observer: 'setValue'
}
},
setValue: function() {
Polymer.dom(this).innerHTML = this.value;
//this.updateStyles(); // not needed
}
});
});
<base href="https://polygit.org/polymer+:1.4.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<dom-module id="x-foo">
<style>
::content a {
color: red;
}
</style>
<template>
<content></content>
</template>
</dom-module>
<x-foo></x-foo>
So I have a polymer element, which uses a nested template with repeat attribute. But it doesnt seem to recognize the JSON object being passed in.
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-icon/core-icon.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/core-localstorage/core-localstorage.html">
<polymer-element name="to-do">
<template>
<style>
:host {
display: block;
background: white;
height:400px;
width: 300px;
padding: 20px;
}
paper-input {
width: 70%;
margin: 10px;
display: inline-block;
}
core-icon {
margin: 55px 10px 10px 10px;
display: inline-block;
}
paper-checkbox {
display: block;
width: 100%;
}
</style>
<paper-input floatingLabel label="Enter a Task"></paper-input> <core-icon icon="add-circle"></core-icon>
<div class="tasks">
<template repeat="{{item in tasklist}}">
<paper-checkbox label="{{item.itemName}}"></paper-checkbox>
</template>
</div>
<core-localstorage name="tasks" value="{{tasklist}}"></core-localstorage>
</template>
<script>
Polymer('to-do', {
tasklist: [
{
itemName : "Study",
isDone : true
},
{
itemName : "Cook Dinner",
isDone : false
}
],
ready: function() {
console.log(this.tasklist);
},
addObject: function() {
}
});
</script>
</polymer-element>
It doesnt seem to get tasklist from the script block in the nested template block, but prints it out in the ready block.
You Can see a running demo of the above code here
https://to-do-prateekjadhwani.c9.io/demo.html
Thanks
*****EDIT****
Since, it was using localstorage, it was using data in tasklist from LocalStorage rather than updating itself with the code iteration.
So, I believe that this issue is resolved. But feel free to add comment(s) if you think that my reasoning isn't correct.
Thanks in advance.
Since, it was using localstorage, it was using data in tasklist from LocalStorage rather than updating itself with the code iteration. So, I believe that this issue is resolved.