123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
- import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
- import _createClass from 'babel-runtime/helpers/createClass';
- import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
- import _inherits from 'babel-runtime/helpers/inherits';
- /*
- Copyright 2013-2015 ASIAL CORPORATION
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-
- */
-
- import onsElements from '../ons/elements';
- import BaseButtonElement from './base/base-button';
-
- /**
- * @element ons-button
- * @category form
- * @modifier outline
- * [en]Button with outline and transparent background[/en]
- * [ja]アウトラインを持ったボタンを表示します。[/ja]
- * @modifier light
- * [en]Button that doesn't stand out.[/en]
- * [ja]目立たないボタンを表示します。[/ja]
- * @modifier quiet
- * [en]Button with no outline and or background..[/en]
- * [ja]枠線や背景が無い文字だけのボタンを表示します。[/ja]
- * @modifier cta
- * [en]Button that really stands out.[/en]
- * [ja]目立つボタンを表示します。[/ja]
- * @modifier large
- * [en]Large button that covers the width of the screen.[/en]
- * [ja]横いっぱいに広がる大きなボタンを表示します。[/ja]
- * @modifier large--quiet
- * [en]Large quiet button.[/en]
- * [ja]横いっぱいに広がるquietボタンを表示します。[/ja]
- * @modifier large--cta
- * [en]Large call to action button.[/en]
- * [ja]横いっぱいに広がるctaボタンを表示します。[/ja]
- * @modifier material
- * [en]Material Design button[/en]
- * [ja]マテリアルデザインのボタン[/ja]
- * @modifier material--flat
- * [en]Material Design flat button[/en]
- * [ja]マテリアルデザインのフラットボタン[/ja]
- * @description
- * [en]
- * Button component. If you want to place a button in a toolbar, use `<ons-toolbar-button>` or `<ons-back-button>` instead.
- *
- * Will automatically display as a Material Design button with a ripple effect on Android.
- * [/en]
- * [ja]ボタン用コンポーネント。ツールバーにボタンを設置する場合は、ons-toolbar-buttonもしくはons-back-buttonコンポーネントを使用します。[/ja]
- * @codepen hLayx
- * @tutorial vanilla/Reference/button
- * @guide theming.html#modifiers [en]More details about the `modifier` attribute[/en][ja]modifier属性の使い方[/ja]
- * @guide theming.html#cross-platform-styling-autostyling [en]Information about cross platform styling[/en][ja]Information about cross platform styling[/ja]
- * @example
- * <ons-button modifier="large--cta">
- * Tap Me
- * </ons-button>
- */
-
- var ButtonElement = function (_BaseButtonElement) {
- _inherits(ButtonElement, _BaseButtonElement);
-
- function ButtonElement() {
- _classCallCheck(this, ButtonElement);
-
- return _possibleConstructorReturn(this, (ButtonElement.__proto__ || _Object$getPrototypeOf(ButtonElement)).apply(this, arguments));
- }
-
- _createClass(ButtonElement, [{
- key: '_scheme',
-
-
- /**
- * @attribute modifier
- * @type {String}
- * @description
- * [en]The appearance of the button.[/en]
- * [ja]ボタンの表現を指定します。[/ja]
- */
-
- /**
- * @attribute ripple
- * @description
- * [en]If this attribute is defined, the button will have a ripple effect.[/en]
- * [ja][/ja]
- */
-
- /**
- * @attribute disabled
- * @description
- * [en]Specify if button should be disabled.[/en]
- * [ja]ボタンを無効化する場合は指定します。[/ja]
- */
-
- /**
- * @property disabled
- * @type {Boolean}
- * @description
- * [en]Whether the button is disabled or not.[/en]
- * [ja]無効化されている場合に`true`。[/ja]
- */
-
- get: function get() {
- return { '': 'button--*' };
- }
- }, {
- key: '_defaultClassName',
- get: function get() {
- return 'button';
- }
- }]);
-
- return ButtonElement;
- }(BaseButtonElement);
-
- export default ButtonElement;
-
-
- onsElements.Button = ButtonElement;
- customElements.define('ons-button', ButtonElement);
|