SGH / COMPONENTS

Blame view

bower_components/paper-menu/demo/index.html 3.65 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
 
  <!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, user-scalable=yes">
  
    <title>paper-menu demo</title>
  
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  
    <link rel="import" href="../../paper-item/paper-item.html">
e619a3b0   Luigi Serra   Controllet cross ... 
23
 
    <link rel="import" href="../../iron-collapse/iron-collapse.html">
73bcce88   luigser   COMPONENTS 
24
 
    <link rel="import" href="../paper-menu.html">
e619a3b0   Luigi Serra   Controllet cross ... 
25
 
    <link rel="import" href="../paper-submenu.html">
73bcce88   luigser   COMPONENTS 
26
27
 
    <link rel="import" href="../../paper-styles/demo-pages.html">
e619a3b0   Luigi Serra   Controllet cross ... 
28
 
    <style is="custom-style">
73bcce88   luigser   COMPONENTS 
29
30
31
32
33
34
35
36
37
38
39
40
 
      .horizontal-section {
        padding: 0 !important;
      }
  
      .avatar {
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        background: #ccc;
      }
e619a3b0   Luigi Serra   Controllet cross ... 
41
42
43
44
45
46
47
48
49
50
51
52
 
  
      paper-item {
        --paper-item: {
          cursor: pointer;
        };
      }
  
      .sublist {
        padding-left: 20px;
        padding-right: 20px;
  
      }
73bcce88   luigser   COMPONENTS 
53
54
55
56
57
58
59
 
    </style>
  </head>
  <body unresolved>
    <div class="horizontal-section-container">
      <div>
        <h4>Standard</h4>
        <div class="horizontal-section">
e619a3b0   Luigi Serra   Controllet cross ... 
60
 
          <paper-menu>
73bcce88   luigser   COMPONENTS 
61
62
63
64
65
66
67
68
69
70
71
 
            <paper-item>Inbox</paper-item>
            <paper-item>Starred</paper-item>
            <paper-item>Sent mail</paper-item>
            <paper-item>Drafts</paper-item>
          </paper-menu>
        </div>
      </div>
  
      <div>
        <h4>Pre-selected</h4>
        <div class="horizontal-section">
e619a3b0   Luigi Serra   Controllet cross ... 
72
 
          <paper-menu selected="0">
73bcce88   luigser   COMPONENTS 
73
74
75
76
77
78
79
80
81
82
83
 
            <paper-item>Inbox</paper-item>
            <paper-item disabled>Starred</paper-item>
            <paper-item>Sent mail</paper-item>
            <paper-item>Drafts</paper-item>
          </paper-menu>
        </div>
      </div>
  
      <div>
        <h4>Multi-select</h4>
        <div class="horizontal-section">
e619a3b0   Luigi Serra   Controllet cross ... 
84
 
          <paper-menu multi>
73bcce88   luigser   COMPONENTS 
85
86
87
88
89
90
91
 
            <paper-item>Bold</paper-item>
            <paper-item>Italic</paper-item>
            <paper-item>Underline</paper-item>
            <paper-item>Strikethrough</paper-item>
          </paper-menu>
        </div>
      </div>
e619a3b0   Luigi Serra   Controllet cross ... 
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
  
      <div>
        <h4>Sub-menu</h4>
        <div class="horizontal-section">
          <paper-menu>
            <paper-submenu>
              <paper-item class="menu-trigger">Topics</paper-item>
              <paper-menu class="menu-content sublist">
                <paper-item>Topic 1</paper-item>
                <paper-item>Topic 2</paper-item>
                <paper-item>Topic 3</paper-item>
              </paper-menu>
            </paper-submenu>
            <paper-submenu>
              <paper-item class="menu-trigger">Faves</paper-item>
              <paper-menu class="menu-content sublist" multi>
                <paper-item>Fave 1</paper-item>
                <paper-item>Fave 2</paper-item>
              </paper-menu>
            </paper-submenu>
            <paper-submenu disabled>
              <paper-item class="menu-trigger">Unavailable</paper-item>
              <paper-menu class="menu-content sublist" multi>
                <paper-item>Unavailable 1</paper-item>
                <paper-item>Unavailable 2</paper-item>
              </paper-menu>
            </paper-submenu>
          </paper-menu>
        </div>
      </div>
73bcce88   luigser   COMPONENTS 
122
123
124
 
    </div>
  </body>
  </html>