ons-button

ボタン用コンポーネント。ツールバーにボタンを設置する場合は、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.

プロパティ概要

名前 概要
disabled 無効化されている場合にtrue

プリセットのmodifier

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に記載をお願いいたします。

あわせて、下記の情報も参考にしてください。