Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(150)

Side by Side Diff: third_party/polymer/components/paper-radio-button/paper-radio-button.html

Issue 592603004: Revert "Polymer elements added to third_party/polymer." (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!--
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6 Code distributed by Google as part of the polymer project is also
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
8 -->
9
10 <!--
11 `paper-radio-button` is a button that can be either checked or unchecked.
12 User can tap the radio button to check it. But it cannot be unchecked by
13 tapping once checked.
14
15 Use `paper-radio-group` to group a set of radio buttons. When radio buttons
16 are inside a radio group, only one radio button in the group can be checked.
17
18 Example:
19
20 <paper-radio-button></paper-radio-button>
21
22 Styling radio button:
23
24 To change the ink color for checked state:
25
26 paper-radio-button::shadow #ink[checked] {
27 color: #4285f4;
28 }
29
30 To change the radio checked color:
31
32 paper-radio-button::shadow #onRadio {
33 background-color: #4285f4;
34 }
35
36 To change the ink color for unchecked state:
37
38 paper-radio-button::shadow #ink {
39 color: #b5b5b5;
40 }
41
42 To change the radio unchecked color:
43
44 paper-radio-button::shadow #offRadio {
45 border-color: #b5b5b5;
46 }
47
48 @group Paper Elements
49 @element paper-radio-button
50 @homepage github.io
51 -->
52
53 <link rel="import" href="../paper-ripple/paper-ripple.html">
54
55 <polymer-element name="paper-radio-button" role="radio" tabindex="0" aria-checke d="false">
56 <template>
57
58 <link rel="stylesheet" href="paper-radio-button.css">
59
60 <div id="radioContainer" class="{{ {labeled: label} | tokenList }}">
61
62 <div id="offRadio"></div>
63 <div id="onRadio"></div>
64
65 <paper-ripple id="ink" class="circle recenteringTouch" checked?="{{!checked} }"></paper-ripple>
66
67 </div>
68
69 <div id="radioLabel" aria-hidden="true" hidden?="{{!label}}">{{label}}<content ></content></div>
70
71 </template>
72 <script>
73
74 Polymer('paper-radio-button', {
75
76 /**
77 * Fired when the checked state changes.
78 *
79 * @event change
80 */
81
82 publish: {
83 /**
84 * Gets or sets the state, `true` is checked and `false` is unchecked.
85 *
86 * @attribute checked
87 * @type boolean
88 * @default false
89 */
90 checked: {value: false, reflect: true},
91
92 /**
93 * The label for the radio button.
94 *
95 * @attribute label
96 * @type string
97 * @default ''
98 */
99 label: '',
100
101 /**
102 * Normally the user cannot uncheck the radio button by tapping once
103 * checked. Setting this property to `true` makes the radio button
104 * toggleable from checked to unchecked.
105 *
106 * @attribute toggles
107 * @type boolean
108 * @default false
109 */
110 toggles: false,
111
112 /**
113 * If true, the user cannot interact with this element.
114 *
115 * @attribute disabled
116 * @type boolean
117 * @default false
118 */
119 disabled: {value: false, reflect: true}
120 },
121
122 eventDelegates: {
123 tap: 'tap'
124 },
125
126 tap: function() {
127 this.toggle();
128 this.fire('paper-radio-button-activate');
129 },
130
131 toggle: function() {
132 this.checked = !this.toggles || !this.checked;
133 },
134
135 checkedChanged: function() {
136 this.$.onRadio.classList.toggle('fill', this.checked);
137 this.setAttribute('aria-checked', this.checked ? 'true': 'false');
138 this.fire('change');
139 },
140
141 labelChanged: function() {
142 this.setAttribute('aria-label', this.label);
143 }
144
145 });
146
147 </script>
148 </polymer-element>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698