ポリマー-鉄のドロップダウン

<iron-dropdown>要素は、非表示のドロップダウンコンテンツ- .dropdown-content を表示するために使用されます。鉄ドロップダウンを使用する要素の実装には、コンボボックス、メニューボタン、選択などが含まれます。

<iron-dropdown>要素には、*。dropdown-trigger *が.dropdown-contentの位置に関連して設定されている属性が表示されます。

例

iron-dropdown要素を実装するには、コマンドプロンプトでプロジェクトフォルダーに移動し、次のコマンドを使用します。

bower install PolymerElements/iron-dropdown --save

次の例は、鉄ドロップダウン要素の使用を示しています-

<!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-selectl">
      <link rel = "import" href = "paper-input/paper-inputl">
      <link rel = "import" href = "paper-button/paper-buttonl">

      <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/に移動します。 Click me ボタンをクリックすると、ドロップダウンが表示されます。

鉄のドロップダウン

Polymer-iron-dropdown

ポリマー-鉄のドロップダウン

例

出力