No Description

ons-checkbox.js 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
  2. import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
  3. import _createClass from 'babel-runtime/helpers/createClass';
  4. import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
  5. import _inherits from 'babel-runtime/helpers/inherits';
  6. /*
  7. Copyright 2013-2015 ASIAL CORPORATION
  8. Licensed under the Apache License, Version 2.0 (the "License");
  9. you may not use this file except in compliance with the License.
  10. You may obtain a copy of the License at
  11. http://www.apache.org/licenses/LICENSE-2.0
  12. Unless required by applicable law or agreed to in writing, software
  13. distributed under the License is distributed on an "AS IS" BASIS,
  14. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15. See the License for the specific language governing permissions and
  16. limitations under the License.
  17. */
  18. import onsElements from '../ons/elements';
  19. import BaseCheckboxElement from './base/base-checkbox';
  20. var scheme = {
  21. '.checkbox': 'checkbox--*',
  22. '.checkbox__input': 'checkbox--*__input',
  23. '.checkbox__checkmark': 'checkbox--*__checkmark'
  24. };
  25. /**
  26. * @element ons-checkbox
  27. * @category form
  28. * @modifier material
  29. * [en]Displays a Material Design checkbox.[/en]
  30. * [ja][/ja]
  31. * @modifier noborder
  32. * [en]iOS borderless checkbox.[/en]
  33. * [ja][/ja]
  34. * @description
  35. * [en]
  36. * A checkbox element. The component will automatically render as a Material Design checkbox on Android devices.
  37. *
  38. * Most attributes that can be used for a normal `<input type="checkbox">` element can also be used on the `<ons-checkbox>` element.
  39. * [/en]
  40. * [ja][/ja]
  41. * @tutorial vanilla/Reference/checkbox
  42. * @seealso ons-switch
  43. * [en]The `<ons-switch>` element is used to display a draggable toggle switch.[/en]
  44. * [ja][/ja]
  45. * @seealso ons-radio
  46. * [en]The `<ons-radio>` element is used to display a radio button.[/en]
  47. * [ja][/ja]
  48. * @seealso ons-input
  49. * [en]The `<ons-input>` element is used to display a text input.[/en]
  50. * [ja][/ja]
  51. * @seealso ons-search-input
  52. * [en]The `<ons-search-input>` element is used to display a search input.[/en]
  53. * [ja][/ja]
  54. * @seealso ons-range
  55. * [en]The `<ons-range>` element is used to display a range slider.[/en]
  56. * [ja][/ja]
  57. * @seealso ons-select
  58. * [en]The `<ons-select>` element is used to display a select box.[/en]
  59. * [ja][/ja]
  60. * @guide theming.html#modifiers [en]More details about the `modifier` attribute[/en][ja]modifier属性の使い方[/ja]
  61. * @example
  62. * <ons-checkbox checked></ons-checkbox>
  63. */
  64. var CheckboxElement = function (_BaseCheckboxElement) {
  65. _inherits(CheckboxElement, _BaseCheckboxElement);
  66. function CheckboxElement() {
  67. _classCallCheck(this, CheckboxElement);
  68. return _possibleConstructorReturn(this, (CheckboxElement.__proto__ || _Object$getPrototypeOf(CheckboxElement)).apply(this, arguments));
  69. }
  70. _createClass(CheckboxElement, [{
  71. key: '_scheme',
  72. get: function get() {
  73. return scheme;
  74. }
  75. }, {
  76. key: '_defaultClassName',
  77. get: function get() {
  78. return 'checkbox';
  79. }
  80. }, {
  81. key: 'type',
  82. get: function get() {
  83. return 'checkbox';
  84. }
  85. /**
  86. * @attribute input-id
  87. * @type {String}
  88. * @description
  89. * [en]Specify the "id" attribute of the inner `<input>` element. This is useful when using `<label for="...">` elements.[/en]
  90. * [ja][/ja]
  91. */
  92. /**
  93. * @property value
  94. * @type {String}
  95. * @description
  96. * [en]The current value of the checkbox.[/en]
  97. * [ja][/ja]
  98. */
  99. /**
  100. * @property checked
  101. * @type {Boolean}
  102. * @description
  103. * [en]Whether the checkbox is checked or not.[/en]
  104. * [ja][/ja]
  105. */
  106. /**
  107. * @property disabled
  108. * @type {Boolean}
  109. * @description
  110. * [en]Whether the checkbox is disabled or not.[/en]
  111. * [ja]無効化されている場合に`true`。[/ja]
  112. */
  113. }]);
  114. return CheckboxElement;
  115. }(BaseCheckboxElement);
  116. export default CheckboxElement;
  117. onsElements.Checkbox = CheckboxElement;
  118. customElements.define('ons-checkbox', CheckboxElement);