Skip to content

Instantly share code, notes, and snippets.

@JanMiksovsky

JanMiksovsky/index.html

Created May 16, 2014 21:22
Show Gist options
  • Save JanMiksovsky/204ab7fe217d9f9b54bf to your computer and use it in GitHub Desktop.
Save JanMiksovsky/204ab7fe217d9f9b54bf to your computer and use it in GitHub Desktop.
Download ZIP
Web components example: text-input-with-button
Raw
index.html
<html>
<head>
<meta charset="utf-8">
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="text-input-with-button.html">
<script>
document.addEventListener( "go", function( event ) {
alert( event.detail );
});
</script>
<style>
text-input-with-button::shadow * {
border-radius: 5px;
}
</style>
</head>
<body>
<text-input-with-button value="Hello"></text-input-with-button>
</body>
</html>
Raw
text-input-with-button.html
<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="text-input-with-button" attributes="value">
<template>
<style>
* {
border: 1px solid gray;
margin: 0;
}
input {
padding: 2px;
}
button {
padding: 2px 6px;
}
</style>
<input type="text" value="{{value}}">
<button id="goButton" on-click="{{goClick}}">Go</button>
</template>
<script>
Polymer( "text-input-with-button", {
goClick: function() {
this.dispatchEvent( new CustomEvent( "go", {
bubbles: true,
detail: this.value
}));
},
valueChanged: function() {
this.$.goButton.disabled = ( this.value.length === 0 );
}
});
</script>
</polymer-element>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment