Skip to main content
Version: v7

ion-nav

shadow

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.

note

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.

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.

Interfaces

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

Descriptiontrueの場合、コンポーネントの遷移をアニメーションで表現します。
Attributeanimated
Typeboolean
Defaulttrue

animation

DescriptionBy default ion-nav animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using AnimationBuilder functions.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

root

DescriptionロードするルートNavComponent
Attributeroot
TypeFunction | HTMLElement | ViewController | null | string | undefined
Defaultundefined

rootParams

Descriptionルートコンポーネントの任意のパラメータ
Attributeundefined
Typeundefined | { [key: string]: any; }
Defaultundefined

swipeGesture

Descriptionナビコンポーネントがスワイプで戻ることができるようにする場合。
Attributeswipe-gesture
Typeboolean | undefined
Defaultundefined

Events

NameDescriptionBubbles
ionNavDidChangeナビのコンポーネントが変更されたときに発生するイベントfalse
ionNavWillChangeナビコンポーネントが変更されたときに発生するイベントfalse

Methods

canGoBack

Description現在のビューが戻ることができる場合は true を返します。
SignaturecanGoBack(view?: ViewController) => Promise<boolean>

getActive

Descriptionアクティブビューを取得します。
SignaturegetActive() => Promise<ViewController | undefined>

getByIndex

Description指定されたインデックスにあるビューを取得します。
SignaturegetByIndex(index: number) => Promise<ViewController | undefined>

getPrevious

Description前のビューを取得します。
SignaturegetPrevious(view?: ViewController) => Promise<ViewController | undefined>

insert

DescriptionInserts a component into the navigation stack at the specified index. This is useful to add a component at any point in the navigation stack.
Signatureinsert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>

insertPages

DescriptionInserts an array of components into the navigation stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view.
SignatureinsertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>

pop

DescriptionPop a component off of the navigation stack. Navigates back from the current component.
Signaturepop(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>

popTo

Descriptionナビゲーションスタック内の特定のインデックスにポップします。
SignaturepopTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>

popToRoot

Descriptionスタックのルートまで戻ってナビゲートする、それがどんなに遠くても。
SignaturepopToRoot(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>

push

DescriptionPush a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams.
Signaturepush<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>

removeIndex

Description指定されたインデックスにあるコンポーネントをナビゲーションスタックから削除します。
SignatureremoveIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>

setPages

DescriptionSet the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller. Navigation parameters can also be passed to the individual pages in the array.
SignaturesetPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>

setRoot

Description現在のナビゲーションスタックのルートをコンポーネントに設定します。
SignaturesetRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>

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.