Polymère - Panneau de tiroir à papier

Le panneau du tiroir à papier est un panneau du tiroir qui glisse vers l'intérieur / l'extérieur pour cacher / révéler le panneau principal. La position normale du tiroir est sur le côté gauche du panneau principal. Le tiroir sera empilé sur le dessus du panneau principal dans la disposition étroite.

Pour obtenir le panneau de la cassette à papier dans votre répertoire, vous devez utiliser la commande suivante dans l'invite de commande.

bower install --save PolymerElements/paper-drawer-panel

Exemple

L'exemple suivant spécifie l'utilisation de l'élément paper-tiroir-panel 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 ajoutez-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">
<link rel = "import" href = "bower_components/paper-checkbox/paper-checkbox.html">
<link rel = "import" href = "bower_components/paper-drawer-panel/paper-drawer-panel.html">

<dom-module id = 'my-app'>
   <template>
      <style is = "custom-style">          
         paper-button {
            color: white;
            margin: 10px;
            background-color: green;
            white-space: nowrap;
         }
         button {
            display: block;
            line-height: 40px;
            background-color: transparent;
            border: none;
            font-size: 14px;
            margin: 20px;
         }
         #close { 
            color: white;
            margin: 10px;
            background-color: red;
            white-space: nowrap;
         }
      </style>
      
      <paper-drawer-panel id = "paperDrawerPanel" force-narrow>
         <div drawer>
            <button id = "close" tabindex = "0" paper-drawer-toggle raised>Close Drawer</button>
            <h3>Welcome to Tutorials point</h3>
         </div>
         
         <div main>
            <div>
               <paper-button paper-drawer-toggle raised>Open Drawer</paper-button>
            </div>
         </div>
      </paper-drawer-panel>
   </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 serve

Ouvrez maintenant le navigateur et accédez à http://127.0.0.1:8081/. Voici la sortie.

Lorsque vous cliquez sur le bouton Ouvrir le tiroir, voici la sortie.

↰ Previous page

Polymère - Panneau de tiroir à papier

Exemple

Production

Tutoriel Polymer