<ons-speed-dial-item />

Material Designの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.

To display a normal floating action button the Fab component can be used.

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

To define the position of the component the position property is used. 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 for the SpeedDial component to be fixed when scrolling the page, it needs to be put outside the page. This can be archived by rendering it in the renderFixed function of the Page component.

<Page
  renderFixed={() => (
    <SpeedDial position='bottom right'>
      <Fab>A</Fab>
      <SpeedDialItem onClick={this.doSomething}>B</SpeedDialItem>
      <SpeedDialItem onClick={this.doSomethingElse}>C</SpeedDialItem>
    </SpeedDial>
  )} />

関連情報

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

お困りですか?

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

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

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