ion-fab

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4浮动按钮组件ion-fab对项目进行布局。ion-fab中有ionic ion-fab 用法(Usage) ,ionic ion-fab 属性(Properties) ,ionic ion-fab 内置方法(Methods)等

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)

angular javascript
<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>

ion-fab 属性(Properties)

activated

Description

If true, both the ion-fab-button and all ion-fab-list inside ion-fab will become active. That means ion-fab-button will become a close icon and ion-fab-list will become visible.

Attribute activated
Type boolean

edge

Description

If true, the fab will display on the edge of the header if vertical is "top", and on the edge of the footer if it is "bottom". Should be used with a fixed slot.

Attribute edge
Type boolean

horizontal

Description

Where to align the fab horizontally in the viewport.

Attribute horizontal
Type "center" | "end" | "start" | undefined

vertical

Description

Where to align the fab vertically in the viewport.

Attribute vertical
Type "bottom" | "center" | "top" | undefined

ion-fab 内置方法(Methods)

close

Description

Close an active FAB list container

Signature close() => void