ボタン用コンポーネント。ツールバーにボタンを設置する場合は、ons-toolbar-buttonもしくはons-back-buttonコンポーネントを使用します。
ons-button要素ons-button要素では、ボタンを配置することができます。
通常のAngular 2アプリケーションと同じように、ons-buttonでもイベントバインディングが利用できます。次のコードでは、ボタンがタップされた時にコンポーネントのonClick()メソッドを呼び出します。
<ons-button (click)="onClick()">Click</ons-button>
この書き方は、デスクトップブラウザでもモバイルブラウザでも正常に動作します。モバイルブラウザではclickイベントが300ミリ秒遅延することが知られていますが、Onsen UIには予めFastClickライブラリが組み込まれているので、遅延も発生しません。
| 名前 | 型 / デフォルト値 | 概要 |
|---|---|---|
| modifier | String | ボタンの表現を指定します。 Optional. |
| ripple | If this attribute is defined, the button will have a ripple effect. （翻訳中） Optional. | |
| disabled | ボタンを無効化する場合は指定します。 Optional. |
| 名前 | 概要 |
|---|---|
| ripple | Whether the button has a ripple effect or not. （翻訳中） |
| disabled |
無効化されている場合にtrue。
|
| Name | 概要 |
|---|---|
| outline | アウトラインを持ったボタンを表示します。 |
| light | 目立たないボタンを表示します。 |
| quiet | 枠線や背景が無い文字だけのボタンを表示します。 |
| cta | 目立つボタンを表示します。 |
| large | 横いっぱいに広がる大きなボタンを表示します。 |
| large--quiet | 横いっぱいに広がるquietボタンを表示します。 |
| large--cta | 横いっぱいに広がるctaボタンを表示します。 |
| material | マテリアルデザインのボタン |
| material--flat | マテリアルデザインのフラットボタン |
Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。
バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。
あわせて、下記の情報も参考にしてください。