From b8f8763f68eee9d9be7a1d87a4f205694bd3ee23 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Tue, 15 Apr 2025 15:56:18 -0400 Subject: [PATCH] docs(navigation): correct routerDirection values --- docs/react/navigation.md | 2 +- docs/vue/navigation.md | 2 +- docs/vue/utility-functions.md | 2 +- versioned_docs/version-v7/react/navigation.md | 2 +- versioned_docs/version-v7/vue/navigation.md | 2 +- versioned_docs/version-v7/vue/utility-functions.md | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/react/navigation.md b/docs/react/navigation.md index 2c1efa761e2..9b7129667e9 100644 --- a/docs/react/navigation.md +++ b/docs/react/navigation.md @@ -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: diff --git a/docs/vue/navigation.md b/docs/vue/navigation.md index 1286ab01537..1012bce6bb8 100644 --- a/docs/vue/navigation.md +++ b/docs/vue/navigation.md @@ -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. diff --git a/docs/vue/utility-functions.md b/docs/vue/utility-functions.md index d5461a255a9..519b9265b12 100644 --- a/docs/vue/utility-functions.md +++ b/docs/vue/utility-functions.md @@ -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; diff --git a/versioned_docs/version-v7/react/navigation.md b/versioned_docs/version-v7/react/navigation.md index 2c1efa761e2..9b7129667e9 100644 --- a/versioned_docs/version-v7/react/navigation.md +++ b/versioned_docs/version-v7/react/navigation.md @@ -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: diff --git a/versioned_docs/version-v7/vue/navigation.md b/versioned_docs/version-v7/vue/navigation.md index 1286ab01537..1012bce6bb8 100644 --- a/versioned_docs/version-v7/vue/navigation.md +++ b/versioned_docs/version-v7/vue/navigation.md @@ -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. diff --git a/versioned_docs/version-v7/vue/utility-functions.md b/versioned_docs/version-v7/vue/utility-functions.md index d5461a255a9..519b9265b12 100644 --- a/versioned_docs/version-v7/vue/utility-functions.md +++ b/versioned_docs/version-v7/vue/utility-functions.md @@ -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;