Polymère - Menu déroulant Papier
Le menu déroulant papier est un menu déroulant simple, qui fonctionne avec un contenu sélectionnable. Vous pouvez utiliser cet élément dans votre application, en exécutant les commandes suivantes pour les installer dans votre répertoire de projet.
bower install --save PolymerElements/paper-dropdown-menu
bower install --save PolymerElements/paper-item
bower install --save PolymerElements/paper-listboxExemple
L'exemple suivant spécifie l'utilisation de l'élément paper-dropdown-menu 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 incluez-y le code suivant.
<link rel = 'import' href='bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel = "import" href = "bower_components/paper-item/paper-item.html">
<link rel = "import" href = "bower_components/paper-listbox/paper-listbox.html">
<dom-module id = 'my-app'>
<template>
<style is = "custom-style">
paper-dropdown-menu {
width:250px;
}
paper-dropdown-menu {
height: 200px;
display: block;
}
</style>
<h3>Paper-Dropdown-Menu Example </h3>
<paper-dropdown-menu>
<paper-listbox class = "dropdown-content" selected = "1">
<paper-item>Java Tutorial</paper-item>
<paper-item>C Tutorial</paper-item>
<paper-item>PHP Tutorial</paper-item>
<paper-item>C++ Tutorial</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</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.
