WebCompDev / COMPONENTS

Blame view

bower_components/paper-dropdown-menu/demo/index.html 5.99 KB
Edit Raw Normal View History
73bcce88   luigser   COMPONENTS 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
  <!doctype html>
  <!--
  @license
  Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  Code distributed by Google as part of the polymer project is also
  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  -->
  <html>
  <head>
  
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  
    <title>paper-dropdown-menu demo</title>
  
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  
    <link rel="import" href="../../iron-icons/iron-icons.html">
    <link rel="import" href="../../iron-icon/iron-icon.html">
a1a3bc73   Luigi Serra   graphs updates 
24
 
    <link rel="import" href="../../paper-listbox/paper-listbox.html">
73bcce88   luigser   COMPONENTS 
25
26
27
28
29
30
31
 
    <link rel="import" href="../../paper-item/paper-item.html">
    <link rel="import" href="../../paper-button/paper-button.html">
    <link rel="import" href="../../paper-styles/demo-pages.html">
    <link rel="import" href="../../paper-tabs/paper-tabs.html">
  
    <link rel="import" href="../paper-dropdown-menu.html">
a1a3bc73   Luigi Serra   graphs updates 
32
 
    <style is="custom-style">
73bcce88   luigser   COMPONENTS 
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
      paper-dropdown-menu {
        text-align: left;
        margin: auto;
        width: 180px;
      }
  
      paper-dropdown-menu.letters {
        width: 90px;
      }
  
      paper-tabs {
        width: 400px;
      }
  
      .horizontal-section {
        text-align: center;
      }
a1a3bc73   Luigi Serra   graphs updates 
50
51
52
53
54
55
 
  
      .nounderline {
        --paper-input-container-underline: {
          display: none;
        };
      }
73bcce88   luigser   COMPONENTS 
56
57
58
59
60
61
62
63
64
65
66
67
 
    </style>
  
  </head>
  <body>
  
    <template id="Demo" is="dom-bind">
  
      <div class="horizontal-section-container">
        <div>
          <h4>Basic Menu</h4>
          <div class="horizontal-section">
            <paper-dropdown-menu label="Dinosaurs">
a1a3bc73   Luigi Serra   graphs updates 
68
 
              <paper-listbox class="dropdown-content">
73bcce88   luigser   COMPONENTS 
69
70
71
 
                <template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
                  <paper-item>[[dinosaur]]</paper-item>
                </template>
a1a3bc73   Luigi Serra   graphs updates 
72
 
              </paper-listbox>
73bcce88   luigser   COMPONENTS 
73
74
75
76
77
78
79
80
81
82
 
            </paper-dropdown-menu>
          </div>
        </div>
      </div>
  
      <div class="horizontal-section-container">
        <div>
          <h4>Pre-selected Value</h4>
          <div class="horizontal-section">
            <paper-dropdown-menu label="Dinosaurs">
a1a3bc73   Luigi Serra   graphs updates 
83
 
              <paper-listbox class="dropdown-content" selected="1">
73bcce88   luigser   COMPONENTS 
84
85
86
 
                <template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
                  <paper-item>[[dinosaur]]</paper-item>
                </template>
a1a3bc73   Luigi Serra   graphs updates 
87
 
              </paper-listbox>
73bcce88   luigser   COMPONENTS 
88
89
90
91
92
93
94
95
96
97
 
            </paper-dropdown-menu>
          </div>
        </div>
      </div>
  
      <div class="horizontal-section-container">
        <div>
          <h4>Disabled</h4>
          <div class="horizontal-section">
            <paper-dropdown-menu disabled label="Disabled">
a1a3bc73   Luigi Serra   graphs updates 
98
 
              <paper-listbox class="dropdown-content">
73bcce88   luigser   COMPONENTS 
99
100
101
 
                <template is="dom-repeat" items="[[letters]]" as="letter">
                  <paper-item>[[letter]]</paper-item>
                </template>
