Ei kuvausta

ons-radio.js 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  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. '.radio-button': 'radio-button--*',
  22. '.radio-button__input': 'radio-button--*__input',
  23. '.radio-button__checkmark': 'radio-button--*__checkmark'
  24. };
  25. /**
  26. * @element ons-radio
  27. * @category form
  28. * @modifier material
  29. * [en]Displays a Material Design radio button.[/en]
  30. * [ja][/ja]
  31. * @description
  32. * [en]
  33. * A radio button element. The component will automatically render as a Material Design radio button on Android devices.
  34. *
  35. * Most attributes that can be used for a normal `<input type="radio">` element can also be used on the `<ons-radio>` element.
  36. * [/en]
  37. * [ja][/ja]
  38. * @tutorial vanilla/Reference/radio
  39. * @seealso ons-select
  40. * [en]The `<ons-select>` element is used to display a select box.[/en]
  41. * [ja][/ja]
  42. * @seealso ons-checkbox
  43. * [en]The `<ons-checkbox>` element is used to display a checkbox.[/en]
  44. * [ja][/ja]
  45. * @seealso ons-switch
  46. * [en]The `<ons-switch>` element is used to display a draggable toggle switch.[/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. * @guide theming.html#modifiers [en]More details about the `modifier` attribute[/en][ja]modifier属性の使い方[/ja]
  58. * @example
  59. * <ons-radio checked></ons-radio>
  60. */
  61. var RadioElement = function (_BaseCheckboxElement) {
  62. _inherits(RadioElement, _BaseCheckboxElement);
  63. function RadioElement() {
  64. _classCallCheck(this, RadioElement);
  65. return _possibleConstructorReturn(this, (RadioElement.__proto__ || _Object$getPrototypeOf(RadioElement)).apply(this, arguments));
  66. }
  67. _createClass(RadioElement, [{
  68. key: '_scheme',
  69. get: function get() {
  70. return scheme;
  71. }
  72. }, {
  73. key: '_defaultClassName',
  74. get: function get() {
  75. return 'radio-button';
  76. }
  77. }, {
  78. key: 'type',
  79. get: function get() {
  80. return 'radio';
  81. }
  82. /**
  83. * @attribute input-id
  84. * @type {String}
  85. * @description
  86. * [en]Specify the "id" attribute of the inner `<input>` element. This is useful when using `<label for="...">` elements.[/en]
  87. * [ja][/ja]
  88. */
  89. /**
  90. * @property value
  91. * @type {String}
  92. * @description
  93. * [en]The current value of the radio button.[/en]
  94. * [ja][/ja]
  95. */
  96. /**
  97. * @property checked
  98. * @type {Boolean}
  99. * @description
  100. * [en]Whether the radio button is checked or not.[/en]
  101. * [ja][/ja]
  102. */
  103. /**
  104. * @property disabled
  105. * @type {Boolean}
  106. * @description
  107. * [en]Whether the radio button is disabled or not.[/en]
  108. * [ja]無効化されている場合に`true`。[/ja]
  109. */
  110. }]);
  111. return RadioElement;
  112. }(BaseCheckboxElement);
  113. export default RadioElement;
  114. onsElements.Radio = RadioElement;
  115. customElements.define('ons-radio', RadioElement);