Flutter教程

ion-fab-button

概要(CONTENTS)

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

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

Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions. As the name suggests, FABs generally float over the content in a fixed position. This is not achieved exclusively by using an FAB. They need to be wrapped with an component in order to be fixed over the content.

If the FAB button is not wrapped with , it will scroll with the content. FAB buttons have a default size, a mini size and can accept different colors:

ion-fab-button 用法(Usage)

<ion-content>

  
  <ion-fab>
    <ion-fab-button>Buttonion-fab-button>
  ion-fab>

  
  <ion-fab-button>Defaultion-fab-button>

  
  <ion-fab-button size="small">Miniion-fab-button>

  
  <ion-fab-button color="primary">Primaryion-fab-button>
  <ion-fab-button color="secondary">Secondaryion-fab-button>
  <ion-fab-button color="danger">Dangerion-fab-button>
  <ion-fab-button color="light">Lightion-fab-button>
  <ion-fab-button color="dark">Darkion-fab-button>

ion-content>
<ion-content>

  
  <ion-fab>
    <ion-fab-button>Buttonion-fab-button>
  ion-fab>

  
  <ion-fab-button>Defaultion-fab-button>

  
  <ion-fab-button size="small">Miniion-fab-button>

  
  <ion-fab-button color="primary">Primaryion-fab-button>
  <ion-fab-button color="secondary">Secondaryion-fab-button>
  <ion-fab-button color="danger">Dangerion-fab-button>
  <ion-fab-button color="light">Lightion-fab-button>
  <ion-fab-button color="dark">Darkion-fab-button>

ion-content>
import React from 'react';

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

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

    {/*-- Fixed Floating Action Button that does not scroll with the content --*/}
    <IonFab>
      <IonFabButton>ButtonIonFabButton>
    IonFab>

    {/*-- Default Floating Action Button that scrolls with the content.--*/}
    <IonFabButton>DefaultIonFabButton>

    {/*-- Mini --*/}
    <IonFabButton size="small">MiniIonFabButton>

    {/*-- Colors --*/}
    <IonFabButton color="primary">PrimaryIonFabButton>
    <IonFabButton color="secondary">SecondaryIonFabButton>
    <IonFabButton color="danger">DangerIonFabButton>
    <IonFabButton color="light">LightIonFabButton>
    <IonFabButton color="dark">DarkIonFabButton>
  IonContent>
);

export default Example
<template>
  <ion-content>

    
    <ion-fab>
      <ion-fab-button>Buttonion-fab-button>
    ion-fab>

    
    <ion-fab-button>Defaultion-fab-button>

    
    <ion-fab-button size="small">Miniion-fab-button>

    
    <ion-fab-button color="primary">Primaryion-fab-button>
    <ion-fab-button color="secondary">Secondaryion-fab-button>
    <ion-fab-button color="danger">Dangerion-fab-button>
    <ion-fab-button color="light">Lightion-fab-button>
    <ion-fab-button color="dark">Darkion-fab-button>

  ion-content>
template>

ion-fab-button 属性(Properties)

activated

Description

If true, the fab button will be show a close icon.

Attribute activated
Type boolean
Default false

color

Description

The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.

Attribute color
Type string | undefined

disabled

Description

If true, the user cannot interact with the fab button.

Attribute disabled
Type boolean
Default false

href

Description

Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.

Attribute href
Type string | undefined

mode

Description

The mode determines which platform styles to use.

Attribute mode
Type "ios" | "md"

routerDirection

Description

When using a router, it specifies the transition direction when navigating to another page using href.

Attribute router-direction
Type "back" | "forward" | "root"
Default 'forward'

show

Description

If true, the fab button will show when in a fab-list.

Attribute show
Type boolean
Default false

size

Description

The size of the button. Set this to small in order to have a mini fab.

Attribute size
Type "small" | undefined

translucent

Description

If true, the fab button will be translucent.

Attribute translucent
Type boolean
Default false

type

Description

The type of the button.

Attribute type
Type "button" | "reset" | "submit"
Default 'button'

ion-fab-button 事件(Events)

Name Description
ionBlur Emitted when the button loses focus.
ionFocus Emitted when the button has focus.

ion-fab-button中的CSS 自定义属性

Name Description
--background Background of the button
--background-activated Background of the button when activated
--background-focused Background of the button when focused
--border-color Border color of the button
--border-radius Border radius of the button
--border-style Border style of the button
--border-width Border width of the button
--box-shadow Box shadow of the button
--color Text color of the button
--color-activated Text color of the button when activated
--color-focused Text color of the button when focused
--padding-bottom Padding bottom of the button
--padding-end Padding end of the button
--padding-start Padding start of the button
--padding-top Padding top of the button
--ripple-color Color of the button ripple effect
--transition Transition of the button