暂无描述

ons-button.js 4.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  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 BaseButtonElement from './base/base-button';
  20. /**
  21. * @element ons-button
  22. * @category form
  23. * @modifier outline
  24. * [en]Button with outline and transparent background[/en]
  25. * [ja]アウトラインを持ったボタンを表示します。[/ja]
  26. * @modifier light
  27. * [en]Button that doesn't stand out.[/en]
  28. * [ja]目立たないボタンを表示します。[/ja]
  29. * @modifier quiet
  30. * [en]Button with no outline and or background..[/en]
  31. * [ja]枠線や背景が無い文字だけのボタンを表示します。[/ja]
  32. * @modifier cta
  33. * [en]Button that really stands out.[/en]
  34. * [ja]目立つボタンを表示します。[/ja]
  35. * @modifier large
  36. * [en]Large button that covers the width of the screen.[/en]
  37. * [ja]横いっぱいに広がる大きなボタンを表示します。[/ja]
  38. * @modifier large--quiet
  39. * [en]Large quiet button.[/en]
  40. * [ja]横いっぱいに広がるquietボタンを表示します。[/ja]
  41. * @modifier large--cta
  42. * [en]Large call to action button.[/en]
  43. * [ja]横いっぱいに広がるctaボタンを表示します。[/ja]
  44. * @modifier material
  45. * [en]Material Design button[/en]
  46. * [ja]マテリアルデザインのボタン[/ja]
  47. * @modifier material--flat
  48. * [en]Material Design flat button[/en]
  49. * [ja]マテリアルデザインのフラットボタン[/ja]
  50. * @description
  51. * [en]
  52. * Button component. If you want to place a button in a toolbar, use `<ons-toolbar-button>` or `<ons-back-button>` instead.
  53. *
  54. * Will automatically display as a Material Design button with a ripple effect on Android.
  55. * [/en]
  56. * [ja]ボタン用コンポーネント。ツールバーにボタンを設置する場合は、ons-toolbar-buttonもしくはons-back-buttonコンポーネントを使用します。[/ja]
  57. * @codepen hLayx
  58. * @tutorial vanilla/Reference/button
  59. * @guide theming.html#modifiers [en]More details about the `modifier` attribute[/en][ja]modifier属性の使い方[/ja]
  60. * @guide theming.html#cross-platform-styling-autostyling [en]Information about cross platform styling[/en][ja]Information about cross platform styling[/ja]
  61. * @example
  62. * <ons-button modifier="large--cta">
  63. * Tap Me
  64. * </ons-button>
  65. */
  66. var ButtonElement = function (_BaseButtonElement) {
  67. _inherits(ButtonElement, _BaseButtonElement);
  68. function ButtonElement() {
  69. _classCallCheck(this, ButtonElement);
  70. return _possibleConstructorReturn(this, (ButtonElement.__proto__ || _Object$getPrototypeOf(ButtonElement)).apply(this, arguments));
  71. }
  72. _createClass(ButtonElement, [{
  73. key: '_scheme',
  74. /**
  75. * @attribute modifier
  76. * @type {String}
  77. * @description
  78. * [en]The appearance of the button.[/en]
  79. * [ja]ボタンの表現を指定します。[/ja]
  80. */
  81. /**
  82. * @attribute ripple
  83. * @description
  84. * [en]If this attribute is defined, the button will have a ripple effect.[/en]
  85. * [ja][/ja]
  86. */
  87. /**
  88. * @attribute disabled
  89. * @description
  90. * [en]Specify if button should be disabled.[/en]
  91. * [ja]ボタンを無効化する場合は指定します。[/ja]
  92. */
  93. /**
  94. * @property disabled
  95. * @type {Boolean}
  96. * @description
  97. * [en]Whether the button is disabled or not.[/en]
  98. * [ja]無効化されている場合に`true`。[/ja]
  99. */
  100. get: function get() {
  101. return { '': 'button--*' };
  102. }
  103. }, {
  104. key: '_defaultClassName',
  105. get: function get() {
  106. return 'button';
  107. }
  108. }]);
  109. return ButtonElement;
  110. }(BaseButtonElement);
  111. export default ButtonElement;
  112. onsElements.Button = ButtonElement;
  113. customElements.define('ons-button', ButtonElement);