Polymer - Iron Dropdown

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

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

Example

To implement iron-dropdown element, navigate to your project folder in the command prompt and use the following command.

bower install PolymerElements/iron-dropdown --save

The following example demonstrates the use of iron-dropdown element −

<!DOCTYPE html>
<html>
   <head>
      <title>iron-dropdown</title>
      <base href = "http://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>

As shown in the example, the class named .dropdown-content will be hidden till you call an open method on an element.

Output

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

polymer serve

Now open the browser and navigate to http://127.0.0.1:8081/. When you click the Click me button, a dropdown will be displayed.

Iron Dropdown
polymer_elements.htm
Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements