JavaScript Reference > ons-fab

ons-fab

実例

Floating action button

The Floating action button is a UI component introduced in Material Design. It is used to represent the primary action of an app.

In Onsen UI the Floating action button can be displayed using the <ons-fab> element.

<ons-fab>
  <ons-icon
    icon="md-plus">
  </ons-icon>
</ons-fab>

Changing the position

By default the component is displayed as an inline element. By using the position attribute it can be placed in one of the corners. The most common value is bottom right since that’s where it’s usually positioned in Android native apps.

<ons-fab position="bottom right">
  ...
</ons-fab>

Hiding in iOS

By default the <ons-fab> will be rendered in both iOS and Android. However, in most cases it should not be displayed in iOS but instead the same action should be tied to some other UI component.

To only display it in Android, the <ons-if> element can be used.

<ons-if platform="android">
  <ons-fab>
    ...
  </ons-fab>
</ons-if>

You can try adding the <ons-if> element in the code and switch between iOS and Android.

関連情報

属性

[編集]
名前 型 / デフォルト値 概要
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。

プリセットのmodifier

[編集]
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()

Show the floating action button. （翻訳中）

hide()

Hide the floating action button. （翻訳中）

toggle()

Toggle the visibility of the button. （翻訳中）

お困りですか?

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

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

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