Flutter教程

ion-fab-list

概要(CONTENTS)

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

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

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'

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 true, the fab list will 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'