javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(modal): card-style modal now opens at full width on larger devices (#20256)

Browse Source 
fixes #20255
This commit is contained in:
Liam DeBeasi
2020-01-21 15:31:44 -05:00
committed by GitHub
parent 32a7401576
commit 443cbd9eb2
3 changed files with 5 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/src/components/modal/modal.ios.scss
View File

@@ -21,6 +21,7 @@
:host(.modal-card) {
--backdrop-opacity: 0.15;
--width: 100%;
align-items: flex-end;
}

2
core/src/components/modal/readme.md
View File

@@ -157,6 +157,8 @@ export class CalendarComponentModule {}
Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.
If you are creating an application that uses `ion-tabs`, it is recommended that you get the parent `ion-router-outlet` using `this.routerOutlet.parentOutlet.nativeEl`, otherwise the tabbar will not scale down when the modal opens.
```javascript
import { IonRouterOutlet } from '@ionic/angular';

2
core/src/components/modal/usage/angular.md
View File

@@ -135,6 +135,8 @@ export class CalendarComponentModule {}
Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.
If you are creating an application that uses `ion-tabs`, it is recommended that you get the parent `ion-router-outlet` using `this.routerOutlet.parentOutlet.nativeEl`, otherwise the tabbar will not scale down when the modal opens.
```javascript
import { IonRouterOutlet } from '@ionic/angular';