Polymère - Curseur en papier
Paper-slider permet à l'utilisateur de sélectionner une valeur dans la plage donnée, en déplaçant le point du curseur et représente l'altération du volume ou de la saturation des couleurs dans une application particulière.
Vous pouvez utiliser cet élément dans votre application, en exécutant la commande suivante pour l'installer dans votre répertoire de projet.
bower install --save PolymerElements/paper-sliderExemple
L'exemple suivant spécifie l'utilisation de l'élément paper-slider dans Polymer.js. Créez un fichier index.html et ajoutez-y le code suivant.
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>Maintenant, ouvrez le fichier my-app.html et ajoutez-y le code suivant.
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-slider/paper-slider.html">
<dom-module id = 'my-app'>
<template>
<style>
paper-slider.green {
--paper-slider-knob-color: var(--paper-green-500);
--paper-slider-active-color: var(--paper-green-500);
}
</style>
<h3>Paper-Slider Example</h3>
<div>Volume</div>
<paper-slider class = "green" max = "50" editable></paper-slider>
<div>Brightness</div>
<paper-slider class = "green" max = "50" editable></paper-slider>
<div>Color (Disabled)</div>
<paper-slider class = "green" Disabled value = "11" max = "50" editable></paper-slider>
</template>
<script>
Polymer ({
is: 'my-app', ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>Production
Pour exécuter l'application, accédez au répertoire de projet créé et exécutez la commande suivante.
polymer serveMaintenant, ouvrez le navigateur http://127.0.0.1:8081/. Voici la sortie.
