docs(modal): reorganize Styling and add Sizing to Content section #4689
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -127,7 +127,7 @@ import CardExample from '@site/static/usage/v9/modal/card/basic/index.mdx'; | |
|
|
||
| :::info | ||
|
|
||
| [Content](./content.mdx) should be used inside of the sheet modal if you want your modal content to be scrollable. | ||
|
|
||
| ::: | ||
|
|
||
|
|
@@ -175,34 +175,58 @@ import SheetScrollingContentExample from '@site/static/usage/v9/modal/sheet/expa | |
|
|
||
| <SheetScrollingContentExample /> | ||
|
|
||
| ## Theming | ||
|
|
||
| [Controller modals](#controller-modals) are appended to the root of your application, outside of the component that presented them. Component-scoped styles will not reach these modals, so their styles must be applied globally, from a stylesheet that is not scoped to a component. | ||
|
|
||
| [Inline modals](#inline-modals-recommended) stay where they are declared in your template, so component-scoped styles do apply to them. | ||
|
Comment on lines
+180
to
+182
Member
Author
There was a problem hiding this comment. I can revert this if desired - but I don't know why inline modals were specified here as needing to be overridden globally. We can target |
||
|
|
||
|
Member
Author
There was a problem hiding this comment. The Style Placement section has been removed since v6 so I deleted this entire note: 997fe9e |
||
| ### Styling | ||
|
|
||
| Modals expose [CSS Custom Properties](#css-custom-properties) and [CSS Shadow Parts](#css-shadow-parts) for customizing their appearance. | ||
|
|
||
| import ThemeExample from '@site/static/usage/v9/modal/styling/theming/index.mdx'; | ||
|
|
||
| <ThemeExample /> | ||
|
|
||
| ### Stacked Modals | ||
|
|
||
| `ion-modal` works under the assumption that stacked modals are the same size. As a result, each subsequent modal will have no box shadow and a backdrop opacity of `0`. This is to avoid the effect of shadows and backdrops getting darker with each added modal. This can be changed by setting the `--box-shadow` and `--backdrop-opacity` CSS variables: | ||
|
|
||
| ```css | ||
| ion-modal.stack-modal { | ||
| --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); | ||
| --backdrop-opacity: var(--ion-backdrop-opacity, 0.32); | ||
| } | ||
| ``` | ||
|
|
||
| ### Sizing to Content | ||
|
|
||
| A modal fills the height of its container by default. Setting the `--height` CSS variable to `auto`, `fit-content`, `min-content`, or `max-content` sizes the modal to the height of what it renders instead. | ||
|
|
||
| :::warning | ||
|
|
||
| The height must be set on the modal through the `--height` CSS variable. Setting `height` on the `content` [CSS Shadow Part](#css-shadow-parts) will still resize the modal, but any [Content](./content.mdx) inside of it will collapse to a height of `0`, leaving only the header visible. | ||
|
|
||
| ```css | ||
| /* DO NOT DO THIS */ | ||
| ion-modal::part(content) { | ||
| height: fit-content; | ||
| } | ||
|
|
||
| /* Do this instead */ | ||
| ion-modal { | ||
| --height: fit-content; | ||
| } | ||
| ``` | ||
|
|
||
| ::: | ||
|
|
||
| import SizingToContentExample from '@site/static/usage/v9/modal/styling/sizing-to-content/index.mdx'; | ||
|
|
||
| <SizingToContentExample /> | ||
|
|
||
| ## Animations | ||
|
Member
Author
There was a problem hiding this comment. I promoted Animations out of Theming because it doesn't actually change any styles. |
||
|
|
||
| The enter and leave animations can be customized by using our animation builder and assigning animations to `enterAnimation` and `leaveAnimation`. | ||
|
|
||
|
|
@@ -220,7 +244,7 @@ import CustomDialogs from '@site/static/usage/v9/modal/custom-dialogs/index.mdx' | |
|
|
||
| A few things to keep in mind when creating custom dialogs: | ||
|
|
||
| - `ion-content` can be used in a custom dialog, including one that is sized to its contents. The dialog's height must come from the `--height` CSS variable rather than from the dialog's children. See [Sizing to Content](#sizing-to-content). | ||
| - Creating custom dialogs provides a way of ejecting from the default modal experience. As a result, custom dialogs should not be used with card or sheet modals. | ||
|
|
||
| ## Event Handling | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| ```css | ||
| ion-modal { | ||
| --height: fit-content; | ||
| --width: 90%; | ||
| --border-radius: 8px; | ||
| --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); | ||
| } | ||
| ``` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| ```html | ||
| <ion-header> | ||
| <ion-toolbar> | ||
| <ion-title>App</ion-title> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
| <ion-content class="ion-padding"> | ||
| <ion-button id="open-modal" expand="block">Open Modal</ion-button> | ||
|
|
||
| <ion-modal #modal trigger="open-modal"> | ||
| <ng-template> | ||
| <ion-header> | ||
| <ion-toolbar> | ||
| <ion-title>Modal</ion-title> | ||
| <ion-buttons slot="end"> | ||
| <ion-button (click)="modal.dismiss()">Close</ion-button> | ||
| </ion-buttons> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
| <ion-content> | ||
| <ion-list lines="full"> | ||
| @for (item of ['Item 1', 'Item 2', 'Item 3']; track item) { | ||
| <ion-item> | ||
| <ion-label>{{ item }}</ion-label> | ||
| </ion-item> | ||
| } | ||
| </ion-list> | ||
| </ion-content> | ||
| </ng-template> | ||
| </ion-modal> | ||
| </ion-content> | ||
| ``` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| ```ts | ||
| import { Component } from '@angular/core'; | ||
| import { | ||
| IonButton, | ||
| IonButtons, | ||
| IonContent, | ||
| IonHeader, | ||
| IonItem, | ||
| IonLabel, | ||
| IonList, | ||
| IonModal, | ||
| IonTitle, | ||
| IonToolbar, | ||
| } from '@ionic/angular'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-example', | ||
| templateUrl: 'example.component.html', | ||
| styleUrls: ['example.component.css'], | ||
| imports: [IonButton, IonButtons, IonContent, IonHeader, IonItem, IonLabel, IonList, IonModal, IonTitle, IonToolbar], | ||
| }) | ||
| export class ExampleComponent {} | ||
| ``` |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reorganizing the sections into Theming -> Styling to match other components, see: https://ionicframework.com/docs/api/action-sheet#theming
I considered updating the playground directory structure but moving any would break the JP docs.