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

Jump to bottom

docs(nav): component playground examples #2498

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
+16 −2
Open

docs(nav): component playground examples #2498

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b886a32
docs(nav): component playground examples
sean-perkins Jun 22, 2022
550396c
docs(nav): nav link component playground (#2437)
sean-perkins Jul 6, 2022
847a21c
docs(nav): component playground for modal navigation (#2463)
sean-perkins Aug 17, 2022
37f85ed
Merge remote-tracking branch 'origin/main' into docs/nav-playground
sean-perkins Aug 17, 2022
8a168d7
fix(): clean-up examples
sean-perkins Aug 17, 2022
6a2bcfe
Merge branch 'main' into docs/nav-playground
brandyscarney Jul 26, 2024
2370f1d
chore: run prettier
sean-perkins Aug 12, 2024
f54644e
fix: build
sean-perkins Aug 12, 2024
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
18 changes: 16 additions & 2 deletions docs/api/nav.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,26 @@ Unlike Router Outlet, Nav is not tied to a particular router. This means that if

## Using NavLink

NavLink is a simplified API when interacting with Nav. Developers can customize the component, pass along component properties, modify the direction of the route animation or define a custom animation when navigating.
NavLink is a simplified API when interacting with Nav. Developers can customize the component, pass along component properties, modify the direction of the route animation or define a custom animation when navigating.

import NavLinkExample from '@site/static/usage/v8/nav/nav-link/index.md';
import NavLinkExample from '@site/static/usage/v8/nav/nav-link/index.md';

<NavLinkExample />

## Navigation within a Modal
Copy link
Contributor

Choose a reason for hiding this comment

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

It looks like the button is partially cut off in the Angular example:
image

Copy link
Contributor Author

@sean-perkins sean-perkins Aug 31, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

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.


Copy link
Contributor

Choose a reason for hiding this comment

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

In the React example, it looks like the inner contents are not mounted until the modal is fully presented. Is that an Ionic bug?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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.

Modal can use Nav to offer a linear navigation that is independent of the URL.
Copy link
Contributor

Choose a reason for hiding this comment

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

The page transitions are not running in the Vue sample.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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.


:::note

The example below uses a reference to Nav and the public method APIs to push and pop views. It is recommended to use NavLink in implementations that do not require this level of granular access and control.

:::

import ModalNavigationExample from '@site/static/usage/v8/nav/modal-navigation/index.md';

<ModalNavigationExample />

## Interfaces

### NavCustomEvent
Expand Down