diff --git a/docs/api/content.md b/docs/api/content.md index f4380b209bd..d974b05dd44 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -95,6 +95,29 @@ import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index +### Safe Area Padding + +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). + +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. + +```css +ion-content::part(scroll) { + padding-top: var(--ion-safe-area-top, 0); +} +``` + +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. + +```css +ion-content::part(scroll) { + padding-left: var(--ion-safe-area-left, 0); +} +``` + +import SafeArea from '@site/static/usage/v7/content/theming/safe-area/index.md'; + + ## Interfaces diff --git a/static/usage/v7/content/theming/safe-area/angular/example_component_css.md b/static/usage/v7/content/theming/safe-area/angular/example_component_css.md new file mode 100644 index 00000000000..17cf5c76c57 --- /dev/null +++ b/static/usage/v7/content/theming/safe-area/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-content::part(scroll) { + padding-top: var(--ion-safe-area-top, 0); + padding-bottom: var(--ion-safe-area-bottom, 0); + padding-left: var(--ion-safe-area-left, 0); + padding-right: var(--ion-safe-area-right, 0); +} +``` diff --git a/static/usage/v7/content/theming/safe-area/angular/example_component_html.md b/static/usage/v7/content/theming/safe-area/angular/example_component_html.md new file mode 100644 index 00000000000..d01b3935e35 --- /dev/null +++ b/static/usage/v7/content/theming/safe-area/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Here's a small text description for the content. Nothing more, nothing less. + +``` diff --git a/static/usage/v7/content/theming/safe-area/angular/global_css.md b/static/usage/v7/content/theming/safe-area/angular/global_css.md new file mode 100644 index 00000000000..bd18709f492 --- /dev/null +++ b/static/usage/v7/content/theming/safe-area/angular/global_css.md @@ -0,0 +1,12 @@ +```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-safe-area-left: 20px; + --ion-safe-area-right: 20px; +} +``` diff --git a/static/usage/v7/content/theming/safe-area/demo.html b/static/usage/v7/content/theming/safe-area/demo.html new file mode 100644 index 00000000000..81bca712c04 --- /dev/null +++ b/static/usage/v7/content/theming/safe-area/demo.html @@ -0,0 +1,36 @@ + + + + + + Content + + + + + + + + + + + + Here's a small text description for the content. Nothing more, nothing less. + + + + diff --git a/static/usage/v7/content/theming/safe-area/index.md b/static/usage/v7/content/theming/safe-area/index.md new file mode 100644 index 00000000000..6ab052ec2d9 --- /dev/null +++ b/static/usage/v7/content/theming/safe-area/index.md @@ -0,0 +1,36 @@ +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'; + + diff --git a/static/usage/v7/content/theming/safe-area/javascript.md b/static/usage/v7/content/theming/safe-area/javascript.md new file mode 100644 index 00000000000..2dc819d6a60 --- /dev/null +++ b/static/usage/v7/content/theming/safe-area/javascript.md @@ -0,0 +1,25 @@ +```html + + Here's a small text description for the content. Nothing more, nothing less. + + + +``` diff --git a/static/usage/v7/content/theming/safe-area/react/main_css.md b/static/usage/v7/content/theming/safe-area/react/main_css.md new file mode 100644 index 00000000000..6466670f427 --- /dev/null +++ b/static/usage/v7/content/theming/safe-area/react/main_css.md @@ -0,0 +1,19 @@ +```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-safe-area-left: 20px; + --ion-safe-area-right: 20px; +} + +ion-content::part(scroll) { + padding-top: var(--ion-safe-area-top, 0); + padding-bottom: var(--ion-safe-area-bottom, 0); + padding-left: var(--ion-safe-area-left, 0); + padding-right: var(--ion-safe-area-right, 0); +} +``` diff --git a/static/usage/v7/content/theming/safe-area/react/main_tsx.md b/static/usage/v7/content/theming/safe-area/react/main_tsx.md new file mode 100644 index 00000000000..4f3ff8a34b4 --- /dev/null +++ b/static/usage/v7/content/theming/safe-area/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonContent } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + Here's a small text description for the content. Nothing more, nothing less. + + ); +} +export default Example; +``` diff --git a/static/usage/v7/content/theming/safe-area/vue.md b/static/usage/v7/content/theming/safe-area/vue.md new file mode 100644 index 00000000000..18c5e8c246e --- /dev/null +++ b/static/usage/v7/content/theming/safe-area/vue.md @@ -0,0 +1,40 @@ +```html + + + + + + + +```