ons-speed-dial

実例

Speed dial

The Speed dial is a Material Design component similar to the Floating action button. It is used to display a <ons-fab> element that when clicked displays a menu.

The component is defined using the <ons-speed-dial> element and the items with <ons-speed-dial-item>.

<ons-speed-dial>
  <ons-fab>
    A
  </ons-fab>
  <ons-speed-dial-item>
    B
  </ons-speed-dial-item>
  <ons-speed-dial-item>
    C
  </ons-speed-dial-item>
  <ons-speed-dial-item>
    D
  </ons-speed-dial-item>
</ons-speed-dial>

Changing the position and direction

Just like with the <ons-fab> element the position can be changed using the position attribute. Normally the value is bottom right.

It is also possible to configure the direction in which the menu is displayed with the direction attribute. Possible values are up, down, left and right.

<ons-speed-dial
  position="bottom right"
  direction="up">
  ...
</ons-speed-dial>

関連情報

名前 型 / デフォルト値 概要
modifier String このコンポーネントの表現を指定します。 Optional.
ripple If this attribute is defined, the button will have a ripple effect when tapped. (翻訳中) Optional.
position String

この要素を表示する左右と上下の位置を指定します。 例えば、右上に表示する場合には”right top”を指定します。 左右と上下の位置の指定には、rightとleft、topとbottomがそれぞれ指定できます。

Optional.
direction String 要素が表示する方向を指定します。up, down, left, rightが指定できます。 Optional.
disabled 無効化する場合に指定します。 Optional.
open Boolean Returns whether the menu is open or not. (翻訳中) Optional.
var String このスピードダイアルを参照するための変数名をしてします。 Optional. 初期化時のみ有効
ons-open Expression “open”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-close Expression “close”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
名前 概要
ripple If this property is defined, the button will have a ripple effect when tapped. (翻訳中)
disabled 無効化されている場合にtrue
inline インライン要素の場合にtrue
visible 要素が見える場合にtrue
open Returns whether the menu is open or not. (翻訳中)
シグネチャ 概要
show() Speed dialを表示します。
hide() Speed dialを非表示にします。
showItems() Speed dialの子要素を表示します。
hideItems() Speed dialの子要素を非表示にします。
isOpen() Returns whether the menu is open or not. (翻訳中)
toggle() Speed dialの表示非表示を切り替えます。
toggleItems() Speed dialの子要素の表示非表示を切り替えます。
once(eventName, listener) 一度だけ呼び出されるイベントリスナを追加します。
off(eventName, [listener]) イベントリスナーを削除します。もしイベントリスナーが指定されなかった場合には、そのイベントに紐付いているイベントリスナーが全て削除されます。
on(eventName, listener) イベントリスナーを追加します。
show()

Speed dialを表示します。

hide()

Speed dialを非表示にします。

showItems()

Speed dialの子要素を表示します。

hideItems()

Speed dialの子要素を非表示にします。

isOpen()

Returns whether the menu is open or not. (翻訳中)

toggle()

Speed dialの表示非表示を切り替えます。

toggleItems()

Speed dialの子要素の表示非表示を切り替えます。

once(eventName, listener)

一度だけ呼び出されるイベントリスナを追加します。

パラメーター
名前 概要
eventName String イベント名を指定します。
listener Function イベントが発火した際に呼び出される関数オブジェクトを指定します。
off(eventName, [listener])

イベントリスナーを削除します。もしイベントリスナーが指定されなかった場合には、そのイベントに紐付いているイベントリスナーが全て削除されます。

パラメーター
名前 概要
eventName String イベント名を指定します。
listener Function イベントが発火した際に呼び出される関数オブジェクトを指定します。
on(eventName, listener)

イベントリスナーを追加します。

パラメーター
名前 概要
eventName String イベント名を指定します。
listener Function イベントが発火した際に呼び出される関数オブジェクトを指定します。
名前 概要
open Fired when the menu items are shown. (翻訳中)
close Fired when the menu items are hidden. (翻訳中)
open

Fired when the menu items are shown. (翻訳中)

パラメーター
名前 概要
close

Fired when the menu items are hidden. (翻訳中)

パラメーター
名前 概要

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

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