ion-nav

shadow

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

RouterOutletとは異なり、Navは特定のルーターに関連付けられていません。つまり、Navコンポーネントをロードして他のコンポーネントをスタックに追加しても、ルーター全体のアプリケーションには影響しません。これは、独自のサブナビゲーションを必要とするが、アプリのURLに縛られないモーダルを持つことができるユースケースに適しています。

NavLinkを利用する

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

Interfaces

NavCustomEvent

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

interface NavCustomEvent extends CustomEvent {
  target: HTMLIonNavElement;
}

プロパティ

animated

Description	trueの場合、コンポーネントの遷移をアニメーションで表現します。
Attribute	animated
Type	boolean
Default	true

animation

Description	By 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.
Attribute	undefined
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	undefined
Type	undefined ｜ { [key: string]: any; }
Default	undefined

swipeGesture

Description	ナビコンポーネントがスワイプで戻ることができるようにする場合。
Attribute	swipe-gesture
Type	boolean ｜ undefined
Default	undefined

イベント

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

メソッド

canGoBack

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

getActive

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

getByIndex

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

getPrevious

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

insert

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

insertPages

Description	Inserts 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.
Signature	insertPages(insertIndex: number, insertComponents: NavComponent[] ｜ NavComponentWithProps[], opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>

pop

Description	Pop a component off of the navigation stack. Navigates back from the current component.
Signature	pop(opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>

popTo

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

popToRoot

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

push

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

removeIndex

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

setPages

Description	Set 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.
Signature	setPages(views: NavComponent[] ｜ NavComponentWithProps[], opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean>

setRoot

Description	現在のナビゲーションスタックのルートをコンポーネントに設定します。
Signature	setRoot<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カスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.