ion-fab-list

Contents

ion-fab-list 要素は、複数のfab buttonのコンテナです。この一連のfab buttonには、メインのfab buttonに関連するアクションが含まれ、メインのfab buttonをクリックすると表示されます。ボタンを表示する方向を指定するためには、 side プロパティを'start', 'end', 'top', 'bottom'に設定します。

利用方法

<ion-fab vertical="bottom" horizontal="end">
  <ion-fab-button>Share</ion-fab-button>

  <ion-fab-list side="top">
    <ion-fab-button>Facebook</ion-fab-button>
    <ion-fab-button>Twitter</ion-fab-button>
    <ion-fab-button>Youtube</ion-fab-button>
  </ion-fab-list>

  <ion-fab-list side="start">
    <ion-fab-button>Vimeo</ion-fab-button>
  </ion-fab-list>

</ion-fab>
<ion-fab vertical="bottom" horizontal="end">
  <ion-fab-button>Share</ion-fab-button>

  <ion-fab-list side="top">
    <ion-fab-button>Facebook</ion-fab-button>
    <ion-fab-button>Twitter</ion-fab-button>
    <ion-fab-button>Youtube</ion-fab-button>
  </ion-fab-list>

  <ion-fab-list side="start">
    <ion-fab-button>Vimeo</ion-fab-button>
  </ion-fab-list>

</ion-fab>
import React from 'react';
import { IonFab, IonFabButton, IonFabList, IonContent, IonIcon } from '@ionic/react';

export const FabListExample: React.FunctionComponent = () => (
  <IonContent>
    <IonFab vertical="bottom" horizontal="end">
      <IonFabButton>
        <IonIcon icon="share" />
      </IonFabButton>

      <IonFabList side="top">
        <IonFabButton color="primary">
          <IonIcon icon="logo-facebook" />
        </IonFabButton>
        <IonFabButton color="primary">
          <IonIcon icon="logo-twitter" />
        </IonFabButton>
        <IonFabButton color="primary">
          <IonIcon icon="logo-youtube" />
        </IonFabButton>
      </IonFabList>

      <IonFabList side="start">
        <IonFabButton color="primary">
          <IonIcon icon="logo-vimeo" />
        </IonFabButton>
      </IonFabList>
    </IonFab>
  </IonContent>
);
<template>
  <ion-fab vertical="bottom" horizontal="end">
    <ion-fab-button>Share</ion-fab-button>

    <ion-fab-list side="top">
      <ion-fab-button>Facebook</ion-fab-button>
      <ion-fab-button>Twitter</ion-fab-button>
      <ion-fab-button>Youtube</ion-fab-button>
    </ion-fab-list>

    <ion-fab-list side="start">
      <ion-fab-button>Vimeo</ion-fab-button>
    </ion-fab-list>

  </ion-fab>
</template>

プロパティ

activated

Description

If true, the fab list will show all fab buttons in the list.

Attributeactivated
Typeboolean
Defaultfalse

side

Description

The side the fab list will show on relative to the main fab button.

Attributeside
Type"bottom" | "end" | "start" | "top"
Default'bottom'