ons-button

ボタン用コンポーネント。ツールバーにボタンを設置する場合は、ons-toolbar-buttonもしくはons-back-buttonコンポーネントを使用します。

使い方 #

<ons-button modifier="large--cta">
  Tap Me
</ons-button>

実例 #

See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.

関連情報 #

属性 #

名前 型 / デフォルト値 概要
modifier String ボタンの表現を指定します。 Optional
should-spin Boolean ボタンにスピナーを表示する場合に指定します。 Optional
animation String スピナーを表示する場合のアニメーションを指定します。"slide-left" (デフォルト), "slide-right", "slide-up", "slide-down", "expand-left", "expand-right", "expand-up", "expand-down", "zoom-out", "zoom-in"のいずれかを指定します。 Optional
disabled ボタンを無効化する場合は指定します。 Optional

プリセットのmodifier #

Modifier名 概要
outline アウトラインを持ったボタンを表示します。
light 目立たないボタンを表示します。
quiet 枠線や背景が無い文字だけのボタンを表示します。
cta 目立つボタンを表示します。
large 横いっぱいに広がる大きなボタンを表示します。
large--quiet 横いっぱいに広がるquietボタンを表示します。
large--cta 横いっぱいに広がるctaボタンを表示します。

メソッド概要 #

シグネチャ 概要
startSpin() ボタンにスピナーを表示します。
stopSpin() ボタンのスピナーを隠します。
isSpinning() ボタン内にスピナーが表示されているかどうかを返します。
setSpinAnimation(animation) スピナーを表示する場合のアニメーションを指定します。"slide-left" (デフォルト), "slide-right", "slide-up", "slide-down", "expand-left", "expand-right", "expand-up", "expand-down", "zoom-out", "zoom-in"のいずれかを指定します。
setDisabled(disabled) このボタンをdisabled状態にするかどうかを設定します。
isDisabled() このボタンがdisabled状態かどうかを返します。

メソッド

startSpin() #

ボタンにスピナーを表示します。

stopSpin() #

ボタンのスピナーを隠します。

isSpinning(): Boolean #

ボタン内にスピナーが表示されているかどうかを返します。

返り値: spinしているかどうかを返します。

setSpinAnimation(animation) #

スピナーを表示する場合のアニメーションを指定します。"slide-left" (デフォルト), "slide-right", "slide-up", "slide-down", "expand-left", "expand-right", "expand-up", "expand-down", "zoom-out", "zoom-in"のいずれかを指定します。

パラメーター
名前 概要
animation String アニメーション名を指定します。

setDisabled(disabled) #

このボタンをdisabled状態にするかどうかを設定します。

パラメーター
名前 概要
disabled String disabled状態にするかどうかを真偽値で指定します。

isDisabled(): Boolean #

このボタンがdisabled状態かどうかを返します。

返り値: ボタンがdisabled状態になっているかどうかを返します。

議論 #