ion-nav
Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.
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. For example, you should not push a new component to ion-nav and expect the URL to update. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.
ion-nav is not meant to be used for routing. Instead, see the routing guides for Angular, React, and Vue, or ion-router for vanilla JavaScript projects.
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.
Navigation within a Modal
Modal can use Nav to offer a linear navigation that is independent of the URL.
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.
Interfaces
NavCustomEvent
While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.
interface NavCustomEvent extends CustomEvent {
target: HTMLIonNavElement;
}
Properties
animated
| Description | trueの場合、コンポーネントの遷移をアニメーションで表現します。 |
| Attribute | animated |
| Type | boolean |
| Default | true |
animation
| Description | デフォルトでは、ion-nav はmode（ios または Material Design）に応じてページ間の遷移をアニメーション化します。しかし、このプロパティは AnimationBuilder 関数を使用して、独自の遷移を作成することができます。 |
| Attribute | animation |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
root
| Description | ロードするルートNavComponent |
| Attribute | root |
| Type | Function ｜ HTMLElement ｜ ViewController ｜ null ｜ string ｜ undefined |
| Default | undefined |
rootParams
| Description | ルートコンポーネントの任意のパラメータ |
| Attribute | root-params |
| Type | undefined ｜ { [key: string]: any; } |
| Default | undefined |
swipeGesture
| Description | ナビコンポーネントがスワイプで戻ることができるようにする場合。 |
| Attribute | swipe-gesture |
| Type | boolean ｜ undefined |
| Default | undefined |
Events
| Name | Description | Bubbles |
|---|---|---|
ionNavDidChange | ナビのコンポーネントが変更されたときに発生するイベント | false |
ionNavWillChange | ナビコンポーネントが変更されたときに発生するイベント | false |
Methods
canGoBack
| Description | 現在のビューが戻ることができる場合は true を返します。 |
| Signature | canGoBack(view?: ViewController) => Promise<boolean> |
| Parameters | view: The view to check. |
getActive
| Description | アクティブビューを取得します。 |
| Signature | getActive() => Promise<ViewController ｜ undefined> |
getByIndex
| Description | 指定されたインデックスにあるビューを取得します。 |
| Signature | getByIndex(index: number) => Promise<ViewController ｜ undefined> |
| Parameters | index: The index of the view. |
getLength
| Description | スタック内のビューの数を返します。 |
| Signature | getLength() => Promise<number> |
getPrevious
| Description | 前のビューを取得します。 |
| Signature | getPrevious(view?: ViewController) => Promise<ViewController ｜ undefined> |
| Parameters | view: The view to get. |
insert
| Description | 指定されたインデックスのナビゲーションスタックにコンポーネントを挿入します。これは、ナビゲーションスタックの任意の位置にコンポーネントを追加するのに便利です。 |
| Signature | insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | insertIndex: The index to insert the component at in the stack. component: The component to insert into the navigation stack. componentProps: Any properties of the component. opts: The navigation options. done: The transition complete function. |
insertPages
| Description | 指定されたインデックスのナビゲーションスタックにコンポーネントの配列を挿入します。配列の最後のコンポーネントはビューとしてインスタンス化され、アニメーションしてアクティブビューになります。 |
| Signature | insertPages(insertIndex: number, insertComponents: NavComponent[] ｜ NavComponentWithProps[], opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | insertIndex: The index to insert the components at in the stack. insertComponents: The components to insert into the navigation stack. opts: The navigation options. done: The transition complete function. |
pop
| Description | ナビゲーションスタ ックからコンポーネントをポップオフします。現在のコンポーネントからナビゲートして戻る。 |
| Signature | pop(opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | opts: The navigation options. done: The transition complete function. |
popTo
| Description | ナビゲーションスタック内の特定のインデックスにポップします。 |
| Signature | popTo(indexOrViewCtrl: number ｜ ViewController, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | indexOrViewCtrl: The index or view controller to pop to. opts: The navigation options. done: The transition complete function. |
popToRoot
| Description | スタックのルートまで戻ってナビゲートする、それがどんなに遠くても。 |
| Signature | popToRoot(opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | opts: The navigation options. done: The transition complete function. |
push
| Description | 新しいコンポーネントを現在のナビゲーションスタックにプッシュします。追加情報があれば、オブジェクトとして一緒に渡す。この追加情報には、NavParamsからアクセスできます。 |
| Signature | push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | component: The component to push onto the navigation stack. componentProps: Any properties of the component. opts: The navigation options. done: The transition complete function. |
removeIndex
| Description | 指定されたインデックスにあるコンポーネントをナビゲーションスタックから削除します。 |
| Signature | removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | startIndex: The number to begin removal at. removeCount: The number of components to remove. opts: The navigation options. done: The transition complete function. |
setPages
| Description | 現在のナビゲーションスタックのビューを設定し、最後のビューにナビゲートします。デフォルトではアニメーションは無効になっていますが、ナビゲーションコントローラーにオプションを渡すことで有効にすることができます。ナビゲーションパラメーターは、配列内の各ページに渡すこともできます。 |
| Signature | setPages(views: NavComponent[] ｜ NavComponentWithProps[], opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | views: The list of views to set as the navigation stack. opts: The navigation options. done: The transition complete function. |
setRoot
| Description | 現在のナビゲーションスタックのルートをコンポーネントに設定します。 |
| Signature | setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
| Parameters | component: The component to set as the root of the navigation stack. componentProps: Any properties of the component. opts: The navigation options. done: The transition complete function. |
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
No CSS custom properties available for this component.
Slots
No slots available for this component.