ion-fab
Ionic4项目中我们可以使用Ionic4浮动按钮组件ion-fab对项目进行布局。 ion-fab官方文档地址:https://ionicframework.com/docs/api/fabFabs 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
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