third_party/polymer/v1_0/components-chromium/iron-dropdown/iron-dropdown.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
  11 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
  12 <link rel="import" href="../iron-behaviors/iron-control-state.html">
  13 <link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html">
  14 <link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
  15 <link rel="import" href="../neon-animation/animations/opaque-animation.html">
  16 <link rel="import" href="iron-dropdown-scroll-manager.html">
  17
  18 <!--
  19 `<iron-dropdown>` is a generalized element that is useful when you have
  20 hidden content (`.dropdown-content`) that is revealed due to some change in
  21 state that should cause it to do so.
  22
  23 Note that this is a low-level element intended to be used as part of other
  24 composite elements that cause dropdowns to be revealed.
  25
  26 Examples of elements that might be implemented using an `iron-dropdown`
  27 include comboboxes, menubuttons, selects. The list goes on.
  28
  29 The `<iron-dropdown>` element exposes attributes that allow the position
  30 of the `.dropdown-content` relative to the `.dropdown-trigger` to be
  31 configured.
  32
  33     <iron-dropdown horizontal-align="right" vertical-align="top">
  34       <div class="dropdown-content">Hello!</div>
  35     </iron-dropdown>
  36
  37 In the above example, the `<div>` with class `.dropdown-content` will be
  38 hidden until the dropdown element has `opened` set to true, or when the `open`
  39 method is called on the element.
  40
  41 @demo demo/index.html
  42 -->
  43
  44 </head><body><dom-module id="iron-dropdown">
  45   <style>
  46     :host {
  47       position: fixed;
  48     }
  49
  50     #contentWrapper ::content > * {
  51       overflow: auto;
  52     }
  53
  54     #contentWrapper.animating ::content > * {
  55       overflow: hidden;
  56     }
  57   </style>
  58   <template>
  59     <div id="contentWrapper">
  60       <content id="content" select=".dropdown-content"></content>
  61     </div>
  62   </template>
  63
  64   </dom-module>
  65
  66 <script src="iron-dropdown-extracted.js"></script></body></html>