third_party/polymer/components-chromium/core-dropdown/core-dropdown.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <!--
  11
  12 `core-dropdown` is a control where the user can choose from an array of options in a drop-down
  13 menu. The currently selected option is displayed in the control.
  14
  15 Example:
  16
  17     <core-dropdown selected="Financier" valueattr="label">
  18         <core-item label="Croissant"></core-item>
  19         <core-item label="Donut"></core-item>
  20         <core-item label="Financier"></core-item>
  21         <core-item label="Madeleine"></core-item>
  22     </core-dropdown>
  23
  24 This example renders a drop-down menu with 4 options, with the option `Financier` pre-selected.
  25
  26 Theming
  27 -------
  28
  29 Style the drop-down menu with the `core-dropdown::shadow #menu` selector.
  30
  31 Example:
  32
  33     core-dropdown::shadow #menu {
  34         background-color: #eee;
  35         border: 1px solid #ccc;
  36     }
  37
  38 @group Polymer Core Elements
  39 @element core-dropdown
  40 @status beta
  41 @homepage github.io
  42 -->
  43
  44 <!--
  45 Fired when an item's selection state is changed. This event is fired both
  46 when an item is selected or deselected. The `isSelected` detail property
  47 contains the selection state.
  48
  49 @event core-select
  50 @param {Object} detail
  51   @param {boolean} detail.isSelected true for selection and false for deselection
  52   @param {Object} detail.item the item element
  53 -->
  54 <link href="../polymer/polymer.html" rel="import">
  55 <link href="../core-icon/core-icon.html" rel="import">
  56 <link href="../core-icons/core-icons.html" rel="import">
  57 <link href="../core-item/core-item.html" rel="import">
  58 <link href="../core-menu/core-menu.html" rel="import">
  59 <link href="../core-overlay/core-overlay.html" rel="import">
  60
  61 <polymer-element name="core-dropdown" assetpath="">
  62 <template>
  63
  64   <link href="core-dropdown.css" rel="stylesheet">
  65
  66   <div id="control" layout="" horizontal="" center="" on-tap="{{toggle}}">
  67     <core-item flex="" src="{{selectedItem.src}}" icon="{{selectedItem.icon}}" label="{{selectedItem ? selectedItem.label : label}}"></core-item>
  68     <core-icon id="arrow" icon="{{opened ? &apos;arrow-drop-up&apos; : &apos;arrow-drop-down&apos;}}"></core-icon>
  69   </div>
  70
  71   <core-overlay target="{{$.menu}}" opened="{{opened}}" on-core-overlay-open="{{openAction}}"></core-overlay>
  72
  73   <core-menu id="menu" selected="{{selected}}" selecteditem="{{selectedItem}}" selectedclass="{{selectedClass}}" valueattr="{{valueattr}}" selectedproperty="{{selectedProperty}}" selectedattribute="{{selectedAttribute}}" on-core-select="{{selectAction}}">
  74     <content select="*"></content>
  75   </core-menu>
  76
  77 </template>
  78
  79 </polymer-element><script src="core-dropdown-extracted.js"></script>