Skip to content

Commit 820edf0

Browse files
thetaPCthetaPC
authored
docs(content): add playground for safe area usage (#3102)
1 parent 84e8ae2 commit 820edf0

File tree

10 files changed

+219
-0
lines changed

10 files changed

+219
-0
lines changed

‎docs/api/content.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,29 @@ import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index
9595

9696
<CSSProps />
9797

98+
### Safe Area Padding
99+
100+
The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.md#application-variables).
101+
102+
The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the `padding-top` property to the value of the `--ion-safe-area-top` variable.
103+
104+
```css
105+
ion-content::part(scroll) {
106+
padding-top: var(--ion-safe-area-top, 0);
107+
}
108+
```
109+
110+
Another common use case is to apply padding to the left side of the content to account for the notch when the device is in landscape mode and the notch is on the left side. This can be done by setting the `padding-left` property to the value of the `--ion-safe-area-left` variable.
111+
112+
```css
113+
ion-content::part(scroll) {
114+
padding-left: var(--ion-safe-area-left, 0);
115+
}
116+
```
117+
118+
import SafeArea from '@site/static/usage/v7/content/theming/safe-area/index.md';
119+
120+
<SafeArea />
98121

99122
## Interfaces
100123

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
```css
2+
ion-content::part(scroll) {
3+
padding-top: var(--ion-safe-area-top, 0);
4+
padding-bottom: var(--ion-safe-area-bottom, 0);
5+
padding-left: var(--ion-safe-area-left, 0);
6+
padding-right: var(--ion-safe-area-right, 0);
7+
}
8+
```

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
```html
2+
<ion-content>
3+
<span>Here's a small text description for the content. Nothing more, nothing less.</span>
4+
</ion-content>
5+
```

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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+
--ion-safe-area-left: 20px;
10+
--ion-safe-area-right: 20px;
11+
}
12+
```

‎static/usage/v7/content/theming/safe-area/demo.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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>Content</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-content {
14+
--ion-safe-area-top: 40px;
15+
--ion-safe-area-bottom: 40px;
16+
--ion-safe-area-left: 20px;
17+
--ion-safe-area-right: 20px;
18+
}
19+
20+
ion-content::part(scroll) {
21+
padding-top: var(--ion-safe-area-top, 0);
22+
padding-bottom: var(--ion-safe-area-bottom, 0);
23+
padding-left: var(--ion-safe-area-left, 0);
24+
padding-right: var(--ion-safe-area-right, 0);
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<ion-app>
31+
<ion-content>
32+
<span>Here's a small text description for the content. Nothing more, nothing less.</span>
33+
</ion-content>
34+
</ion-app>
35+
</body>
36+
</html>

‎static/usage/v7/content/theming/safe-area/index.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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/content/theming/safe-area/demo.html"
34+
devicePreview
35+
includeIonContent={false}
36+
/>

‎static/usage/v7/content/theming/safe-area/javascript.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
```html
2+
<ion-content>
3+
<span>Here's a small text description for the content. Nothing more, nothing less.</span>
4+
</ion-content>
5+
6+
<style>
7+
:root {
8+
/**
9+
* Setting the variables for DEMO purposes only.
10+
* Values will be set automatically when building an iOS or Android app.
11+
*/
12+
--ion-safe-area-top: 20px;
13+
--ion-safe-area-bottom: 20px;
14+
--ion-safe-area-left: 20px;
15+
--ion-safe-area-right: 20px;
16+
}
17+
18+
ion-content::part(scroll) {
19+
padding-top: var(--ion-safe-area-top, 0);
20+
padding-bottom: var(--ion-safe-area-bottom, 0);
21+
padding-left: var(--ion-safe-area-left, 0);
22+
padding-right: var(--ion-safe-area-right, 0);
23+
}
24+
</style>
25+
```

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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+
--ion-safe-area-left: 20px;
10+
--ion-safe-area-right: 20px;
11+
}
12+
13+
ion-content::part(scroll) {
14+
padding-top: var(--ion-safe-area-top, 0);
15+
padding-bottom: var(--ion-safe-area-bottom, 0);
16+
padding-left: var(--ion-safe-area-left, 0);
17+
padding-right: var(--ion-safe-area-right, 0);
18+
}
19+
```

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonContent } from '@ionic/react';
4+
5+
import './main.css';
6+
7+
function Example() {
8+
return (
9+
<IonContent>
10+
<span>Here's a small text description for the content. Nothing more, nothing less.</span>
11+
</IonContent>
12+
);
13+
}
14+
export default Example;
15+
```

‎static/usage/v7/content/theming/safe-area/vue.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
```html
2+
<template>
3+
<ion-content>
4+
<span>Here's a small text description for the content. Nothing more, nothing less.</span>
5+
</ion-content>
6+
</template>
7+
8+
<script lang="ts">
9+
import { IonContent } from '@ionic/vue';
10+
import { defineComponent } from 'vue';
11+
12+
export default defineComponent({
13+
components: {
14+
IonContent,
15+
},
16+
});
17+
</script>
18+
19+
<style>
20+
:root {
21+
/**
22+
* Setting the variables for DEMO purposes only.
23+
* Values will be set automatically when building an iOS or Android app.
24+
*/
25+
--ion-safe-area-top: 20px;
26+
--ion-safe-area-bottom: 20px;
27+
--ion-safe-area-left: 20px;
28+
--ion-safe-area-right: 20px;
29+
}
30+
</style>
31+
32+
<style scoped>
33+
ion-content::part(scroll) {
34+
padding-top: var(--ion-safe-area-top, 0);
35+
padding-bottom: var(--ion-safe-area-bottom, 0);
36+
padding-left: var(--ion-safe-area-left, 0);
37+
padding-right: var(--ion-safe-area-right, 0);
38+
}
39+
</style>
40+
```

0 commit comments

Comments
 (0)