docs(nav): component playground examples #2498
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL. | ||
| <NavLinkExample /> | ||
|
|
||
| ## Navigation within a Modal |
There was a problem hiding this comment.
It looks like the button is partially cut off in the Angular example:
There was a problem hiding this comment.
In React and Vue, the usage of ion-app creates a container element around the children content, creating a DOM tree like:
<ion-app class="ion-page">
<div class="ion-page">
<!-- component here -->
</div>
</ion-app>Angular does not do the same thing (likely we never noticed/wasn't an issue because ion-router-outlet handles this implementation detail).
<ion-app class="ion-page">
<!-- component here -->
</ion-app>Should I track this as a bug in Ionic or would we rather update our Playground demo code to workaround this issue (e.g.):
<ion-app>
<app-example class="ion-page"></app-example>
</ion-app>Developers using ion-router-outlet should never run into this issue.
| <NavLinkExample /> | ||
|
|
||
| ## Navigation within a Modal | ||
|
|
There was a problem hiding this comment.
In the React example, it looks like the inner contents are not mounted until the modal is fully presented. Is that an Ionic bug?
There was a problem hiding this comment.
Correct the React example uses didPresent instead of willPresent, because attempting to set the root component before the modal is presented does not work: https://stackblitz.com/edit/angular-vmakvy?file=src%2Fmain.tsx.
I can work to get a bug logged around this behavior.
|
|
||
| ## Navigation within a Modal | ||
|
|
||
| Modal can use Nav to offer a linear navigation that is independent of the URL. |
There was a problem hiding this comment.
The page transitions are not running in the Vue sample.
There was a problem hiding this comment.
This appears to be a bug in the Vue implementation (or underlying Core bug), but I will dig in further and confirm. Seeing new page elements being constructed for each operation (pop/push/replace), but not seeing the pages unmounted or transitioned correctly.
This PR is a combination of other previously reviewed Nav playground PRs + fixing the examples to work with the revised "example component" refactor.