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. | |
| 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. |
| 名前 | 概要 |
|---|---|
| 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の子要素の表示非表示を切り替えます。 |
Speed dialを表示します。
Speed dialを非表示にします。
Speed dialの子要素を表示します。
Speed dialの子要素を非表示にします。
Returns whether the menu is open or not. （翻訳中）
Speed dialの表示非表示を切り替えます。
Speed dialの子要素の表示非表示を切り替えます。
| 名前 | 概要 |
|---|---|
| open | Fired when the menu items are shown. （翻訳中） |
| close | Fired when the menu items are hidden. （翻訳中） |
Fired when the menu items are shown. （翻訳中）
| 名前 | 型 | 概要 |
|---|
Fired when the menu items are hidden. （翻訳中）
| 名前 | 型 | 概要 |
|---|
Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。
バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。
あわせて、下記の情報も参考にしてください。