ion-fab

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4浮动按钮组件ion-fab对项目进行布局。

ion-fab官方文档地址:https://ionicframework.com/docs/api/fab

Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. Fab should have one main fab-button. Fabs can also contain fab-lists which contain related buttons that show when the main fab button is clicked. The same fab container can contain several fab-list elements with different side values.

ion-fab 用法(Usage)

<ion-content>
  
  <ion-fab vertical="top" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add">ion-icon>
    ion-fab-button>
  ion-fab>

  
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="arrow-dropleft">ion-icon>
    ion-fab-button>
  ion-fab>

  
  <ion-fab vertical="top" horizontal="start" slot="fixed">
    <ion-fab-button>
      <ion-icon name="arrow-dropright">ion-icon>
    ion-fab-button>
  ion-fab>

  
  <ion-fab vertical="bottom" horizontal="start" slot="fixed">
    <ion-fab-button>
      <ion-icon name="arrow-dropup">ion-icon>
    ion-fab-button>
  ion-fab>

  
  <ion-fab vertical="center" horizontal="start" slot="fixed">
    <ion-fab-button>
      <ion-icon name="share">ion-icon>
    ion-fab-button>
  ion-fab>

  
  <ion-fab vertical="center" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add">ion-icon>
    ion-fab-button>
  ion-fab>

  
  <ion-fab vertical="top" horizontal="end" edge slot="fixed">
    <ion-fab-button>
      <ion-icon name="person">ion-icon>
    ion-fab-button>
  ion-fab>

  
  <ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
    <ion-fab-button>
      <ion-icon name="settings">ion-icon>
    ion-fab-button>
    <ion-fab-list side="end">
      <ion-fab-button><ion-icon name="logo-vimeo">ion-icon>ion-fab-button>
    ion-fab-list>
  ion-fab>

  
  <ion-fab vertical="center" horizontal="center" slot="fixed">
    <ion-fab-button>
      <ion-icon name="share">ion-icon>
    ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button><ion-icon name="logo-vimeo">ion-icon>ion-fab-button>
    ion-fab-list>
    <ion-fab-list side="bottom">
      <ion-fab-button><ion-icon name="logo-facebook">ion-icon>ion-fab-button>
    ion-fab-list>
    <ion-fab-list side="start">
      <ion-fab-button><ion-icon name="logo-instagram">ion-icon>ion-fab-button>
    ion-fab-list>
    <ion-fab-list side="end">
      <ion-fab-button><ion-icon name="logo-twitter">ion-icon>ion-fab-button>
    ion-fab-list>
  ion-fab>
ion-content>
<ion-content>
  
  <ion-fab vertical="top" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add">ion-icon>
    ion-fab-button>
  ion-fab>

  
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="arrow-dropleft">ion-icon>
    ion-fab-button>
  ion-fab>

  
  <ion-fab vertical="top" horizontal="start" slot="fixed">
    <ion-fab-button>
      <ion-icon name="arrow-dropright">ion-icon>
    ion-fab-button>
  ion-fab>

  
  <ion-fab vertical="bottom" horizontal="start" slot="fixed">
    <ion-fab-button>
      <ion-icon name="arrow-dropup">ion-icon>
    ion-fab-button>
  ion-fab>

  
  <ion-fab vertical="center" horizontal="start" slot="fixed">
    <ion-fab-button>
      <ion-icon name="share">ion-icon>
    ion-fab-button>
  ion-fab>

  
  <ion-fab vertical="center" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add">ion-icon>
    ion-fab-button>
  ion-fab>

  
  <ion-fab vertical="top" horizontal="end" edge slot="fixed">
    <ion-fab-button>
      <ion-icon name="person">ion-icon>
    ion-fab-button>
  ion-fab>

  
  <ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
    <ion-fab-button>
      <ion-icon name="settings">ion-icon>
    ion-fab-button>
    <ion-fab-list side="end">
      <ion-fab-button><ion-icon name="logo-vimeo">ion-icon>ion-fab-button>
    ion-fab-list>
  ion-fab>

  
  <ion-fab vertical="center" horizontal="center" slot="fixed">
    <ion-fab-button>
      <ion-icon name="share">ion-icon>
    ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button><ion-icon name="logo-vimeo">ion-icon>ion-fab-button>
    ion-fab-list>
    <ion-fab-list side="bottom">
      <ion-fab-button><ion-icon name="logo-facebook">ion-icon>ion-fab-button>
    ion-fab-list>
    <ion-fab-list side="start">
      <ion-fab-button><ion-icon name="logo-instagram">ion-icon>ion-fab-button>
    ion-fab-list>
    <ion-fab-list side="end">
      <ion-fab-button><ion-icon name="logo-twitter">ion-icon>ion-fab-button>
    ion-fab-list>
  ion-fab>
ion-content>
import React from 'react';

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

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

  <IonContent>
    {/*-- fab placed to the top end --*/}
    <IonFab vertical="top" horizontal="end" slot="fixed">
      <IonFabButton>
        <IonIcon name="add" />
      IonFabButton>
    IonFab>

    {/*-- fab placed to the bottom end --*/}
    <IonFab vertical="bottom" horizontal="end" slot="fixed">
      <IonFabButton>
        <IonIcon name="arrow-dropleft" />
      IonFabButton>
    IonFab>

    {/*-- fab placed to the top start --*/}
    <IonFab vertical="top" horizontal="start" slot="fixed">
      <IonFabButton>
        <IonIcon name="arrow-dropright" />
      IonFabButton>
    IonFab>

    {/*-- fab placed to the bottom start --*/}
    <IonFab vertical="bottom" horizontal="start" slot="fixed">
      <IonFabButton>
        <IonIcon name="arrow-dropup" />
      IonFabButton>
    IonFab>

    {/*-- fab placed to the (vertical) center and start --*/}
    <IonFab vertical="center" horizontal="start" slot="fixed">
      <IonFabButton>
        <IonIcon name="share" />
      IonFabButton>
    IonFab>

    {/*-- fab placed to the (vertical) center and end --*/}
    <IonFab vertical="center" horizontal="end" slot="fixed">
      <IonFabButton>
        <IonIcon name="add" />
      IonFabButton>
    IonFab>

    {/*-- fab placed to the top and end and on the top edge of the content overlapping header --*/}
    <IonFab vertical="top" horizontal="end" edge slot="fixed">
      <IonFabButton>
        <IonIcon name="person" />
      IonFabButton>
    IonFab>

    {/*-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right --*/}
    <IonFab vertical="bottom" horizontal="start" edge slot