Polimero - Badge in carta
Il badge cartaceo è un badge di testo circolare che rappresenta uno stato o una notifica. È posizionato nell'angolo superiore destro di un elemento. Può contenere un'icona aggiungendo l'attributo icon. Per ottenere il badge cartaceo e le icone nella directory, è necessario utilizzare i seguenti due comandi nel prompt dei comandi.
bower install --save PolymerElements/paper-badge
bower install --save PolymerElements/iron-iconsetEsempio
L'esempio seguente specifica l'uso dell'elemento paper-badge in Polymer.js. Crea un file index.html e aggiungi il seguente codice al suo interno.
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>Ora apri il file my-app.html e includi il codice seguente.
<!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>Produzione
Per eseguire l'applicazione, accedere alla directory del progetto creato ed eseguire il comando seguente.
polymer serveOra apri il browser e vai a http://127.0.0.1:8081/. Di seguito sarà l'output.
