ion-fab-list
Ionic4项目中我们可以使用Ionic4浮动按钮组件ion-fab-list对项目进行布局。 ion-fab-list官方文档地址:https://ionicframework.com/docs/api/fab-listThe 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'
ion-fab-list 用法(Usage)
<ion-fab vertical="bottom" horizontal="end">
<ion-fab-button>Shareion-fab-button>
<ion-fab-list side="top">
<ion-fab-button>Facebookion-fab-button>
<ion-fab-button>Twitterion-fab-button>
<ion-fab-button>Youtubeion-fab-button>
ion-fab-list>
<ion-fab-list side="start">
<ion-fab-button>Vimeoion-fab-button>
ion-fab-list>
ion-fab>
<ion-fab vertical="bottom" horizontal="end">
<ion-fab-button>Shareion-fab-button>
<ion-fab-list side="top">
<ion-fab-button>Facebookion-fab-button>
<ion-fab-button>Twitterion-fab-button>
<ion-fab-button>Youtubeion-fab-button>
ion-fab-list>
<ion-fab-list side="start">
<ion-fab-button>Vimeoion-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>ShareIonFabButton>
<IonFabList side="top">
<IonFabButton>FacebookIonFabButton>
<IonFabButton>TwitterIonFabButton>
<IonFabButton>YoutubeIonFabButton>
IonFabList>
<IonFabList side="start">
<IonFabButton>VimeoIonFabButton>
IonFabList>
IonFab>
);
export default Example
<template>
<ion-fab vertical="bottom" horizontal="end">
<ion-fab-button>Shareion-fab-button>
<ion-fab-list side="top">
<ion-fab-button>Facebookion-fab-button>
<ion-fab-button>Twitterion-fab-button>
<ion-fab-button>Youtubeion-fab-button>
ion-fab-list>
<ion-fab-list side="start">
<ion-fab-button>Vimeoion-fab-button>
ion-fab-list>
ion-fab>
template>
ion-fab-list 属性(Properties)
activated | |
---|---|
Description | If |
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' |