ion-fab-button

Contents

Floating Action Buttons (FABs) は、アプリケーションでの主要なアクションを表します。デフォルトでは、円形状になっています。ボタンを押すと、関連するアクションがさらに開きます。名前が示すように、FABは通常、固定された位置で内容の上に浮動します。これは、 <ion-fab-button>FAB</ion-fab-button> だけで実装することはできません。コンテンツを固定するには、 <ion-fab> コンポーネントでラップする必要があります。

FABボタンが <ion-fab> で囲まれていない場合は、content とともにスクロールします。FABボタンには、default size と mini size があり、異なるcolorを使用できます:

利用方法

<ion-content>

  <!-- Fixed Floating Action Button that does not scroll with the content -->
  <ion-fab>
    <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>
<ion-content>

  <!-- Fixed Floating Action Button that does not scroll with the content -->
  <ion-fab>
    <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>
import React from 'react';
import { IonContent, IonFab, IonFabButton } from '@ionic/react';

export const FabButtonExample: React.FunctionComponent = () => (
  <IonContent>
    {/*-- Fixed Floating Action Button that does not scroll with the content --*/}
    <IonFab>
      <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>
);
<template>
  <ion-content>

    <!-- Fixed Floating Action Button that does not scroll with the content -->
    <ion-fab>
      <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>

プロパティ

activated

Description

If true, the fab button will be show a close icon.

Attributeactivated
Typeboolean
Defaultfalse

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.

Attributecolor
Typestring | undefined

disabled

Description

If true, the user cannot interact with the fab button.

Attributedisabled
Typeboolean
Defaultfalse

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).

Attributedownload
Typestring | 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.

Attributehref
Typestring | undefined

mode

Description

The mode determines which platform styles to use.

Attributemode
Type"ios" | "md"

rel

Description

Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.

Attributerel
Typestring | undefined

routerDirection

Description

When using a router, it specifies the transition direction when navigating to another page using href.

Attributerouter-direction
Type"back" | "forward" | "root"
Default'forward'

show

Description

If true, the fab button will show when in a fab-list.

Attributeshow
Typeboolean
Defaultfalse

size

Description

The size of the button. Set this to small in order to have a mini fab.

Attributesize
Type"small" | undefined

target

Description

Specifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top".

Attributetarget
Typestring | undefined

translucent

Description

If true, the fab button will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.

Attributetranslucent
Typeboolean
Defaultfalse

type

Description

The type of the button.

Attributetype
Type"button" | "reset" | "submit"
Default'button'

イベント

NameDescription
ionBlurEmitted when the button loses focus.
ionFocusEmitted when the button has focus.

CSSカスタムプロパティ

NameDescription
--backgroundBackground of the button
--background-activatedBackground of the button when pressed
--background-focusedBackground of the button when focused with the tab key
--background-hoverBackground of the button on hover
--border-colorBorder color of the button
--border-radiusBorder radius of the button
--border-styleBorder style of the button
--border-widthBorder width of the button
--box-shadowBox shadow of the button
--colorText color of the button
--color-activatedText color of the button when pressed
--color-focusedText color of the button when focused with the tab key
--color-hoverText color of the button on hover
--padding-bottomBottom padding of the button
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the button
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the button
--padding-topTop padding of the button
--ripple-colorColor of the button ripple effect
--transitionTransition of the button