Polymer Iron Dropdown

by Online Tutorials Library July 14, 2022

Polymer Iron Dropdown

The <iron-dropdown> element is used to reveal the hidden dropdown content. The implementation of elements that uses iron-dropdown can have comboboxes, menubuttons, selects, etc.

The <iron-dropdown> element displays the attributes where the .dropdown-trigger configured relative to the position of .dropdown-content.

Example

Open command prompt and go to your project folder to implement iron-dropdown element by using the following command:

iron dropdown 1 iron dropdown 2

  <!DOCTYPE html>  <html>     <head>        <title>iron-dropdown</title>        <base href=”https:://polygit.org/components/”>        <script src = “webcomponentsjs/webcomponents-lite.min.js”></script>        <link rel = “import” href=”../iron-dropdown/demo/x-select.html”>        <link rel = “import” href=”../paper-input/paper-input.html”>        <link rel = “import” href=”../paper-button/paper-button.html”>            <style>           .dropdown-trigger{              background-color: DarkCyan ;              border-radius: 4px;              color: white;           }           .dropdown-content {              background-color: white;              line-height: 15px;              border-radius: 5px;              box-shadow: 0px 2px 5px #ccc;              padding: 20px;           }        </style>     </head>         <body>        <h3>Iron-dropdown Example</h3>        <x-select>           <paper-button class = “dropdown-trigger”>Click Me !</paper-button>           <div class = “dropdown-content”>              <p>Hello !!! <br/>              <p>This is an iron-dropdown <br/> example of Polymerjs.</p>           </div>        </x-select>     </body>  </html>  

Output:

iron dropdown 3

Polmer version 2.2.3 is broken for this element. You can use it on upgraded version 2.2.4

Next TopicIron Flex Layout

Polymer Iron Dropdown

Polymer Iron Dropdown

Example

Adjust the volume of media using JavaScript in PhoneGap

Variables in Postman

You may also like