Working with FAB Components

1. Using IonFab Component

Property	Values	Description
slot	`bottom` \| `top` \| `start` \| `end`	Position of the FAB relative to the content
edge	`true` \| `false`	Whether the FAB is positioned at the edge of the screen
verticalAlign	`top` \| `center` \| `bottom`	Vertical alignment of the FAB
horizontalAlign	`start` \| `center` \| `end`	Horizontal alignment of the FAB

Example: Basic IonFab Usage

<ion-fab slot="bottom" edge="true">
  <ion-fab-button>
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

Example: FAB with Multiple Actions

<ion-fab slot="bottom" edge="true">
  <ion-fab-button>
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="top">
    <ion-fab-button>
      <ion-icon name="share"></ion-icon>
    </ion-fab-button>
    <ion-fab-button>
      <ion-icon name="heart"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
</ion-fab>

Note: The edge property is useful for positioning the FAB at the very edge of the screen, particularly in combination with slot="bottom" or slot="top".

2. Creating FAB Button

Property	Description	Default	Notes
size	Sets the size of the FAB button	medium	Can be: small, medium, large
color	Defines the color of the FAB button	primary	Can be any Ionic color: primary, secondary, success, warning, danger, light, dark
mode	Defines the mode of the FAB button	ios	Can be: ios, md (Material Design)
disabled	Disables the FAB button if set to true	false	Boolean value
expanded	Expands the FAB button to full width	false	Boolean value

Example: Basic FAB Button

<ion-fab>
  <ion-fab-button>
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

Example: FAB Button with Size and Color

<ion-fab>
  <ion-fab-button size="small" color="secondary">
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

Example: FAB Button with Expanded

<ion-fab>
  <ion-fab-button expanded="true">
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

3. Implementing FAB List

Property	Description	Values	Notes
size	Sets the size of the FAB list	`small`, `medium`, `large`	Default is `medium`
position	Defines the position of the FAB list	`top-left`, `top-right`, `bottom-left`, `bottom-right`	Default is `bottom-right`
direction	Defines the direction of expansion	`up`, `down`, `left`, `right`	Default is `up`
open	Controls whether the FAB list is open or closed	`true`, `false`	Default is `false`

Example: Basic FAB List Implementation

<ion-fab-list [position]="'bottom-right'" [direction]="'up'">
  <ion-fab-button>
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
  <ion-fab-button>
    <ion-icon name="share"></ion-icon>
  </ion-fab-button>
  <ion-fab-button>
    <ion-icon name="heart"></ion-icon>
  </ion-fab-button>
</ion-fab-list>

Example: FAB List with Open State

<ion-fab-list [open]="true" [position]="'top-left'" [direction]="'down'">
  <ion-fab-button>
    <ion-icon name="settings"></ion-icon>
  </ion-fab-button>
  <ion-fab-button>
    <ion-icon name="person"></ion-icon>
  </ion-fab-button>
</ion-fab-list>

4. Configuring FAB Position

Property	Values	Description
position	`'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`	Defines the position of the FAB button on the screen

Example: FAB Position Configuration

<ion-fab position="bottom-right">
  <ion-fab-button>
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

Note: The position property can be set to any of the four standard corners of the screen.

5. Setting FAB Edge

Property	Values	Description
edge	`'start'` \| `'end'`	Sets the edge position of the FAB relative to the screen edge. Defaults to `'start'`.

Example: Setting FAB Edge

<ion-fab edge="end">
  <ion-fab-button>
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

6. Using Activated FAB

Property	Values	Description
activated	`false`	Controls whether the FAB is activated (visible)
size	`medium`, `small`	Sets the size of the FAB button
color	`primary`, `secondary`, `danger`	Defines the color theme of the FAB

Example: Activated FAB Usage

<ion-fab activated="true">
  <ion-fab-button color="primary">
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

Note: The activated property can be toggled dynamically using Angular or React state management.

7. Adding FAB Side

Adding a FAB (Floating Action Button) to the side of your Ionic application involves using the ion-fab component along with positioning attributes.

Property	Values	Description
position	`top`, `bottom`, `left`, `right`	Determines the side where the FAB will be positioned.
edge	`true`, `false`	When set to true, aligns the FAB with the edge of the screen.

Example: Adding FAB on the Right Side

<ion-content>
  <ion-fab position="bottom" edge="true">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

8. Using FAB Icons

Icon	Description	Usage	Notes
`add`	Add new item	`<ion-fab-button><ion-icon name="add"></ion-icon></ion-fab-button>`	Default icon for adding items
`close`	Close action	`<ion-fab-button><ion-icon name="close"></ion-icon></ion-fab-button>`	Used to close modals or panels
`arrow-back`	Navigate back	`<ion-fab-button><ion-icon name="arrow-back"></ion-icon></ion-fab-button>`	Standard back navigation icon
`arrow-forward`	Navigate forward	`<ion-fab-button><ion-icon name="arrow-forward"></ion-icon></ion-fab-button>`	Standard forward navigation icon
`home`	Go to home screen	`<ion-fab-button><ion-icon name="home"></ion-icon></ion-fab-button>`	Commonly used for returning to main view
`settings`	Open settings panel	`<ion-fab-button><ion-icon name="settings"></ion-icon></ion-fab-button>`	Used for accessing app configuration
`person`	User profile	`<ion-fab-button><ion-icon name="person"></ion-icon></ion-fab-button>`	Typically used for user account actions
`search`	Initiate search	`<ion-fab-button><ion-icon name="search"></ion-icon></ion-fab-button>`	Standard search icon
`heart`	Like or favorite	`<ion-fab-button><ion-icon name="heart"></ion-icon></ion-fab-button>`	Used for marking content as favorite
`share`	Share content	`<ion-fab-button><ion-icon name="share"></ion-icon></ion-fab-button>`	Used for sharing functionality

Example: FAB with Icon

<ion-content>
  <ion-fab vertical="bottom" horizontal="end">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

Example: FAB with Custom Icon

<ion-content>
  <ion-fab vertical="top" horizontal="start">
    <ion-fab-button>
      <ion-icon name="arrow-back"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

9. Creating Mini FAB

Property	Values	Description
size	`mini`	Sets the FAB to mini size
color	`primary`, `secondary`, `danger`	Defines the color theme of the FAB

Example: Basic Mini FAB

<ion-fab slot="fixed" horizontal="end" vertical="bottom">
  <ion-fab-button size="mini">
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

Example: Mini FAB with Color

<ion-fab slot="fixed" horizontal="end" vertical="bottom">
  <ion-fab-button size="mini" color="danger">
    <ion-icon name="heart"></ion-icon>
  </ion-fab-button>
</ion-fab>

10. Handling FAB Click

Property	Description	Values
click	Event emitted when the FAB is clicked	`EventEmitter`

Example: Handling FAB Click Event

<ion-fab (click)="handleFabClick()">
  <ion-fab-button>
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

Example: FAB Click Handler in Component

handleFabClick() {
  console.log("FAB was clicked");
}