ion-fab-list

Contents

The ion-fab-list element is a container for multiple fab buttons. This collection of fab buttons contains actions related to the main fab button and is flung out on click. To specify what side the buttons should appear on, set the side property to 'start', 'end', 'top', 'bottom'

Usage

angular javascript react vue 
<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 } from '@ionic/react';

const Example: React.SFC<{}> = () => (

  <IonFab vertical="bottom" horizontal="end">
    <IonFabButton>Share</IonFabButton>

    <IonFabList side="top">
      <IonFabButton>Facebook</IonFabButton>
      <IonFabButton>Twitter</IonFabButton>
      <IonFabButton>Youtube</IonFabButton>
    </IonFabList>

    <IonFabList side="start">
      <IonFabButton>Vimeo</IonFabButton>
    </IonFabList>

  </IonFab>
);

export default Example
<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>

Properties

activated

Description

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

Attribute activated
Type boolean
Default false

side

Description

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

Attribute side
Type "bottom" | "end" | "start" | "top"
Default 'bottom'