Polymère - Menu papier
Paper-menu est un menu simple prêt à l'emploi doté d'un style Material Design. L'élément sélectionné contient du texte en gras. Cet élément dispose de plusieurs options de sélection et de raccourcis clavier pour naviguer dans la zone de liste. Pour obtenir le menu papier 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-menuExemple
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/paper-listbox/paper-listbox.html">
<link rel = "import" href = "bower_components/paper-menu/paper-menu.html">
<dom-module id = 'my-app'>
<template>
<style>
.horizontal-section {
padding: 15px;
}
#paperitem {
cursor: pointer;
display: inline;
background: #ccc;
}
</style>
<h3>Paper-Menu Example </h3>
<div class = "horizontal-section">
<paper-menu>
<paper-item id = "paperitem">Home</paper-item>
<paper-item id = "paperitem">About-Us</paper-item>
<paper-item id = "paperitem">Contacts</paper-item>
<paper-item id = "paperitem">Log-In</paper-item>
</paper-menu>
</div>
</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.
