Polymer Paper Drawer Panel

by Online Tutorials Library July 14, 2022

Polymer-Paper Drawer Panel

The Polymer paper-drawer panel is a drawer panel which is used to slide in/out to hide/reveal the main panel. By default its position is the left side of the main panel. The drawer will be stacked on top of the main panel in the narrow layout.

Open your command prompt and use the following command to get the paper-drawer panel in your directory.

Example

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

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

Next TopicDropdown Menu

Polymer Paper Drawer Panel

Polymer-Paper Drawer Panel

Example

Apache Pig UNION Operator

PostgreSQL BIGINT

You may also like