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>
+```