Skip to main content
Version: v7

ion-nav

shadow

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

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

note

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

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

Interfaces

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

interface NavCustomEvent extends CustomEvent {
target: HTMLIonNavElement;
}

プロパティ

animated

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

animation

Descriptionデフォルトでは、ion-nav はmode(ios または Material Design)に応じてページ間の遷移をアニメーション化します。しかし、このプロパティは AnimationBuilder 関数を使用して、独自の遷移を作成することができます。
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

イベント

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

メソッド

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

Description指定されたインデックスのナビゲーションスタックにコンポーネントを挿入します。これは、ナビゲーションスタックの任意の位置にコンポーネントを追加するのに便利です。
Signatureinsert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>

insertPages

Description指定されたインデックスのナビゲーションスタックにコンポーネントの配列を挿入します。配列の最後のコンポーネントはビューとしてインスタンス化され、アニメーションしてアクティブビューになります。
SignatureinsertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>

pop

Descriptionナビゲーションスタックからコンポーネントをポップオフします。現在のコンポーネントからナビゲートして戻る。
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

Description新しいコンポーネントを現在のナビゲーションスタックにプッシュします。追加情報があれば、オブジェクトとして一緒に渡す。この追加情報には、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

Description現在のナビゲーションスタックのビューを設定し、最後のビューにナビゲートします。デフォルトではアニメーションは無効になっていますが、ナビゲーションコントローラーにオプションを渡すことで有効にすることができます。ナビゲーションパラメーターは、配列内の各ページに渡すこともできます。
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カスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.