Gitiles
Code Review Sign In
gerrit.avm99963.com / hores-external / eaee4a95516e8333a1f67e6ccf0d6f78af801c8c / . / node_modules / material-design-lite / dist / components / menu / demo.html
blob: ff3ec9e1269c1e92a702b9e750abce576e2b7bd0 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +0100[diff] [blame]1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <title>menu test</title>
9
10 <!-- Fonts -->
11 <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
12 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
13 rel="stylesheet">
14
15 <!-- Page styles -->
16 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
17 <link rel="stylesheet" href="../../material.min.css">
18 <link rel="stylesheet" href="../../components/demos.css">
19 <script src="../../material.min.js"></script>
20
21
22 <style>
23
24 </style>
25
26 </head>
27 <body>
28
29 <div style="padding-top: 24px;">
30
31
32<style>
33 .demo-menu.demo-menu__lower-left .container {
34 position: relative;
35 width: 200px;
36 }
37 .demo-menu.demo-menu__lower-left .background {
38 background: white;
39 height: 148px;
40 width: 100%;
41 }
42 .demo-menu.demo-menu__lower-left .bar {
43 box-sizing: border-box;
44 background: #3F51B5;
45 color: white;
46 width: 100%;
47 padding: 16px;
48 }
49</style>
50
51<div class="container mdl-shadow--2dp">
52 <div class="bar">
53 {% include "lower-left.html" %}
54 </div>
55 <div class="background"></div>
56</div>
57
58<!-- Left aligned menu below button -->
59<button id="demo-menu-lower-left"
60 class="mdl-button mdl-js-button mdl-button--icon">
61 <i class="material-icons">more_vert</i>
62</button>
63
64<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
65 for="demo-menu-lower-left">
66 <li class="mdl-menu__item">Some Action</li>
67 <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
68 <li disabled class="mdl-menu__item">Disabled Action</li>
69 <li class="mdl-menu__item">Yet Another Action</li>
70</ul>
71
72<style>
73 .demo-menu.demo-menu__lower-right .container {
74 position: relative;
75 width: 200px;
76 }
77 .demo-menu.demo-menu__lower-right .background {
78 background: white;
79 height: 148px;
80 width: 100%;
81 }
82 .demo-menu.demo-menu__lower-right .bar {
83 box-sizing: border-box;
84 position: relative;
85 background: #3F51B5;
86 color: white;
87 height: 64px;
88 width: 100%;
89 padding: 16px;
90 }
91 .demo-menu.demo-menu__lower-right .wrapper {
92 box-sizing: border-box;
93 position: absolute;
94 right: 16px;
95 }
96</style>
97
98<div class="container mdl-shadow--2dp">
99 <div class="bar">
100 <div class="wrapper">
101 {% include "lower-right.html" %}
102 </div>
103 </div>
104 <div class="background"></div>
105</div>
106
107<!-- Right aligned menu below button -->
108<button id="demo-menu-lower-right"
109 class="mdl-button mdl-js-button mdl-button--icon">
110 <i class="material-icons">more_vert</i>
111</button>
112
113<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
114 for="demo-menu-lower-right">
115 <li class="mdl-menu__item">Some Action</li>
116 <li class="mdl-menu__item">Another Action</li>
117 <li disabled class="mdl-menu__item">Disabled Action</li>
118 <li class="mdl-menu__item">Yet Another Action</li>
119</ul>
120
121<style>
122 .demo-menu.demo-menu__top-left .container {
123 position: relative;
124 width: 200px;
125 }
126 .demo-menu.demo-menu__top-left .background {
127 background: white;
128 height: 148px;
129 width: 100%;
130 }
131 .demo-menu.demo-menu__top-left .bar {
132 box-sizing: border-box;
133 background: #3F51B5;
134 color: white;
135 width: 100%;
136 padding: 16px;
137 }
138</style>
139
140<div class="container mdl-shadow--2dp">
141 <div class="background"></div>
142 <div class="bar">
143 {% include "top-left.html" %}
144 </div>
145</div>
146
147<!-- Left aligned menu on top of button -->
148<button id="demo-menu-top-left"
149 class="mdl-button mdl-js-button mdl-button--icon">
150 <i class="material-icons">more_vert</i>
151</button>
152
153<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
154 data-mdl-for="demo-menu-top-left">
155 <li class="mdl-menu__item">Some Action</li>
156 <li class="mdl-menu__item">Another Action</li>
157 <li disabled class="mdl-menu__item">Disabled Action</li>
158 <li class="mdl-menu__item">Yet Another Action</li>
159</ul>
160
161<style>
162 .demo-menu.demo-menu__top-right .container {
163 position: relative;
164 width: 200px;
165 }
166 .demo-menu.demo-menu__top-right .background {
167 background: white;
168 height: 148px;
169 width: 100%;
170 }
171 .demo-menu.demo-menu__top-right .bar {
172 box-sizing: border-box;
173 position: relative;
174 background: #3F51B5;
175 color: white;
176 height: 64px;
177 width: 100%;
178 padding: 16px;
179 }
180 .demo-menu.demo-menu__top-right .wrapper {
181 box-sizing: border-box;
182 position: absolute;
183 right: 16px;
184 }
185</style>
186
187<div class="container mdl-shadow--2dp">
188 <div class="background"></div>
189 <div class="bar">
190 <div class="wrapper">
191 {% include "top-right.html" %}
192 </div>
193 </div>
194</div>
195
196<!-- Right aligned menu on top of button -->
197<button id="demo-menu-top-right"
198 class="mdl-button mdl-js-button mdl-button--icon">
199 <i class="material-icons">more_vert</i>
200</button>
201
202<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
203 data-mdl-for="demo-menu-top-right">
204 <li class="mdl-menu__item">Some Action</li>
205 <li class="mdl-menu__item">Another Action</li>
206 <li disabled class="mdl-menu__item">Disabled Action</li>
207 <li class="mdl-menu__item">Yet Another Action</li>
208</ul>
209
210
211 </div>
212 <!-- Built with love using Material Design Lite -->
213
214
215 <script>
216
217 </script>
218 </body>
219</html>