v-ons-speed-dial

実例

Speed dial

The speed dial component is a Material Design component that displays a floating action button that expands into a menu when tapped. It’s useful for situations where there are several actions needs to be displayed that are of equal importance.

The menu items of the SpeedDial component are defined using the VOnsSpeedDialItem component. It also requires a VOnsFab component which represents the main button.

To define the position of the component the position property can be specified. By default it is placed in the bottom right corner which can also be achieved by setting the property to the literal string "bottom right".

In order to show or hide VOnsSpeedDial, the visible prop must be used. The items will toggle by default when clicking on the button. However, the open prop can optionally be provided in order to programatically show or hide the items. In that case, the onClick prop must be set as well in order to change the value of the open prop and keep it updated:

<v-ons-speed-dial :open="isOpen" :on-click="() => isOpen = !isOpen">...</v-ons-speed-dial>

関連情報

Prop一覧

名前 型 / デフォルト値 概要
direction String 要素が表示する方向を指定します。up, down, left, rightが指定できます。 Optional.
disabled Boolean 無効化する場合に指定します。 Optional.
modifier String このコンポーネントの表現を指定します。 Optional.
open Boolean If exists, the inner items will be shown accordingly. Must be modified on update:open event. (翻訳中) Optional.
position String

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

Optional.
ripple Boolean If this attribute is defined, the button will have a ripple effect when tapped. (翻訳中) Optional.
visible Boolean Specify the visibility of the component. (翻訳中) Optional.

イベント

名前 概要
open Fired when the menu items are shown. (翻訳中)
close Fired when the menu items are hidden. (翻訳中)
update:open Fired right after user interaction. Useful to update open prop. (翻訳中)
click Normal click event. Useful to modify the component default action (toggle items). (翻訳中)
open

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

パラメーター
名前 概要
close

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

パラメーター
名前 概要
update:open

Fired right after user interaction. Useful to update open prop. (翻訳中)

パラメーター
名前 概要
event Number New value for open prop. (翻訳中)
click

Normal click event. Useful to modify the component default action (toggle items). (翻訳中)

パラメーター
名前 概要
event Object Event object. (翻訳中)
event.preventDefault Function Avoids the default behavior. (翻訳中)

お困りですか?

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

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

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