<html>
<head>
<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-progress/paper-progress.html"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<my-example></my-example>
<dom-module id="my-example">
<style>
paper-progress {
display: block;
width: 90%;
margin: 0 0 20px 0;
}
paper-progress.green {
--paper-progress-active-color: var(--paper-light-green-500);
--paper-progress-secondary-color: var(--paper-light-green-100);
}
paper-progress.red {
--paper-progress-active-color: var(--paper-red-500);
--paper-progress-secondary-color: var(--paper-red-100);
}
paper-progress.orange {
--paper-progress-active-color: var(--paper-orange-500);
--paper-progress-secondary-color: var(--paper-orange-100);
}
</style>
<template>
<span>With the binding class</span>
<paper-progress value="{{dificulty}}" max="10" class$="{{_selectClass(dificulty)}}"></paper-progress>
_selectClass return: <span>{{_selectClass(dificulty)}}</span></br></br>
<span>WithOut the $</span>
<paper-progress value="{{dificulty}}" max="10" class="{{_selectClass(dificulty)}}"></paper-progress>
<span>WithOut the binding and '$'</span>
<paper-progress value="{{dificulty}}" max="10" class="orange"></paper-progress>
</template>
</dom-module>
<script>
Polymer({
is: 'my-example',
properties: {
dificulty: {
type: String,
value: 5
}
},
_selectClass: function(dificulty) {
if(0<= dificulty && dificulty<=4){
return 'green';
} else if (4< dificulty && dificulty<=7) {
return 'orange';
} else if (7< dificulty && dificulty<=10) {
return 'red';
}
}
});
</script>
</body>
</html>
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |