docs(nav): component playground for modal navigation #2463
docs(nav): component playground for modal navigation #2463sean-perkins merged 12 commits intodocs/nav-playgroundfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
…ayground/modal-navigation
| import ModalNavigationExample from '@site/static/usage/nav/modal-navigation/index.md'; | ||
|
|
||
| TODO: Playground Example | ||
| <ModalNavigationExample /> |
There was a problem hiding this comment.
I'm seeing some weird transition animations in iOS mode: https://user-images.githubusercontent.com/90629384/184921906-98e49071-f095-4424-b437-689e636d9adb.mp4
It doesn't happen in Stackblitz, so maybe this is related to the Playground component?
There was a problem hiding this comment.
This is a strange one... the style block that is causing this issue is:
ion-modal .ion-page:not(ion-nav.ion-page) {
position: relative;
contain: layout style;
height: 100%;
}somehow it's stripping the space within the :not tag, as ours is:
ion-modal .ion-page:not(ion-nav .ion-page) {
position: relative;
contain: layout style;
height: 100%;
}We can see that issue directly from the CDN: https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css.
I'll need to work with Liam to uncover why this is happening. I don't see this as a blocker though, as the Stackblitz examples work & when developers install the package they will not have this issue.
There was a problem hiding this comment.
Ok, this will be resolved once: ionic-team/ionic-framework#25767 is merged, we deploy the next patch & jsDelivr cache is purged.
| </ion-buttons> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
| <ion-content> |
There was a problem hiding this comment.
Can we add ion-padding? screen looks a bit cramped
3 participants
This PR introduces an example for modal navigation on the
ion-navdocs page.https://ionic-docs-git-nav-playground-modal-navigation-ionic1.vercel.app/docs/api/nav#navigation-within-a-modal