ionic-team · mapsandapps · Sep 5, 2023 · Aug 31, 2023 · Aug 31, 2023 · Sep 1, 2023
@@ -41,6 +41,32 @@ import Positioning from '@site/static/usage/v7/fab/positioning/index.md';
 
 <Positioning />
 
+### Safe Area
+
+If there is no `ion-header` or `ion-footer` component, the fab may be covered by a device's notch, status bar, or other device UI. In these cases, the [safe area](/docs/theming/advanced#safe-area-padding) on the top and bottom is not taken into account. This can be adjusted by using the [`--ion-safe-area-(dir)` variables](/docs/theming/advanced#application-variables).
+
+When using a fab with `vertical` set to `"top"` without an `ion-header`, the top margin needs to be set:
+
+```css
+ion-fab {
+ margin-top: var(--ion-safe-area-top, 0);
+}
+```
+
+And when using a fab with `vertical` set to `"bottom"` without an `ion-footer`, the bottom margin needs to be set:
+
+```css
+ion-fab {
+ margin-bottom: var(--ion-safe-area-bottom, 0);
+}
+```
+
+If there is an `ion-header` (for a fab with `vertical` set to `"top"`) or `ion-footer` (for a fab with `vertical` set to `"bottom"`), no CSS adjustment is needed because the fab gets positioned relative to the header or footer.
+
+import SafeArea from '@site/static/usage/v7/fab/safe-area/index.md';
+
+<SafeArea />
+
 ## Button Sizing
 
 Setting the `size` property of the main fab button to `"small"` will render it at a mini size. Note that this property will not have an effect when used with the inner fab buttons.
@@ -68,7 +94,6 @@ import CSSCustomProperties from '@site/static/usage/v7/fab/theming/css-custom-pr
 import CSSShadowParts from '@site/static/usage/v7/fab/theming/css-shadow-parts/index.md';
 
 <CSSShadowParts />
-
 
 ## Accessibility
 

@@ -0,0 +1,6 @@
+```css
+ion-fab {
+ margin-top: var(--ion-safe-area-top, 0);
+ margin-bottom: var(--ion-safe-area-bottom, 0);
+}
+```
@@ -0,0 +1,7 @@
+```html
+<ion-fab slot="fixed" vertical="top" horizontal="center">
+ <ion-fab-button>
+ <ion-icon name="add"></ion-icon>
+ </ion-fab-button>
+</ion-fab>
+```
@@ -0,0 +1,10 @@
+```css
+:root {
+ /**
+ * Setting the variables for DEMO purposes only.
+ * Values will be set automatically when building an iOS or Android app.
+ */
+ --ion-safe-area-top: 20px;
+ --ion-safe-area-bottom: 20px;
+}
+```
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Fab</title>
+ <link rel="stylesheet" href="../../../common.css" />
+ <script src="../../../common.js"></script>
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+ <style>
+ ion-fab {
+ margin-top: var(--ion-safe-area-top, 0);
+ }
+ </style>
+ </head>
+
+ <body>
+ <ion-app>
+ <ion-fab slot="fixed" vertical="top" horizontal="center">
+ <ion-fab-button>
+ <ion-icon name="add"></ion-icon>
+ </ion-fab-button>
+ </ion-fab>
+ </ion-app>
+ </body>
+</html>
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+ version="7"
+ code={{
+ javascript,
+ react: {
+ files: {
+ 'src/main.tsx': react_main_tsx,
+ 'src/main.css': react_main_css,
+ },
+ },
+ vue,
+ angular: {
+ files: {
+ 'src/app/example.component.html': angular_example_component_html,
+ 'src/app/example.component.css': angular_example_component_css,
+ 'src/global.css': angular_global_css,
+ },
+ },
+ }}
+ src="usage/v7/fab/safe-area/demo.html"
+ devicePreview={true}
+/>
@@ -0,0 +1,23 @@
+```html
+<ion-fab slot="fixed" vertical="top" horizontal="center">
+ <ion-fab-button>
+ <ion-icon name="add"></ion-icon>
+ </ion-fab-button>
+</ion-fab>
+
+<style>
+ :root {
+ /**
+ * Setting the variables for DEMO purposes only.
+ * Values will be set automatically when building an iOS or Android app.
+ */
+ --ion-safe-area-top: 20px;
+ --ion-safe-area-bottom: 20px;
+ }
+
+ ion-fab {
+ margin-top: var(--ion-safe-area-top, 0);
+ margin-bottom: var(--ion-safe-area-bottom, 0);
+ }
+</style>
+```
@@ -0,0 +1,15 @@
+```css
+:root {
+ /**
+ * Setting the variables for DEMO purposes only.
+ * Values will be set automatically when building an iOS or Android app.
+ */
+ --ion-safe-area-top: 20px;
+ --ion-safe-area-bottom: 20px;
+}
+
+ion-fab {
+ margin-top: var(--ion-safe-area-top, 0);
+ margin-bottom: var(--ion-safe-area-bottom, 0);
+}
+```
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonIcon } from '@ionic/react';
+import { add } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ return (
+ <IonFab slot="fixed" vertical="top" horizontal="center">
+ <IonFabButton>
+ <IonIcon icon={add}></IonIcon>
+ </IonFabButton>
+ </IonFab>
+ );
+}
+export default Example;
+```
@@ -0,0 +1,44 @@
+```html
+<template>
+ <ion-fab slot="fixed" vertical="top" horizontal="center">
+ <ion-fab-button>
+ <ion-icon :icon="add"></ion-icon>
+ </ion-fab-button>
+ </ion-fab>
+</template>
+
+<script lang="ts">
+ import { IonFab, IonFabButton, IonIcon } from '@ionic/vue';
+ import { defineComponent } from 'vue';
+ import { add } from 'ionicons/icons';
+
+ export default defineComponent({
+ components: {
+ IonFab,
+ IonFabButton,
+ IonIcon,
+ },
+ setup() {
+ return { add };
+ },
+ });
+</script>
+
+<style>
+ :root {
+ /**
+ * Setting the variables for DEMO purposes only.
+ * Values will be set automatically when building an iOS or Android app.
+ */
+ --ion-safe-area-top: 20px;
+ --ion-safe-area-bottom: 20px;
+ }
+</style>
+
+<style scoped>
+ ion-fab {
+ margin-top: var(--ion-safe-area-top, 0);
+ margin-bottom: var(--ion-safe-area-bottom, 0);
+ }
+</style>
+```