ion-fab-button

Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions. As the name suggests, FABs generally float over the content in a fixed position. This is not achieved exclusively by using an <ion-fab-button>FAB</ion-fab-button>. They need to be wrapped with an <ion-fab> component in order to be fixed over the content.

If the FAB button is not wrapped with <ion-fab>, it will scroll with the content. FAB buttons have a default size, a mini size and can accept different colors:

Usage

Angular

<ion-content>
  <!-- Fixed Floating Action Button that does not scroll with the content -->
  <ion-fab slot="fixed">
    <ion-fab-button>Button</ion-fab-button>
  </ion-fab>

  <!-- Default Floating Action Button that scrolls with the content.-->
  <ion-fab-button>Default</ion-fab-button>

  <!-- Mini -->
  <ion-fab-button size="small">Mini</ion-fab-button>

  <!-- Colors -->
  <ion-fab-button color="primary">Primary</ion-fab-button>
  <ion-fab-button color="secondary">Secondary</ion-fab-button>
  <ion-fab-button color="danger">Danger</ion-fab-button>
  <ion-fab-button color="light">Light</ion-fab-button>
  <ion-fab-button color="dark">Dark</ion-fab-button>
</ion-content>

Javascript

<ion-content>
  <!-- Fixed Floating Action Button that does not scroll with the content -->
  <ion-fab slot="fixed">
    <ion-fab-button>Button</ion-fab-button>
  </ion-fab>

  <!-- Default Floating Action Button that scrolls with the content.-->
  <ion-fab-button>Default</ion-fab-button>

  <!-- Mini -->
  <ion-fab-button size="small">Mini</ion-fab-button>

  <!-- Colors -->
  <ion-fab-button color="primary">Primary</ion-fab-button>
  <ion-fab-button color="secondary">Secondary</ion-fab-button>
  <ion-fab-button color="danger">Danger</ion-fab-button>
  <ion-fab-button color="light">Light</ion-fab-button>
  <ion-fab-button color="dark">Dark</ion-fab-button>
</ion-content>

React

import React from 'react';
import { IonContent, IonFab, IonFabButton } from '@ionic/react';

export const FabButtonExample: React.FC = () => (
  <IonContent>
    {/*-- Fixed Floating Action Button that does not scroll with the content --*/}
    <IonFab slot="fixed">
      <IonFabButton>Button</IonFabButton>
    </IonFab>

    {/*-- Default Floating Action Button that scrolls with the content.--*/}
    <IonFabButton>Default</IonFabButton>

    {/*-- Mini --*/}
    <IonFabButton size="small">Mini</IonFabButton>

    {/*-- Colors --*/}
    <IonFabButton color="primary">Primary</IonFabButton>
    <IonFabButton color="secondary">Secondary</IonFabButton>
    <IonFabButton color="danger">Danger</IonFabButton>
    <IonFabButton color="light">Light</IonFabButton>
    <IonFabButton color="dark">Dark</IonFabButton>
  </IonContent>
);

Stencil

import { Component, h } from '@stencil/core';

@Component({
  tag: 'fab-button-example',
  styleUrl: 'fab-button-example.css',
})
export class FabButtonExample {
  render() {
    return [
      <ion-content>
        {/* Fixed Floating Action Button that does not scroll with the content */}
        <ion-fab slot="fixed">
          <ion-fab-button>Button</ion-fab-button>
        </ion-fab>

        {/* Default Floating Action Button that scrolls with the content */}
        <ion-fab-button>Default</ion-fab-button>

        {/* Mini */}
        <ion-fab-button size="small">Mini</ion-fab-button>

        {/* Colors */}
        <ion-fab-button color="primary">Primary</ion-fab-button>
        <ion-fab-button color="secondary">Secondary</ion-fab-button>
        <ion-fab-button color="danger">Danger</ion-fab-button>
        <ion-fab-button color="light">Light</ion-fab-button>
        <ion-fab-button color="dark">Dark</ion-fab-button>
      </ion-content>,
    ];
  }
}

Vue

