Skip to content

docs(navigation): correct routerDirection values #4079

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.

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

Merged
merged 1 commit into from
Apr 16, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion docs/react/navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ const UsersListPage: React.FC = () => {

Other components that have the `routerLink` prop are `IonButton`, `IonCard`, `IonRouterLink`, `IonFabButton`, and `IonItemOption`.

Each of these components also have a `routerDirection` prop to explicitly set the type of page transition to use ("back", "forward", or "none").
Each of these components also have a `routerDirection` prop to explicitly set the type of page transition to use (`"forward"`, `"back"`, or `"root"`).

Outside of these components that have the `routerLink` prop, you can also use React Routers [`Link`](https://v5.reactrouter.com/web/api/Link) component to navigate between views:

Expand Down
2 changes: 1 addition & 1 deletion docs/vue/navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ Both options provide the same navigation mechanism, just fitting different use c

The `router-link` attribute can be set on any Ionic Vue component, and the router will navigate to the route specified when the component is clicked. The `router-link` attribute accepts string values as well as named routes, just like `router.push` from Vue Router. For additional control, the `router-direction` and `router-animation` attributes can be set as well.

The `router-direction` attribute accepts values of `forward`, `back`, or `none` and is used to control the direction of the page transition.
The `router-direction` attribute accepts values of `"forward"`, `"back"`, or `"root"` and is used to control the direction of the page transition.

The `router-animation` attribute accepts an `AnimationBuilder` function and is used to provide a custom page transition that is only used when clicking the component it is provided on. The `AnimationBuilder` type is a function that returns an Ionic Animation instance. See the [Animations documentation](../utilities/animations) for more information on using animations in Ionic Vue.

Expand Down
2 changes: 1 addition & 1 deletion docs/vue/utility-functions.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ interface UseIonRouterResult {
forward: (routerAnimation?: AnimationBuilder) => void;
navigate: (
location: string | Location,
routerDirection?: 'forward' | 'back' | 'root' | 'none',
routerDirection?: 'forward' | 'back' | 'root',
routerAction?: 'push' | 'pop' | 'replace',
routerAnimation?: AnimationBuilder
) => void;
Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-v7/react/navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ const UsersListPage: React.FC = () => {

Other components that have the `routerLink` prop are `IonButton`, `IonCard`, `IonRouterLink`, `IonFabButton`, and `IonItemOption`.

Each of these components also have a `routerDirection` prop to explicitly set the type of page transition to use ("back", "forward", or "none").
Each of these components also have a `routerDirection` prop to explicitly set the type of page transition to use (`"forward"`, `"back"`, or `"root"`).

Outside of these components that have the `routerLink` prop, you can also use React Routers [`Link`](https://v5.reactrouter.com/web/api/Link) component to navigate between views:

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-v7/vue/navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ Both options provide the same navigation mechanism, just fitting different use c

The `router-link` attribute can be set on any Ionic Vue component, and the router will navigate to the route specified when the component is clicked. The `router-link` attribute accepts string values as well as named routes, just like `router.push` from Vue Router. For additional control, the `router-direction` and `router-animation` attributes can be set as well.

The `router-direction` attribute accepts values of `forward`, `back`, or `none` and is used to control the direction of the page transition.
The `router-direction` attribute accepts values of `"forward"`, `"back"`, or `"root"` and is used to control the direction of the page transition.

The `router-animation` attribute accepts an `AnimationBuilder` function and is used to provide a custom page transition that is only used when clicking the component it is provided on. The `AnimationBuilder` type is a function that returns an Ionic Animation instance. See the [Animations documentation](../utilities/animations) for more information on using animations in Ionic Vue.

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-v7/vue/utility-functions.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ interface UseIonRouterResult {
forward: (routerAnimation?: AnimationBuilder) => void;
navigate: (
location: string | Location,
routerDirection?: 'forward' | 'back' | 'root' | 'none',
routerDirection?: 'forward' | 'back' | 'root',
routerAction?: 'push' | 'pop' | 'replace',
routerAnimation?: AnimationBuilder
) => void;
Expand Down