ion-nav
Navは、任意のコンポーネントをロードし、スタックに新しいコンポーネントを追加するためのスタンドアロンコンポーネントです。
Router Outletとは異なり、Navは特定のルーターに縛られることはありません。つまり、Navコンポーネントをロードし、他のコンポーネントをスタックにプッシュしても、アプリ全体のルーターには影響しない。例えば、新しいコンポーネントをion-navにプッシュして、URLが更新されることを期待するべきではありません。これは、アプリのURLに関連付けずに、独自のサブナビゲーションが必要なモーダルがあるような使用例に適しています。
ion-navはルーティングに使用するものではありません。 代わりに、Angular、React、Vue、またはバニラJavaScriptプロジェクト用のion-routerのルーティングガイドを参照してください。
NavLinkを利用する
NavLinkは、Navと対話する際の簡素化されたAPIです。開発者はコンポーネントをカスタマイズしたり、コンポーネントのプロパティを渡したり、ルートアニメーションの方向を変更したり、ナビゲート時のカスタムアニメーションを定義したりすることができます。
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
必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。
interface NavCustomEvent extends CustomEvent {
target: HTMLIonNavElement;
}
プロパティ
animated
| Description | trueの場合、コンポーネントの遷移をアニメーションで表現します。 |
| Attribute | animated |
| Type | boolean |
| Default | true |
animation
| Description | デフォルトでは、ion-nav はmode（ios または Material Design）に応じてページ間の遷移をアニメーション化します。しかし、このプロパティは AnimationBuilder 関数を使用して、独自の遷移を作成することができます。 |
| 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 | Bubbles |
|---|---|---|
ionNavDidChange | ナビのコンポーネントが変更されたときに発生するイベント | false |
ionNavWillChange | ナビコンポーネントが変更されたときに発生するイベント | false |
メソッド
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> |
getLength
| Description | スタック内のビューの数を返します。 |
| Signature | getLength() => Promise<number> |
getPrevious
| Description | 前のビューを取得します。 |
| Signature | getPrevious(view?: ViewController) => Promise<ViewController ｜ undefined> |
insert
| Description | 指定されたインデックスのナビゲーションスタックにコンポーネントを挿入します。これは、ナビゲーションスタックの任意の位置にコンポーネントを追加するのに便利です。 |
| Signature | insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> ｜ null, opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
insertPages
| Description | 指定されたインデックスのナビゲーションスタックにコンポーネントの配列を挿入します。配列の最後のコンポーネントはビューとしてインスタンス化され、アニメーションしてアクティブビューになります。 |
| Signature | insertPages(insertIndex: number, insertComponents: NavComponent[] ｜ NavComponentWithProps[], opts?: NavOptions ｜ null, done?: TransitionDoneFn) => Promise<boolean> |
pop
| Description | ナビゲーションスタックからコンポーネントをポップオフします。現在のコンポーネントからナビゲートして戻る。 |
| 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 | 新しいコンポーネントを現在のナビゲーションスタックにプッシュします。追加情報があれば、オブジェクトとして一緒に渡す。この追加情報には、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 | 現在のナビゲーションスタックのビューを設定し、最後のビューにナビゲートします。デフォルトではアニメーションは無効になっていますが、ナビゲーションコントローラーにオプションを渡すことで有効にすることができます。ナビゲーションパラメーターは、配列内の各ページに渡すこともできます。 |
| 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.