メインコンテンツまでスキップ
バージョン: v8

ion-nav

shadow

Navは、任意のコンポーネントをロードし、スタックに新しいコンポーネントを追加するためのスタンドアロンコンポーネントです。

Router Outletとは異なり、Navは特定のルーターに縛られることはありません。つまり、Navコンポーネントをロードし、他のコンポーネントをスタックにプッシュしても、アプリ全体のルーターには影響しない。例えば、新しいコンポーネントをion-navにプッシュして、URLが更新されることを期待するべきではありません。これは、アプリのURLに関連付けずに、独自のサブナビゲーションが必要なモーダルがあるような使用例に適しています。

注記

ion-navはルーティングに使用するものではありません。 代わりに、AngularReactVue、またはバニラJavaScriptプロジェクト用のion-routerのルーティングガイドを参照してください。

NavLinkは、Navと対話する際の簡素化されたAPIです。開発者はコンポーネントをカスタマイズしたり、コンポーネントのプロパティを渡したり、ルートアニメーションの方向を変更したり、ナビゲート時のカスタムアニメーションを定義したりすることができます。

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

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

interface NavCustomEvent extends CustomEvent {
target: HTMLIonNavElement;
}

プロパティ

animated

DescriptionIf true, the nav should animate the transition of components.
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.
Attributeanimation
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

root

DescriptionRoot NavComponent to load
Attributeroot
TypeFunction | HTMLElement | ViewController | null | string | undefined
Defaultundefined

rootParams

DescriptionAny parameters for the root component
Attributeroot-params
Typeundefined | { [key: string]: any; }
Defaultundefined

swipeGesture

DescriptionIf the nav component should allow for swipe-to-go-back.
Attributeswipe-gesture
Typeboolean | undefined
Defaultundefined

イベント

NameDescriptionBubbles
ionNavDidChangeEvent fired when the nav has changed componentsfalse
ionNavWillChangeEvent fired when the nav will change componentsfalse

メソッド

canGoBack

DescriptionReturns true if the current view can go back.
SignaturecanGoBack(view?: ViewController) => Promise<boolean>
Parametersview: The view to check.

getActive

DescriptionGet the active view.
SignaturegetActive() => Promise<ViewController | undefined>

getByIndex

DescriptionGet the view at the specified index.
SignaturegetByIndex(index: number) => Promise<ViewController | undefined>
Parametersindex: The index of the view.

getLength

DescriptionReturns the number of views in the stack.
SignaturegetLength() => Promise<number>

getPrevious

DescriptionGet the previous view.
SignaturegetPrevious(view?: ViewController) => Promise<ViewController | undefined>
Parametersview: The view to get.

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>
ParametersinsertIndex: 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

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>
ParametersinsertIndex: 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

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

popTo

DescriptionPop to a specific index in the navigation stack.
SignaturepopTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>
ParametersindexOrViewCtrl: The index or view controller to pop to.
opts: The navigation options.
done: The transition complete function.

popToRoot

DescriptionNavigate back to the root of the stack, no matter how far back that is.
SignaturepopToRoot(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>
Parametersopts: The navigation options.
done: The transition complete function.

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>
Parameterscomponent: The component to push onto the navigation stack.
componentProps: Any properties of the component.
opts: The navigation options.
done: The transition complete function.

removeIndex

DescriptionRemoves a component from the navigation stack at the specified index.
SignatureremoveIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>
ParametersstartIndex: The number to begin removal at.
removeCount: The number of components to remove.
opts: The navigation options.
done: The transition complete function.

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>
Parametersviews: The list of views to set as the navigation stack.
opts: The navigation options.
done: The transition complete function.

setRoot

DescriptionSet the root for the current navigation stack to a component.
SignaturesetRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>
Parameterscomponent: 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カスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.