Skip to content

readme.md

Latest commit

 

History

History
212 lines (159 loc) · 14.6 KB

readme.md

File metadata and controls

212 lines (159 loc) · 14.6 KB

ion-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:

Usage

Angular / javascript

<ion-content>

  <!-- Fixed Floating Action Button that does not scroll with the content -->
  <ion-fab slot="fixed">
    <ion-fab-button>Button</ion-fab-button>
  </ion-fab>

  <!-- Default Floating Action Button that scrolls with the content.-->
  <ion-fab-button>Default</ion-fab-button>

  <!-- Mini -->
  <ion-fab-button size="small">Mini</ion-fab-button>

  <!-- Colors -->
  <ion-fab-button color="primary">Primary</ion-fab-button>
  <ion-fab-button color="secondary">Secondary</ion-fab-button>
  <ion-fab-button color="danger">Danger</ion-fab-button>
  <ion-fab-button color="light">Light</ion-fab-button>
  <ion-fab-button color="dark">Dark</ion-fab-button>

</ion-content>

React

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

export const FabButtonExample: React.FC = () => (
  <IonContent>
    {/*-- Fixed Floating Action Button that does not scroll with the content --*/}
    <IonFab slot="fixed">
      <IonFabButton>Button</IonFabButton>
    </IonFab>

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

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

    {/*-- Colors --*/}
    <IonFabButton color="primary">Primary</IonFabButton>
    <IonFabButton color="secondary">Secondary</IonFabButton>
    <IonFabButton color="danger">Danger</IonFabButton>
    <IonFabButton color="light">Light</IonFabButton>
    <IonFabButton color="dark">Dark</IonFabButton>
  </IonContent>
);

Stencil

import { Component, h } from '@stencil/core';

@Component({
  tag: 'fab-button-example',
  styleUrl: 'fab-button-example.css'
})
export class FabButtonExample {
  render() {
    return [
      <ion-content>

        {/* Fixed Floating Action Button that does not scroll with the content */}
        <ion-fab slot="fixed">
          <ion-fab-button>Button</ion-fab-button>
        </ion-fab>

        {/* Default Floating Action Button that scrolls with the content */}
        <ion-fab-button>Default</ion-fab-button>

        {/* Mini */}
        <ion-fab-button size="small">Mini</ion-fab-button>

        {/* Colors */}
        <ion-fab-button color="primary">Primary</ion-fab-button>
        <ion-fab-button color="secondary">Secondary</ion-fab-button>
        <ion-fab-button color="danger">Danger</ion-fab-button>
        <ion-fab-button color="light">Light</ion-fab-button>
        <ion-fab-button color="dark">Dark</ion-fab-button>

      </ion-content>
    ];
  }
}

Vue

<template>
  <ion-content>

    <!-- Fixed Floating Action Button that does not scroll with the content -->
    <ion-fab slot="fixed">
      <ion-fab-button>Button</ion-fab-button>
    </ion-fab>

    <!-- Default Floating Action Button that scrolls with the content.-->
    <ion-fab-button>Default</ion-fab-button>

    <!-- Mini -->
    <ion-fab-button size="small">Mini</ion-fab-button>

    <!-- Colors -->
    <ion-fab-button color="primary">Primary</ion-fab-button>
    <ion-fab-button color="secondary">Secondary</ion-fab-button>
    <ion-fab-button color="danger">Danger</ion-fab-button>
    <ion-fab-button color="light">Light</ion-fab-button>
    <ion-fab-button color="dark">Dark</ion-fab-button>

  </ion-content>
</template>

Properties

Property Attribute Description Type Default
activated activated If true, the fab button will be show a close icon. boolean false
closeIcon close-icon The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list. string 'close'
color color 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. string | undefined undefined
disabled disabled If true, the user cannot interact with the fab button. boolean false
download download This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). string | undefined undefined
href href Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. string | undefined undefined
mode mode The mode determines which platform styles to use. "ios" | "md" undefined
rel rel Specifies the relationship of the target object to the link object. The value is a space-separated list of link types. string | undefined undefined
routerAnimation -- When using a router, it specifies the transition animation when navigating to another page using href. ((baseEl: any, opts?: any) => Animation) | undefined undefined
routerDirection router-direction When using a router, it specifies the transition direction when navigating to another page using href. "back" | "forward" | "root" 'forward'
show show If true, the fab button will show when in a fab-list. boolean false
size size The size of the button. Set this to small in order to have a mini fab button. "small" | undefined undefined
target target Specifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top". string | undefined undefined
translucent translucent If true, the fab button will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter. boolean false
type type The type of the button. "button" | "reset" | "submit" 'button'

Events

Event Description Type
ionBlur Emitted when the button loses focus. CustomEvent<void>
ionFocus Emitted when the button has focus. CustomEvent<void>

CSS Custom Properties

Name Description
--background Background of the button
--background-activated Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.
--background-activated-opacity Opacity of the button background when pressed
--background-focused Background of the button when focused with the tab key
--background-focused-opacity Opacity of the button background when focused with the tab key
--background-hover Background of the button on hover
--background-hover-opacity Opacity of the button background on hover
--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 pressed
--color-focused Text color of the button when focused with the tab key
--color-hover Text color of the button on hover
--padding-bottom Bottom padding of the button
--padding-end Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button
--padding-start Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
--padding-top Top padding of the button
--ripple-color Color of the button ripple effect
--transition Transition of the button

Dependencies

Depends on

Graph

graph TD;
  ion-fab-button --> ion-icon
  ion-fab-button --> ion-ripple-effect
  style ion-fab-button fill:#f9f,stroke:#333,stroke-width:4px
Loading

Built with StencilJS
⚡