Polymère - Bouton à bascule papier
Le bouton à bascule papier est un interrupteur ON / OFF à l'aide duquel l'utilisateur peut basculer l'état en cliquant ou en faisant glisser l'interrupteur. 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-toggle-buttonExemple
L'exemple suivant spécifie l'utilisation de l'élément de bouton à bascule papier 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 incluez-y le code suivant.
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-tabs/paper-tabs.html">
<link rel = "import" href = "bower_components/iron-pages/iron-pages.html">
<dom-module id = 'my-app'>
<template>
<style>
paper-tabs {
background-color: black;
width: 50%;
margin-bottom: 1px;
color: #fff;
}
</style>
<h3>Paper-Tabs Example</h3>
<paper-tabs selected = "0">
<paper-tab>Tab One</paper-tab>
<paper-tab>Tab Two</paper-tab>
</paper-tabs>
</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 serveOuvrez maintenant le navigateur et accédez à http://127.0.0.1:8081/. Voici la sortie.
