Polymer - Iron Dropdown

上一个
下一个

<iron-dropdown> 元素用于显示隐藏的 dropdown 内容 - .dropdown-content。使用 iron-dropdown 的元素实现可能包括组合框、菜单按钮、选择等。

<iron-dropdown> 元素显示属性，其中 .dropdown-trigger 相对于 .dropdown-content 的位置进行了配置。

示例

要实现 iron-dropdown 元素，请在命令提示符中导航到您的项目文件夹并使用以下命令。

bower install PolymerElements/iron-dropdown --save

以下示例演示了 iron-dropdown 元素的使用 −

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

如示例所示，名为 .dropdown-content 的类将隐藏，直到您在元素上调用 open 方法。

输出

要运行应用程序，请导航到您的项目目录并运行以下命令。

polymer serve

现在打开浏览器并导航到 http://127.0.0.1:8081/。点击 点击我 按钮，将显示一个下拉菜单。

Iron Dropdown
polymer_elements.htm
打印页面
上一个
下一个
Advertisement