Polymère - Bouton Icône Papier
Paper-icon-button est un bouton d'action, qui représente une action particulière telle que les paramètres. Il a un effet d'entraînement, lorsque l'utilisateur touche le bouton. Vous pouvez utiliser ces boutons comme lien ou vous pouvez donner un style aux boutons comme indiqué dans l'exemple suivant. Pour obtenir le bouton-icône-papier et les icônes-fer dans votre répertoire, en état de fonctionnement, vous devez exécuter la commande suivante dans l'invite de commande.
bower install --save PolymerElements/paper-icon-buttonExemple
Votre fichier index.html doit ressembler à ce qui suit.
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>Votre fichier my-app.html doit ressembler à ce qui suit.
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/paper-icon-button/paper-icon-button.html">
<dom-module id = 'my-app'>
<template>
<h3>Paper-Icon-Button Example </h3>
<paper-icon-button icon = "settings" ></paper-icon-button>settings
<br>
<paper-icon-button icon = "warning" style = "color: red;" ></paper-icon-button>warning
<br>
<paper-icon-button icon = "content-cut" ></paper-icon-button>content-cut
<br>
<paper-icon-button icon = "dashboard" ></paper-icon-button>dashboard
<br>
<paper-icon-button icon = "flight-takeoff" ></paper-icon-button>flight-takeoff
<br>
</template>
<script>
Polymer ({
is: 'my-app',
ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>Production
Actualisez le serveur Polymer et ce qui suit sera la sortie.
