Skip to content

Commit 134d538

Browse files
mapsandappsmapsandapps
authored
docs(fab): add playground for safe area workaround (#3105)
* docs(fab): add playground for safe area workaround * Add safe area sizes for stackblitzes * Use both component & global css files; use both scoped and global style tags
1 parent 820edf0 commit 134d538

File tree

10 files changed

+212
-1
lines changed

10 files changed

+212
-1
lines changed

‎docs/api/fab.md‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,32 @@ import Positioning from '@site/static/usage/v7/fab/positioning/index.md';
4141

4242
<Positioning />
4343

44+
### Safe Area
45+
46+
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).
47+
48+
When using a fab with `vertical` set to `"top"` without an `ion-header`, the top margin needs to be set:
49+
50+
```css
51+
ion-fab {
52+
margin-top: var(--ion-safe-area-top, 0);
53+
}
54+
```
55+
56+
And when using a fab with `vertical` set to `"bottom"` without an `ion-footer`, the bottom margin needs to be set:
57+
58+
```css
59+
ion-fab {
60+
margin-bottom: var(--ion-safe-area-bottom, 0);
61+
}
62+
```
63+
64+
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.
65+
66+
import SafeArea from '@site/static/usage/v7/fab/safe-area/index.md';
67+
68+
<SafeArea />
69+
4470
## Button Sizing
4571

4672
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
6894
import CSSShadowParts from '@site/static/usage/v7/fab/theming/css-shadow-parts/index.md';
6995

7096
<CSSShadowParts />
71-
7297

7398
## Accessibility
7499

‎static/usage/v7/fab/safe-area/angular/example_component_css.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
```css
2+
ion-fab {
3+
margin-top: var(--ion-safe-area-top, 0);
4+
margin-bottom: var(--ion-safe-area-bottom, 0);
5+
}
6+
```

‎static/usage/v7/fab/safe-area/angular/example_component_html.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
```html
2+
<ion-fab slot="fixed" vertical="top" horizontal="center">
3+
<ion-fab-button>
4+
<ion-icon name="add"></ion-icon>
5+
</ion-fab-button>
6+
</ion-fab>
7+
```

‎static/usage/v7/fab/safe-area/angular/global_css.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
```css
2+
:root {
3+
/**
4+
* Setting the variables for DEMO purposes only.
5+
* Values will be set automatically when building an iOS or Android app.
6+
*/
7+
--ion-safe-area-top: 20px;
8+
--ion-safe-area-bottom: 20px;
9+
}
10+
```

‎static/usage/v7/fab/safe-area/demo.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Fab</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
12+
<style>
13+
ion-fab {
14+
margin-top: var(--ion-safe-area-top, 0);
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<ion-app>
21+
<ion-fab slot="fixed" vertical="top" horizontal="center">
22+
<ion-fab-button>
23+
<ion-icon name="add"></ion-icon>
24+
</ion-fab-button>
25+
</ion-fab>
26+
</ion-app>
27+
</body>
28+
</html>

‎static/usage/v7/fab/safe-area/index.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
5+
import react_main_tsx from './react/main_tsx.md';
6+
import react_main_css from './react/main_css.md';
7+
8+
import vue from './vue.md';
9+
10+
import angular_example_component_html from './angular/example_component_html.md';
11+
import angular_example_component_css from './angular/example_component_css.md';
12+
import angular_global_css from './angular/global_css.md';
13+
14+
<Playground
15+
version="7"
16+
code={{
17+
javascript,
18+
react: {
19+
files: {
20+
'src/main.tsx': react_main_tsx,
21+
'src/main.css': react_main_css,
22+
},
23+
},
24+
vue,
25+
angular: {
26+
files: {
27+
'src/app/example.component.html': angular_example_component_html,
28+
'src/app/example.component.css': angular_example_component_css,
29+
'src/global.css': angular_global_css,
30+
},
31+
},
32+
}}
33+
src="usage/v7/fab/safe-area/demo.html"
34+
devicePreview={true}
35+
/>

‎static/usage/v7/fab/safe-area/javascript.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
```html
2+
<ion-fab slot="fixed" vertical="top" horizontal="center">
3+
<ion-fab-button>
4+
<ion-icon name="add"></ion-icon>
5+
</ion-fab-button>
6+
</ion-fab>
7+
8+
<style>
9+
:root {
10+
/**
11+
* Setting the variables for DEMO purposes only.
12+
* Values will be set automatically when building an iOS or Android app.
13+
*/
14+
--ion-safe-area-top: 20px;
15+
--ion-safe-area-bottom: 20px;
16+
}
17+
18+
ion-fab {
19+
margin-top: var(--ion-safe-area-top, 0);
20+
margin-bottom: var(--ion-safe-area-bottom, 0);
21+
}
22+
</style>
23+
```

‎static/usage/v7/fab/safe-area/react/main_css.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
```css
2+
:root {
3+
/**
4+
* Setting the variables for DEMO purposes only.
5+
* Values will be set automatically when building an iOS or Android app.
6+
*/
7+
--ion-safe-area-top: 20px;
8+
--ion-safe-area-bottom: 20px;
9+
}
10+
11+
ion-fab {
12+
margin-top: var(--ion-safe-area-top, 0);
13+
margin-bottom: var(--ion-safe-area-bottom, 0);
14+
}
15+
```

‎static/usage/v7/fab/safe-area/react/main_tsx.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonFab, IonFabButton, IonIcon } from '@ionic/react';
4+
import { add } from 'ionicons/icons';
5+
6+
import './main.css';
7+
8+
function Example() {
9+
return (
10+
<IonFab slot="fixed" vertical="top" horizontal="center">
11+
<IonFabButton>
12+
<IonIcon icon={add}></IonIcon>
13+
</IonFabButton>
14+
</IonFab>
15+
);
16+
}
17+
export default Example;
18+
```

‎static/usage/v7/fab/safe-area/vue.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
```html
2+
<template>
3+
<ion-fab slot="fixed" vertical="top" horizontal="center">
4+
<ion-fab-button>
5+
<ion-icon :icon="add"></ion-icon>
6+
</ion-fab-button>
7+
</ion-fab>
8+
</template>
9+
10+
<script lang="ts">
11+
import { IonFab, IonFabButton, IonIcon } from '@ionic/vue';
12+
import { defineComponent } from 'vue';
13+
import { add } from 'ionicons/icons';
14+
15+
export default defineComponent({
16+
components: {
17+
IonFab,
18+
IonFabButton,
19+
IonIcon,
20+
},
21+
setup() {
22+
return { add };
23+
},
24+
});
25+
</script>
26+
27+
<style>
28+
:root {
29+
/**
30+
* Setting the variables for DEMO purposes only.
31+
* Values will be set automatically when building an iOS or Android app.
32+
*/
33+
--ion-safe-area-top: 20px;
34+
--ion-safe-area-bottom: 20px;
35+
}
36+
</style>
37+
38+
<style scoped>
39+
ion-fab {
40+
margin-top: var(--ion-safe-area-top, 0);
41+
margin-bottom: var(--ion-safe-area-bottom, 0);
42+
}
43+
</style>
44+
```

0 commit comments

Comments
 (0)