OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <!-- | |
3 Copyright 2013 The Polymer Authors. All rights reserved. | |
4 Use of this source code is governed by a BSD-style | |
5 license that can be found in the LICENSE file. | |
6 --> | |
7 <html> | |
8 <head> | |
9 | |
10 <meta charset="utf-8"> | |
11 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
12 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-
scale=1, user-scalable=yes"> | |
13 | |
14 <title>core-focusable</title> | |
15 | |
16 <script src="../webcomponentsjs/webcomponents.js"></script> | |
17 | |
18 <link href="core-focusable.html" rel="import"> | |
19 | |
20 <style shim-shadowdom> | |
21 body { | |
22 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; | |
23 font-size: 14px; | |
24 margin: 0; | |
25 padding: 24px; | |
26 -webkit-tap-highlight-color: rgba(0,0,0,0); | |
27 -webkit-touch-callout: none; | |
28 } | |
29 | |
30 section { | |
31 padding: 20px 0; | |
32 } | |
33 | |
34 section > div { | |
35 padding: 14px; | |
36 font-size: 16px; | |
37 } | |
38 | |
39 focusable-button { | |
40 display: inline-block; | |
41 padding: 0.5em 1em; | |
42 border-radius: 3px; | |
43 outline: none; | |
44 } | |
45 | |
46 focusable-button[disabled] { | |
47 background: #e0e0e0; | |
48 } | |
49 | |
50 focusable-button[active] { | |
51 background: #000; | |
52 color: #fff; | |
53 } | |
54 | |
55 focusable-button[pressed] { | |
56 background: #ffb74d; | |
57 color: #000; | |
58 } | |
59 | |
60 focusable-button[focused] { | |
61 border: 1px solid #4fc3f7; | |
62 } | |
63 | |
64 </style> | |
65 </head> | |
66 <body unresolved> | |
67 | |
68 <polymer-element name="focusable-button" tabindex="0"> | |
69 <script> | |
70 (function() { | |
71 var p = { | |
72 | |
73 eventDelegates: { | |
74 down: 'downAction', | |
75 up: 'upAction' | |
76 }, | |
77 | |
78 downAction: function() { | |
79 // call overriden event delegate | |
80 this._downAction(); | |
81 console.log('down'); | |
82 }, | |
83 | |
84 upAction: function() { | |
85 // call overriden event delegate | |
86 this._upAction(); | |
87 console.log('up'); | |
88 } | |
89 | |
90 }; | |
91 | |
92 Polymer.mixin2(p, Polymer.CoreFocusable); | |
93 Polymer(p); | |
94 })(); | |
95 </script> | |
96 </polymer-element> | |
97 | |
98 <section> | |
99 | |
100 <focusable-button>button</focusable-button> | |
101 | |
102 <focusable-button toggle>toggle</focusable-button> | |
103 | |
104 <focusable-button disabled>disabled</focusable-button> | |
105 | |
106 </section> | |
107 | |
108 </body> | |
109 </html> | |
OLD | NEW |