The Floating action button is a Material Design component that displays a circular button. It is normally displayed in the lower right corner and is used to represent the primary action of the app.
It is displayed using the Fab component. To specify the position the position prop is used. To put an icon inside the button the Icon component can be used.
<Fab position='bottom right'>
<Icon icon="md-face" />
</Fab>
In order for the Fab 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={() => <Fab />} />
| 名前 | 型 / デフォルト値 | 概要 |
|---|---|---|
| modifier | String | ボタンの表現を指定します。 Optional. |
| ripple | If this attribute is defined, the button will have a ripple effect when tapped. （翻訳中） Optional. | |
| position | String |
The position of the button. Should be a string like "bottom right" or "top left". If this attribute is not defined it will be displayed as an inline element.
（翻訳中）
Optional.
|
| disabled | ボタンを無効化する場合は指定します。 Optional. |
| 名前 | 概要 |
|---|---|
| ripple | If this property is defined, the button will have a ripple effect when tapped. （翻訳中） |
| disabled |
無効化されている場合にtrue。
|
| visible |
要素が見える場合にtrue。
|
| Name | 概要 |
|---|---|
| mini |
Makes the ons-fab smaller.
（翻訳中）
|
| シグネチャ | 概要 |
|---|---|
| show() | Show the floating action button. （翻訳中） |
| hide() | Hide the floating action button. （翻訳中） |
| toggle() | Toggle the visibility of the button. （翻訳中） |
Show the floating action button. （翻訳中）
Hide the floating action button. （翻訳中）
Toggle the visibility of the button. （翻訳中）
Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。
バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。
あわせて、下記の情報も参考にしてください。