| 1 | /*
|
| 2 | Copyright 2013-2015 ASIAL CORPORATION
|
| 3 |
|
| 4 | Licensed under the Apache License, Version 2.0 (the "License");
|
| 5 | you may not use this file except in compliance with the License.
|
| 6 | You may obtain a copy of the License at
|
| 7 |
|
| 8 | http://www.apache.org/licenses/LICENSE-2.0
|
| 9 |
|
| 10 | Unless required by applicable law or agreed to in writing, software
|
| 11 | distributed under the License is distributed on an "AS IS" BASIS,
|
| 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
| 13 | See the License for the specific language governing permissions and
|
| 14 | limitations under the License.
|
| 15 |
|
| 16 | */
|
| 17 |
|
| 18 | import onsElements from '../ons/elements.js';
|
| 19 | import BaseButtonElement from './base/base-button.js';
|
| 20 |
|
| 21 | /**
|
| 22 | * @element ons-alert-dialog-button
|
| 23 | * @modifier material
|
| 24 | * [en]Material Design alert-dialog button.[/en]
|
| 25 | * [ja]マテリアルデザインのボタンを表示します。[/ja]
|
| 26 | * @description
|
| 27 | * [en][/en]
|
| 28 | * [ja][/ja]
|
| 29 | * @seealso ons-alert-dialog
|
| 30 | * [en]The `<ons-alert-dialog>` component displays a alert dialog.[/en]
|
| 31 | * [ja]ons-alert-dialogコンポーネント[/ja]
|
| 32 | * @example
|
| 33 | * <ons-alert-dialog>
|
| 34 | * <div class="alert-dialog-title">Warning!</div>
|
| 35 | * <div class="alert-dialog-content">
|
| 36 | * An error has occurred!
|
| 37 | * </div>
|
| 38 | * <div class="alert-dialog-footer">
|
| 39 | * <alert-dialog-button onclick="app.close()">Cancel</alert-dialog-button>
|
| 40 | * <alert-dialog-button class="alert-dialog-button" onclick="app.close()">OK</alert-dialog-button>
|
| 41 | * </div>
|
| 42 | * </ons-alert-dialog>
|
| 43 | */
|
| 44 | export default class AlertDialogButtonElement extends BaseButtonElement {
|
| 45 |
|
| 46 | /**
|
| 47 | * @attribute modifier
|
| 48 | * @type {String}
|
| 49 | * @description
|
| 50 | * [en]The appearance of the button.[/en]
|
| 51 | * [ja]ボタンの表現を指定します。[/ja]
|
| 52 | */
|
| 53 |
|
| 54 | /**
|
| 55 | * @attribute disabled
|
| 56 | * @description
|
| 57 | * [en]Specify if button should be disabled.[/en]
|
| 58 | * [ja]ボタンを無効化する場合は指定してください。[/ja]
|
| 59 | */
|
| 60 |
|
| 61 | /**
|
| 62 | * @property disabled
|
| 63 | * @type {Boolean}
|
| 64 | * @description
|
| 65 | * [en]Whether the element is disabled or not.[/en]
|
| 66 | * [ja]無効化されている場合に`true`。[/ja]
|
| 67 | */
|
| 68 |
|
| 69 | get _scheme() {
|
| 70 | return { '': 'alert-dialog-button--*' };
|
| 71 | }
|
| 72 |
|
| 73 | get _defaultClassName() {
|
| 74 | return 'alert-dialog-button';
|
| 75 | }
|
| 76 |
|
| 77 | get _rippleOpt() {
|
| 78 | return [this, undefined, { 'modifier': 'light-gray' }];
|
| 79 | }
|
| 80 | }
|
| 81 |
|
| 82 | onsElements.AlertDialogButton = AlertDialogButtonElement;
|
| 83 | customElements.define('ons-alert-dialog-button', AlertDialogButtonElement);
|