a1a3bc73   Luigi Serra   graphs updates 
102
 
              </paper-listbox>
73bcce88   luigser   COMPONENTS 
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
            </paper-dropdown-menu>
          </div>
        </div>
      </div>
  
      <div class="horizontal-section-container">
        <div>
          <h4>Alternative Content</h4>
          <div class="horizontal-section">
            <paper-dropdown-menu label="Menu tabs!?">
              <paper-tabs class="dropdown-content">
                <template is="dom-repeat" items="[[letters]]" as="letter">
                  <paper-tab>[[letter]]</paper-tab>
                </template>
              </paper-tabs>
            </paper-dropdown-menu>
          </div>
        </div>
      </div>
  
      <div class="horizontal-section-container">
        <div>
a1a3bc73   Luigi Serra   graphs updates 
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
          <h4>No underline (menu from bottom)</h4>
          <div class="horizontal-section">
            <paper-dropdown-menu class="nounderline" label="Letters" vertical-align="bottom">
              <paper-listbox class="dropdown-content">
                <template is="dom-repeat" items="[[letters]]" as="letter">
                  <paper-item>[[letter]]</paper-item>
                </template>
              </paper-listbox>
            </paper-dropdown-menu>
          </div>
        </div>
      </div>
  
      <div class="horizontal-section-container">
        <div>
73bcce88   luigser   COMPONENTS 
140
141
142
 
          <h4>No Label Float</h4>
          <div class="horizontal-section">
            <paper-dropdown-menu class="letters" label="Letters" no-label-float>
a1a3bc73   Luigi Serra   graphs updates 
143
 
              <paper-listbox class="dropdown-content">
73bcce88   luigser   COMPONENTS 
144
145
146
 
                <template is="dom-repeat" items="[[letters]]" as="letter">
                  <paper-item>[[letter]]</paper-item>
                </template>
a1a3bc73   Luigi Serra   graphs updates 
147
 
              </paper-listbox>
73bcce88   luigser   COMPONENTS 
148
149
150
151
152
153
154
155
156
157
 
            </paper-dropdown-menu>
          </div>
        </div>
      </div>
  
      <div class="horizontal-section-container">
        <div>
          <h4>No Ripple, No Animations</h4>
          <div class="horizontal-section">
            <paper-dropdown-menu label="Dinosaurs" noink no-animations>
a1a3bc73   Luigi Serra   graphs updates 
158
 
              <paper-listbox class="dropdown-content">
73bcce88   luigser   COMPONENTS 
159
160
161
 
                <template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
                  <paper-item>[[dinosaur]]</paper-item>
                </template>
a1a3bc73   Luigi Serra   graphs updates 
162
 
              </paper-listbox>
73bcce88   luigser   COMPONENTS 
163
164
165
166
 
            </paper-dropdown-menu>
          </div>
        </div>
      </div>
a1a3bc73   Luigi Serra   graphs updates 
167
73bcce88   luigser   COMPONENTS 
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
 
    </template>
  
    <script>
      Demo.letters = [
        'alpha',
        'beta',
        'gamma',
        'delta',
        'epsilon'
      ];
      Demo.dinosaurs = [
        'allosaurus',
        'brontosaurus',
        'carcharodontosaurus',
        'diplodocus',
        'ekrixinatosaurus',
        'fukuiraptor',
        'gallimimus',
        'hadrosaurus',
        'iguanodon',
        'jainosaurus',
        'kritosaurus',
        'liaoceratops',
        'megalosaurus',
        'nemegtosaurus',
        'ornithomimus',
        'protoceratops',
        'quetecsaurus',
        'rajasaurus',
        'stegosaurus',
        'triceratops',
        'utahraptor',
        'vulcanodon',
        'wannanosaurus',
        'xenoceratops',
        'yandusaurus',
        'zephyrosaurus'
      ];
    </script>
  
  </body>
  </html>