Polymer - Paper Drawer Panel

The paper-drawer-panel is a drawer panel that slides in/out to hide/reveal the main panel. The normal position of the drawer is on the left side of the main panel. The drawer will be stacked on top of the main panel in the narrow layout.

To get the paper-drawer-panel in your directory, you should use the following command in the command prompt.

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

Example

The following example specifies the use of paper-drawer-panel element in Polymer.js. Create an index.html file and add the following code in it.

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

Now, open the my-app.html file and include the following code in it.

<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>

Output

To run the application, navigate to the created project directory and run the following command.

polymer serve

Now open the browser and navigate to http://127.0.0.1:8081/. Following will be the output.

When you click the Open Drawer button, following will be the output.

polymer_elements.htm

Print Page