| 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-toolbar-button
|
| 23 | * @category page
|
| 24 | * @modifier material
|
| 25 | * [en]Material Design toolbar button.[/en]
|
| 26 | * [ja][/ja]
|
| 27 | * @modifier outline
|
| 28 | * [en]A button with an outline.[/en]
|
| 29 | * [ja]アウトラインをもったボタンを表示します。[/ja]
|
| 30 | * @description
|
| 31 | * [en]Button component for ons-toolbar and ons-bottom-toolbar.[/en]
|
| 32 | * [ja]ons-toolbarあるいはons-bottom-toolbarに設置できるボタン用コンポーネントです。[/ja]
|
| 33 | * @codepen aHmGL
|
| 34 | * @tutorial vanilla/Reference/page
|
| 35 | * @guide compilation.html#toolbar-compilation
|
| 36 | * [en]Adding a toolbar[/en]
|
| 37 | * [ja]ツールバーの追加[/ja]
|
| 38 | * @seealso ons-toolbar
|
| 39 | * [en]The `<ons-toolbar>` component displays a navigation bar at the top of a page.[/en]
|
| 40 | * [ja]ons-toolbarコンポーネント[/ja]
|
| 41 | * @seealso ons-back-button
|
| 42 | * [en]The `<ons-back-button>` displays a back button in the navigation bar.[/en]
|
| 43 | * [ja]ons-back-buttonコンポーネント[/ja]
|
| 44 | * @example
|
| 45 | * <ons-toolbar>
|
| 46 | * <div class="left">
|
| 47 | * <ons-toolbar-button>
|
| 48 | * Button
|
| 49 | * </ons-toolbar-button>
|
| 50 | * </div>
|
| 51 | * <div class="center">
|
| 52 | * Title
|
| 53 | * </div>
|
| 54 | * <div class="right">
|
| 55 | * <ons-toolbar-button>
|
| 56 | * <ons-icon icon="ion-navicon" size="28px"></ons-icon>
|
| 57 | * </ons-toolbar-button>
|
| 58 | * </div>
|
| 59 | * </ons-toolbar>
|
| 60 | */
|
| 61 | export default class ToolbarButtonElement extends BaseButtonElement {
|
| 62 |
|
| 63 | /**
|
| 64 | * @attribute modifier
|
| 65 | * @type {String}
|
| 66 | * @description
|
| 67 | * [en]The appearance of the button.[/en]
|
| 68 | * [ja]ボタンの表現を指定します。[/ja]
|
| 69 | */
|
| 70 |
|
| 71 | /**
|
| 72 | * @attribute icon
|
| 73 | * @type {String}
|
| 74 | * @description
|
| 75 | * [en]Creates an `ons-icon` component with this string.[/en]
|
| 76 | * [ja]`ons-icon`コンポーネントを悪性します。[/ja]
|
| 77 | */
|
| 78 |
|
| 79 | /**
|
| 80 | * @attribute disabled
|
| 81 | * @description
|
| 82 | * [en]Specify if button should be disabled.[/en]
|
| 83 | * [ja]ボタンを無効化する場合は指定してください。[/ja]
|
| 84 | */
|
| 85 |
|
| 86 | /**
|
| 87 | * @property disabled
|
| 88 | * @type {Boolean}
|
| 89 | * @description
|
| 90 | * [en]Whether the element is disabled or not.[/en]
|
| 91 | * [ja]無効化されている場合に`true`。[/ja]
|
| 92 | */
|
| 93 |
|
| 94 | get _scheme() {
|
| 95 | return { '': 'toolbar-button--*' };
|
| 96 | }
|
| 97 |
|
| 98 | get _defaultClassName() {
|
| 99 | return 'toolbar-button';
|
| 100 | }
|
| 101 |
|
| 102 | get _rippleOpt() {
|
| 103 | return [this, undefined, { center: '', 'size': 'contain', 'background': 'transparent' }];
|
| 104 | }
|
| 105 | }
|
| 106 |
|
| 107 | onsElements.ToolbarButton = ToolbarButtonElement;
|
| 108 | customElements.define('ons-toolbar-button', ToolbarButtonElement);
|