133 lines
4.5 KiB
JavaScript
133 lines
4.5 KiB
JavaScript
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); |