Polymère - Carte papier
La carte papier est un morceau de papier de conception matérielle simple avec des données associées uniques. Pour obtenir la carte papier dans votre répertoire, vous devez utiliser la commande suivante dans l'invite de commande.
bower install --save PolymerElements/paper-cardExemple
L'exemple suivant spécifie l'utilisation de l'élément paper-card 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>
<h2>Paper-Card Example</h2>
<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-button/paper-button.html">
<link rel = "import" href = "bower_components/paper-styles/paper-styles.html">
<link rel = "import" href = "bower_components/paper-card/paper-card.html">
<link rel = "import" href = "bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/iron-icons/communication-icons.html">
<dom-module id = 'my-app'>
<template>
<style is = "custom-style">
body {
display: flex;
align-items: center;
justify-content: center;
}
paper-card {
max-width: 500px;
}
.cafe-header { @apply(--paper-font-headline); }
.cafe-light { color: var(--paper-grey-600); }
.cafe-location {
float: right;
font-size: 15px;
vertical-align: middle;
}
.cafe-reserve { color: var(--google-blue-500); }
iron-icon.star {
--iron-icon-width: 16px;
--iron-icon-height: 16px;
color: var(--paper-amber-500);
}
</style>
<paper-card >
<div class = "card-content">
<div class = "cafe-header">TutorialsPoint</div>
<div class = "cafe-rating">
<iron-icon class = "star" icon = "star"></iron-icon>
<iron-icon class = "star" icon = "star"></iron-icon>
<iron-icon class = "star" icon = "star"></iron-icon>
<iron-icon class = "star" icon = "star"></iron-icon>
<iron-icon class = "star" icon = "star"></iron-icon>
</div>
<p>Free Tutorials</p>
<p class = "cafe-light">Enjoy theory and lab at the same time, right here
online. An online Lab for IT Professionals</p>
</div>
</paper-card>
</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.