<template>
  <ion-content>
    <!-- Fixed Floating Action Button that does not scroll with the content -->
    <ion-fab slot="fixed">
      <ion-fab-button>Button</ion-fab-button>
    </ion-fab>

    <!-- Default Floating Action Button that scrolls with the content.-->
    <ion-fab-button>Default</ion-fab-button>

    <!-- Mini -->
    <ion-fab-button size="small">Mini</ion-fab-button>

    <!-- Colors -->
    <ion-fab-button color="primary">Primary</ion-fab-button>
    <ion-fab-button color="secondary">Secondary</ion-fab-button>
    <ion-fab-button color="danger">Danger</ion-fab-button>
    <ion-fab-button color="light">Light</ion-fab-button>
    <ion-fab-button color="dark">Dark</ion-fab-button>
  </ion-content>
</template>

<script>
  import { IonContent, IonFab, IonFabButton } from '@ionic/vue';
  import { defineComponent } from 'vue';

  export default defineComponent({
    components: { IonContent, IonFab, IonFabButton },
  });
</script>

Properties

activated

Description	trueの場合、ファブボタンにクローズアイコンを表示します。
Attribute	activated
Type	boolean
Default	false

closeIcon

Description	The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list.
Attribute	close-icon
Type	string
Default	'close'

color

Description	The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attribute	color
Type	string ｜ undefined
Default	undefined

disabled

Description	trueの場合、ユーザーはファブボタンを操作することができません。
Attribute	disabled
Type	boolean
Default	false

download

Description	This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
Attribute	download
Type	string ｜ undefined
Default	undefined

href

Description	Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Attribute	href
Type	string ｜ undefined
Default	undefined

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

rel

Description	Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
Attribute	rel
Type	string ｜ undefined
Default	undefined

routerAnimation

Description	When using a router, it specifies the transition animation when navigating to another page using href.
Attribute	undefined
Type	((baseEl: any, opts?: any) => Animation) ｜ undefined
Default	undefined

routerDirection

Description	When using a router, it specifies the transition direction when navigating to another page using href.
Attribute	router-direction
Type	"back" ｜ "forward" ｜ "root"
Default	'forward'

show

Description	trueの場合、fabボタンがfab-listにあるときに表示されます。
Attribute	show
Type	boolean
Default	false

size

Description	ボタンの大きさを指定します。ミニファブボタンを作るには、smallに設定します。
Attribute	size
Type	"small" ｜ undefined
Default	undefined

target

Description	Specifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top".
Attribute	target
Type	string ｜ undefined
Default	undefined

translucent

Description	If true, the fab button will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.
Attribute	translucent
Type	boolean
Default	false

type

Description	ボタンの種類です。
Attribute	type
Type	"button" ｜ "reset" ｜ "submit"
Default	'button'

Events

Name	Description
ionBlur	ボタンのフォーカスが外れたときに発行されます。
ionFocus	ボタンにフォーカスが当たっているときに発行されます。

Methods

No public methods available for this component.

CSS Shadow Parts

Name	Description
close-icon	ファブリストを開いたときに表示されるクローズアイコン（ion-iconを使用します）。
native	すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。

CSS Custom Properties

Name	Description
--background	ボタンの背景
--background-activated	ボタンが押されたときの背景。注意：これを設定すると、Material Designの波紋に干渉します。
--background-activated-opacity	押されたときのボタンの背景の不透明度
--background-focused	タブキーでフォーカスしたときのボタンの背景
--background-focused-opacity	タブキーでフォーカスしたときのボタンの背景の不透明度
--background-hover	ホバー時のボタンの背景
--background-hover-opacity	ホバー時のボタン背景の不透明度
--border-color	ボタンのボーダーカラー
--border-radius	ボタンの境界半径
--border-style	ボタンのボーダースタイル
--border-width	ボタンのボーダー幅
--box-shadow	ボタンのボックスシャドウ
--close-icon-font-size	クローズアイコンのFont Size
--color	ボタンの文字色
--color-activated	ボタンが押されたときの文字色
--color-focused	タブキーでフォーカスしたときのボタンの文字色
--color-hover	ホバー時のボタンの文字色
--padding-bottom	ボタンのBottom Padding
--padding-end	ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。
--padding-start	ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。
--padding-top	ボタンのTop Padding
--ripple-color	ボタンリプルエフェクトの色
--transition	ボタンの遷移

Slots

No slots available for this component.