Question

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 <ion-fab-button>FAB</ion-fab-button> . They need to be wrapped with an <ion-fab> component in order to be fixed over the content.

If the FAB button is not wrapped with <ion-fab> , 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-fab>
  <ion-fab-button>
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

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