Polymère - Badge en papier
Le badge papier est un badge de texte circulaire qui représente un statut ou une notification. Il est positionné dans le coin supérieur droit d'un élément. Il peut contenir une icône en ajoutant l'attribut icon. Pour obtenir le badge papier et les icônes de votre répertoire, vous devez utiliser les deux commandes suivantes dans l'invite de commande.
bower install --save PolymerElements/paper-badge
bower install --save PolymerElements/iron-iconsetExemple
L'exemple suivant spécifie l'utilisation de l'élément paper-badge 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.
<!doctype html>
<html>
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = 'import' href = 'bower_components/paper-badge/paper-badge.html'>
<link rel = 'import' href = 'bower_components/iron-iconset/iron-iconset.html'>
<link rel = "import" href = "bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/iron-icons/social-icons.html">
<link rel = "import" href = "bower_components/iron-icons/communication-icons.html">
<dom-module id = 'my-app'>
<template>
<div class = "container">
<span >Messages</span>
<paper-badge id = 'text' label = "4"></paper-badge>
</div>
<div class = "container" >
<span id = 'text'>Thought </span>
<paper-badge id = 'text' icon = "social:mood" label = "happy"></paper-badge>
</div>
<style is = "custom-style">
.container {
display: inline-block;
margin-left: 30px;
margin-right: 30px;
padding-top: 30px;
}
/* Need to position the badge to look like a text superscript */
.container > paper-badge {
--paper-badge-margin-left: 20px;
--paper-badge-margin-bottom: 0px;
}
#text {
padding-top: 55px;
}
</style>
</template>
<script>
Polymer ({
is: 'my-app',
ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>
</html>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.
