third_party/polymer/v1_0/components/paper-checkbox/paper-checkbox.html - Issue 1269803005: Remove third_party/polymer from .gitignore

Side by Side Diff: third_party/polymer/v1_0/components/paper-checkbox/paper-checkbox.html

Issue 1269803005: Remove third_party/polymer from .gitignore (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 5 years, 4 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

« no previous file with comments | « third_party/polymer/v1_0/components/paper-checkbox/paper-checkbox.css ('k') | third_party/polymer/v1_0/components/paper-dialog-behavior/.bower.json » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!--

2 @license

3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

7 Code distributed by Google as part of the polymer project is also

8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

9 -->

10

11 <link rel="import" href="../polymer/polymer.html">

12 <link rel="import" href="../paper-ripple/paper-ripple.html">

13 <link rel="import" href="../paper-styles/default-theme.html">

14 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">

15

16 <!--

17

18 `paper-checkbox` is a button that can be either checked or unchecked. User

19 can tap the checkbox to check or uncheck it. Usually you use checkboxes

20 to allow user to select multiple options from a set. If you have a single

21 ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`

22 instead.

23

24 Example:

25

26 <paper-checkbox>label</paper-checkbox>

27

28 <paper-checkbox checked> label</paper-checkbox>

29

30 ### Styling

31

32 The following custom properties and mixins are available for styling:

33

34 Custom property \| Description \| Default

35 ----------------\|-------------\|----------

36 `--paper-checkbox-unchecked-background-color` \| Checkbox background color when t he input is not checked \| `transparent`

37 `--paper-checkbox-unchecked-color` \| Checkbox border color when the input is not checked \| `--primary-text-color`

38 `--paper-checkbox-unchecked-ink-color` \| Selected/focus ripple color when the in put is not checked \| `--primary-text-color`

39 `--paper-checkbox-checked-color` \| Checkbox color when the input is checked \| `- -default-primary-color`

40 `--paper-checkbox-checked-ink-color` \| Selected/focus ripple color when the inpu t is checked \| `--default-primary-color`

41 `--paper-checkbox-checkmark-color` \| Checkmark color \| `white`

42 `--paper-checkbox-label-color` \| Label color \| `--primary-text-color`

43

44 @demo demo/index.html

45 -->

46

47 <dom-module id="paper-checkbox">

48 <link rel="import" type="css" href="paper-checkbox.css">

49

50 <template>

51

52 <div id="checkboxContainer">

53 <paper-ripple id="ink" class="circle" center checked$="[[checked]]"></pape r-ripple>

54 <div id="checkbox" class$="[[_computeCheckboxClass(checked)]]">

55 <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>

56 </div>

57 </div>

58

59 <div id="checkboxLabel" aria-hidden="true"><content></content></div>

60

61 </template>

62

63 <script>

64 Polymer({

65 is: 'paper-checkbox',

66

67 behaviors: [

68 Polymer.PaperInkyFocusBehavior

69 ],

70

71 hostAttributes: {

72 role: 'checkbox',

73 'aria-checked': false,

74 tabindex: 0

75 },

76

77 properties: {

78 /**

79 * Fired when the checked state changes due to user interaction.

80 *

81 * @event change

82 */

83

84 /**

85 * Fired when the checked state changes.

86 *

87 * @event iron-change

88 */

89

90 /**

91 * Gets or sets the state, `true` is checked and `false` is unchecked.

92 */

93 checked: {

94 type: Boolean,

95 value: false,

96 reflectToAttribute: true,

97 notify: true,

98 observer: '_checkedChanged'

99 },

100

101 /**

102 * If true, the button toggles the active state with each tap or press

103 * of the spacebar.

104 */

105 toggles: {

106 type: Boolean,

107 value: true,

108 reflectToAttribute: true

109 }

110 },

111

112 ready: function() {

113 if (Polymer.dom(this).textContent == '') {

114 this.$.checkboxLabel.hidden = true;

115 } else {

116 this.setAttribute('aria-label', Polymer.dom(this).textContent);

117 }

118 this._isReady = true;

119 },

120

121 // button-behavior hook

122 _buttonStateChanged: function() {

123 if (this.disabled) {

124 return;

125 }

126 if (this._isReady) {

127 this.checked = this.active;

128 }

129 },

130

131 _checkedChanged: function(checked) {

132 this.setAttribute('aria-checked', this.checked ? 'true' : 'false');

133 this.active = this.checked;

134 this.fire('iron-change');

135 },

136

137 _computeCheckboxClass: function(checked) {

138 if (checked) {

139 return 'checked';

140 }

141 return '';

142 },

143

144 _computeCheckmarkClass: function(checked) {

145 if (!checked) {

146 return 'hidden';

147 }

148 return '';

149 }

150 })

151 </script>

152

153 </dom-module>

OLD	NEW