• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6Code distributed by Google as part of the polymer project is also
7subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
8-->
9
10<!--
11
12`paper-dropdown-menu` works together with `paper-dropdown` and `core-menu` to
13implement a drop-down menu. The currently selected item is displayed in the
14control. If no item is selected, the `label` is displayed instead.
15
16The child element with the class `dropdown` will be used as the drop-down
17menu. It should be a `paper-dropdown` or other overlay element. You should
18also provide a `core-selector` or other selector element, such as `core-menu`,
19in the drop-down. You should apply the class `menu` to the selector element.
20
21Example:
22
23    <paper-dropdown-menu label="Your favorite pastry">
24        <paper-dropdown class="dropdown">
25            <core-menu class="menu">
26                <paper-item>Croissant</paper-item>
27                <paper-item>Donut</paper-item>
28                <paper-item>Financier</paper-item>
29                <paper-item>Madeleine</paper-item>
30            </core-menu>
31        </paper-dropdown>
32    </paper-dropdown-menu>
33
34This example renders a drop-down menu with 4 options.
35
36@group Paper Elements
37@element paper-dropdown-menu
38@extends core-dropdown-base
39@mixins Polymer.CoreFocusable https://github.com/polymer/core-focusable
40@status unstable
41@homepage github.io
42-->
43
44<!--
45Fired when an item's selection state is changed. This event is fired both
46when an item is selected or deselected. The `isSelected` detail property
47contains 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
56<link href="../core-a11y-keys/core-a11y-keys.html" rel="import">
57<link href="../core-dropdown/core-dropdown-base.html" rel="import">
58<link href="../core-focusable/core-focusable.html" rel="import">
59<link href="../core-icon/core-icon.html" rel="import">
60<link href="../core-icons/core-icons.html" rel="import">
61<link href="../paper-shadow/paper-shadow.html" rel="import">
62
63<style shim-shadowdom>
64  html /deep/ #paper-dropdown-menu-dropdown {
65    margin: 12px;
66    overflow: visible;
67  }
68
69  html /deep/ #paper-dropdown-menu-dropdown #menu {
70    padding: 8px 0;
71    margin: 0;
72  }
73
74  html /deep/ #paper-dropdown-menu-dropdown .menu-container {
75    overflow: auto;
76    max-height: 100%;
77    max-width: 100%;
78  }
79</style>
80
81<polymer-element name="paper-dropdown-menu" extends="core-dropdown-base" relative layout inline horizontal center tabindex="0">
82<template>
83
84  <style>
85    :host {
86      -moz-user-select: none;
87      -ms-user-select: none;
88      -webkit-user-select: none;
89      user-select: none;
90      cursor: pointer;
91      padding: 0.5em 0 0.25em;
92      margin: 0.75em 0;
93      border-bottom: 1px solid #757575;
94      outline: none;
95    }
96
97    #label:not(.selectedItem), #arrow {
98      color: #757575;
99    }
100
101    #label {
102      overflow: hidden;
103      white-space: nowrap;
104      text-overflow: ellipsis;
105    }
106  </style>
107
108  <core-a11y-keys target="{{}}" keys="enter space" on-keys-pressed="{{toggleOverlay}}"></core-a11y-keys>
109
110  <div flex auto id="label">{{selectedItemLabel || label}}</div>
111  <core-icon id="arrow" icon="{{opened ? openedIcon : closedIcon}}"></core-icon>
112
113  <content></content>
114
115</template>
116<script>
117
118(function() {
119
120  var p = {
121
122    publish: {
123
124      /**
125       * A label for the control. The label is displayed if no item is selected.
126       *
127       * @attribute label
128       * @type string
129       * @default 'Select an item'
130       */
131      label: 'Select an item',
132
133      /**
134       * The icon to display when the drop-down is opened.
135       *
136       * @attribute openedIcon
137       * @type string
138       * @default 'arrow-drop-up'
139       */
140      openedIcon: 'arrow-drop-up',
141
142      /**
143       * The icon to display when the drop-down is closed.
144       *
145       * @attribute closedIcon
146       * @type string
147       * @default 'arrow-drop-down'
148       */
149      closedIcon: 'arrow-drop-down'
150
151    },
152
153    selectedItemLabel: '',
154
155    overlayListeners: {
156      'core-overlay-open': 'openAction',
157      'core-activate': 'activateAction',
158      'core-select': 'selectAction'
159    },
160
161    activateAction: function(e) {
162      this.opened = false;
163    },
164
165    selectAction: function(e) {
166      var detail = e.detail;
167      if (detail.isSelected) {
168        this.$.label.classList.add('selectedItem');
169        this.selectedItemLabel = detail.item.label || detail.item.textContent;
170      } else {
171        this.$.label.classList.remove('selectedItem');
172        this.selectedItemLabel = '';
173      }
174    }
175
176  };
177
178  Polymer.mixin2(p, Polymer.CoreFocusable);
179  Polymer(p);
180
181})();
182
183</script>
184</polymer-element>
185