javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
eb57723785ce5b05585bf48bf9c8ae1b62235ba2
ionic-framework/core/src/components/fab
History
Brandy Carney 94159291b2 feat(components): improve button states and add new css properties (#19440) 
Before users had to know the exact opacity that the MD/iOS spec called for in order to change the hover or focused background color. This allows them to change the background without having to know the opacity. 

- changes apply to Action Sheet (Buttons), Back Button, Button, FAB Button, Item, Menu Button, Segment Button, Tab Button
- greatly reduces the requirement by users to set the background hover, focused states for dark modes and custom themes, also eliminates the need to know what the hover opacity is for each based on the spec
- updates the MD dark theme per their spec
- adds a component guide for internal use changing Ionic components

references #18279 fixes #20213 fixes #19965

BREAKING CHANGE:

*Activated Class*

The `activated` class that is automatically added to buttons on press has been renamed to `ion-activated`. This will be more consistent with our `ion-focused` class we add and also will reduce conflicts with user's CSS.

*CSS Variables*

The `--background-hover`, `--background-focused` and `--background-activated` CSS variables on components that render native buttons will now have an opacity automatically set. If you are setting any of these like the following:

```
--background-hover: rgba(44, 44, 44, 0.08);
```

You will likely not see a hover state anymore. It should be updated to only set the desired color:

```
--background-hover: rgba(44, 44, 44);
```

If the opacity desired is something other than what the spec asks for, use:

```
--background-hover: rgba(44, 44, 44);
--background-hover-opacity: 1;
```
2020-01-23 16:57:47 -05:00
..
test
feat(components): improve button states and add new css properties (#19440)
2020-01-23 16:57:47 -05:00
usage
fix(icons): fix the ellipsis fill in ionicons (#20137)
2020-01-03 12:19:17 -05:00
fab.scss
fix(all): safe margins for fab, item-header, tabbar
2018-09-26 20:56:09 +02:00
fab.tsx
refactor(all): updating to newest stencil apis (#18578)
2019-06-23 11:26:42 +02:00
fab.vars.scss
chore(stylelint): remove sass-lint/scss-lint in favor of stylelint
2018-07-19 15:10:30 -05:00
readme.md
fix(icons): fix the ellipsis fill in ionicons (#20137)
2020-01-03 12:19:17 -05:00

readme.md

ion-fab

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.

Usage

Angular / javascript

<ion-content>
  <!-- fab placed to the top end -->
  <ion-fab vertical="top" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <!-- fab placed to the bottom end -->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="arrow-forward-circle"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <!-- fab placed to the top start -->
  <ion-fab vertical="top" horizontal="start" slot="fixed">
    <ion-fab-button>
      <ion-icon name="arrow-back-circle"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <!-- fab placed to the bottom start -->
  <ion-fab vertical="bottom" horizontal="start" slot="fixed">
    <ion-fab-button>
      <ion-icon name="arrow-up-circle"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <!-- fab placed to the (vertical) center and start -->
  <ion-fab vertical="center" horizontal="start" slot="fixed">
    <ion-fab-button>
      <ion-icon name="share"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <!-- fab placed to the (vertical) center and end -->
  <ion-fab vertical="center" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <!-- fab placed to the top and end and on the top edge of the content overlapping header -->
  <ion-fab vertical="top" horizontal="end" edge slot="fixed">
    <ion-fab-button>
      <ion-icon name="person"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <!-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right -->
  <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>

  <!-- fab placed in the center of the content with a list on each side -->
  <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>

React

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

export const FabExample: React.FC = () => (
  <IonContent>
    {/*-- fab placed to the top end --*/}
    <IonFab vertical="top" horizontal="end" slot="fixed">
      <IonFabButton>
        <IonIcon name="add" />
      </IonFabButton>
    </IonFab>

    {/*-- fab placed to the bottom end --*/}
    <IonFab vertical="bottom" horizontal="end" slot="fixed">
      <IonFabButton>
        <IonIcon name="arrow-forward-circle" />
      </IonFabButton>
    </IonFab>

    {/*-- fab placed to the top start --*/}
    <IonFab vertical="top" horizontal="start" slot="fixed">
      <IonFabButton>
        <IonIcon name="arrow-back-circle" />
      </IonFabButton>
    </IonFab>

    {/*-- fab placed to the bottom start --*/}
    <IonFab vertical="bottom" horizontal="start" slot="fixed">
      <IonFabButton>
        <IonIcon name="arrow-up-circle" />
      </IonFabButton>
    </IonFab>

    {/*-- fab placed to the (vertical) center and start --*/}
    <IonFab vertical="center" horizontal="start" slot="fixed">
      <IonFabButton>
        <IonIcon name="share" />
      </IonFabButton>
    </IonFab>

    {/*-- fab placed to the (vertical) center and end --*/}
    <IonFab vertical="center" horizontal="end" slot="fixed">
      <IonFabButton>
        <IonIcon name="add" />
      </IonFabButton>
    </IonFab>

    {/*-- fab placed to the top and end and on the top edge of the content overlapping header --*/}
    <IonFab vertical="top" horizontal="end" edge slot="fixed">
      <IonFabButton>
        <IonIcon name="person" />
      </IonFabButton>
    </IonFab>

    {/*-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right --*/}
    <IonFab vertical="bottom" horizontal="start" edge slot="fixed">
      <IonFabButton>
        <IonIcon name="settings" />
      </IonFabButton>
      <IonFabList side="end">
        <IonFabButton><IonIcon name="logo-vimeo" /></IonFabButton>
      </IonFabList>
    </IonFab>

    {/*-- fab placed in the center of the content with a list on each side --*/}
    <IonFab vertical="center" horizontal="center" slot="fixed">
      <IonFabButton>
        <IonIcon name="share" />
      </IonFabButton>
      <IonFabList side="top">
        <IonFabButton><IonIcon name="logo-vimeo" /></IonFabButton>
      </IonFabList>
      <IonFabList side="bottom">
        <IonFabButton><IonIcon name="logo-facebook" /></IonFabButton>
      </IonFabList>
      <IonFabList side="start">
        <IonFabButton><IonIcon name="logo-instagram" /></IonFabButton>
      </IonFabList>
      <IonFabList side="end">
        <IonFabButton><IonIcon name="logo-twitter" /></IonFabButton>
      </IonFabList>
    </IonFab>
  </IonContent>
);

Vue

<template>
  <ion-content>
    <!-- fab placed to the top end -->
    <ion-fab vertical="top" horizontal="end" slot="fixed">
      <ion-fab-button>
        <ion-icon name="add"></ion-icon>
      </ion-fab-button>
    </ion-fab>

    <!-- fab placed to the bottom end -->
    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
      <ion-fab-button>
        <ion-icon name="arrow-forward-circle"></ion-icon>
      </ion-fab-button>
    </ion-fab>

    <!-- fab placed to the top start -->
    <ion-fab vertical="top" horizontal="start" slot="fixed">
      <ion-fab-button>
        <ion-icon name="arrow-back-circle"></ion-icon>
      </ion-fab-button>
    </ion-fab>

    <!-- fab placed to the bottom start -->
    <ion-fab vertical="bottom" horizontal="start" slot="fixed">
      <ion-fab-button>
        <ion-icon name="arrow-up-circle"></ion-icon>
      </ion-fab-button>
    </ion-fab>

    <!-- fab placed to the (vertical) center and start -->
    <ion-fab vertical="center" horizontal="start" slot="fixed">
      <ion-fab-button>
        <ion-icon name="share"></ion-icon>
      </ion-fab-button>
    </ion-fab>

    <!-- fab placed to the (vertical) center and end -->
    <ion-fab vertical="center" horizontal="end" slot="fixed">
      <ion-fab-button>
        <ion-icon name="add"></ion-icon>
      </ion-fab-button>
    </ion-fab>

    <!-- fab placed to the top and end and on the top edge of the content overlapping header -->
    <ion-fab vertical="top" horizontal="end" edge slot="fixed">
      <ion-fab-button>
        <ion-icon name="person"></ion-icon>
      </ion-fab-button>
    </ion-fab>

    <!-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right -->
    <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>

    <!-- fab placed in the center of the content with a list on each side -->
    <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>
</template>

Properties

Property Attribute Description Type Default
activated activated 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. boolean false
edge edge 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. boolean false
horizontal horizontal Where to align the fab horizontally in the viewport. "center" | "end" | "start" | undefined undefined
vertical vertical Where to align the fab vertically in the viewport. "bottom" | "center" | "top" | undefined undefined

Methods

close() => Promise<void>

Close an active FAB list container.

Returns

Type: Promise<void>

Built with StencilJS

Reference in New Issue View Git Blame Copy Permalink