Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(content): add playground for safe area usage #3102

Merged
merged 9 commits into from
Sep 1, 2023
Merged

docs(content): add playground for safe area usage #3102

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
97d42cf
docs(content): add playground for safe area usage
thetaPC Aug 30, 2023
4a3f098
docs(content): show safe area padding on StackBlitz
thetaPC Sep 1, 2023
dfeb5d1
docs(content): switch to :root
thetaPC Sep 1, 2023
7c6356a
docs(content): requested changes
thetaPC Sep 1, 2023
0d37140
docs(content): remove extra ion-content
thetaPC Sep 1, 2023
9bdfc83
docs(content): add angular example styles
thetaPC Sep 1, 2023
3e6030d
docs(content): separate scoped styles for vue
thetaPC Sep 1, 2023
3bf41d2
docs(select): move use cases
thetaPC Sep 1, 2023
1efb16c
docs(content): remove duplicate
thetaPC Sep 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions docs/api/content.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,29 @@ import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index

<CSSProps />

### 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).

import SafeArea from '@site/static/usage/v7/content/theming/safe-area/index.md';

<SafeArea />

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);
}
```
Comment on lines +102 to +116
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we move this above the Playground? Anything under might be ignored since people stop at the demo and play with it.


## Interfaces

Expand Down
5 changes: 5 additions & 0 deletions static/usage/v7/content/theming/safe-area/angular/example_component_html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
```html
<ion-content>
<span>Here's a small text description for the content. Nothing more, nothing less.</span>
</ion-content>
```
19 changes: 19 additions & 0 deletions static/usage/v7/content/theming/safe-area/angular/global_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should keep this CSS in the example component's CSS file. Developers often have an app where one page has a content with no header but the rest do, so I don't think we want this globally applied.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then i suppose we should also have two <style> tags in the Vue file, one that's scoped and one that's not

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll separate them on Vue. It keeps it consistent IMO.

```
36 changes: 36 additions & 0 deletions static/usage/v7/content/theming/safe-area/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Content</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-content {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
ion-content {
:root {

for consistency

--ion-safe-area-top: 40px;
--ion-safe-area-bottom: 40px;
--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);
}
</style>
</head>

<body>
<ion-app>
<ion-content>
<span>Here's a small text description for the content. Nothing more, nothing less.</span>
</ion-content>
</ion-app>
</body>
</html>
34 changes: 34 additions & 0 deletions static/usage/v7/content/theming/safe-area/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
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_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/global.css': angular_global_css,
},
},
}}
src="usage/v7/content/theming/safe-area/demo.html"
devicePreview
Comment on lines +33 to +34
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this needs includeIonContent={false} so you don't end up with two ion-contents

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where should I be looking for the two ion-contents? I'm not seeing them.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nvm, I found it! I've learned something new about the Playground. Thank you!

includeIonContent={false}
/>
25 changes: 25 additions & 0 deletions static/usage/v7/content/theming/safe-area/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
```html
<ion-content>
<span>Here's a small text description for the content. Nothing more, nothing less.</span>
</ion-content>

<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-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);
}
</style>
```
19 changes: 19 additions & 0 deletions static/usage/v7/content/theming/safe-area/react/main_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
```
15 changes: 15 additions & 0 deletions static/usage/v7/content/theming/safe-area/react/main_tsx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
```tsx
import React from 'react';
import { IonContent } from '@ionic/react';

import './main.css';

function Example() {
return (
<IonContent>
<span>Here's a small text description for the content. Nothing more, nothing less.</span>
</IonContent>
);
}
export default Example;
```
38 changes: 38 additions & 0 deletions static/usage/v7/content/theming/safe-area/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
```html
<template>
<ion-content>
<span>Here's a small text description for the content. Nothing more, nothing less.</span>
</ion-content>
</template>

<script lang="ts">
import { IonContent } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: {
IonContent,
},
});
</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;
--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);
}
</style>
```