CODEWITHSUNDEEP
javascriptpolymerpolymer-2.x
Maciej Wojcik
Maciej Wojcik

Reputation: 2171

Polymer 2.0 Data Binding - from html property to Polymer class

I want to have the same feature as Polymer paper-elements drop-down menu have with disabled.

The drop-down menu code:

<paper-dropdown-menu label="Disabled dinosaurs" disabled>
 <paper-listbox class="dropdown-content">
    <paper-item>allosaurus</paper-item>
    <paper-item>brontosaurus</paper-item>
    <paper-item>carcharodontosaurus</paper-item>
    <paper-item>diplodocus</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

In first row there is: <paper-dropdown-menu label="Disabled dinosaurs" disabled>

The question is how to pass to Polymer class that this.disabled = true if disabled parameter is in <my-element tag>?

So when i have <my-element disabled> this.disabled=true and if <my element nothing there> this.disabled=false?

Upvotes: 1

Views: 369

Answers (1)

daKmoR
daKmoR

Reputation: 1864

that should just work using polymer properties with a boolean type and reflectToAttribute.

<html>
<head>
	<base href="http://polygit.org/polymer+v2.0.0-rc.7/webcomponentsjs+v1.0.0-rc.11/shadydom+webcomponents+:master/shadycss+webcomponents+:master/components/">

	<link href="polymer/polymer.html" rel="import">

	<script src="webcomponentsjs/webcomponents-loader.js"> </script>
</head>

<body>

<my-el disabled>
	<h3>Disabled Element</h3>
</my-el>
	
<my-el>
	<h3>Enabled Element</h3>
</my-el>


<dom-module id="my-el">
	<template>
		<style>
			.disabledInfo { display: none; }
			:host([disabled]) .disabledInfo { display: block; }
			:host([disabled]) .enabledInfo { display: none; }
		</style>
		<slot></slot>
		<div class="disabledInfo">I am disabled</div>
		<div class="enabledInfo">I am enabled</div>
		<br /><br />
	</template>
	<script>
		class MyEl extends Polymer.Element {
			static get properties() {
				return {
					disabled: {
						type: Boolean,
						reflectToAttribute: true,
						value: false
					}
				};
			}
			static get is() { return 'my-el'; }
		}
		customElements.define(MyEl.is, MyEl);
	</script>
</dom-module>

</body>
</html>

See it also on codepen http://codepen.io/daKmoR/pen/pPKJxN?editors=1000

Upvotes: 1

Related Questions