ion-nav
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.