Polymère - Onglets en papier
Les onglets papier permettent de naviguer entre les différentes vues ou pages. Vous pouvez utiliser cet élément dans votre application, en exécutant la commande suivante pour l'installer dans votre répertoire de projet.
bower install --save PolymerElements/paper-tabsExemple
L'exemple suivant spécifie l'utilisation de l'élément paper-tabs 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-tabs/paper-tabs.html">
<link rel = "import" href = "bower_components/iron-pages/iron-pages.html">
<dom-module id = 'my-app'>
<template>
<style>
paper-tabs {
background-color: black;
width: 50%;
margin-bottom: 1px;
color: #fff;
}
</style>
<h3>Paper-Tabs Example</h3>
<paper-tabs selected = "0">
<paper-tab>Tab One</paper-tab>
<paper-tab>Tab Two</paper-tab>
</paper-tabs>
</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.
