Skip to main content
Version: v7

ion-nav

shadow

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

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

note

ion-nav is not meant to be used for routing. Instead, see the routing guides for Angular, React, and Vue, or ion-router for vanilla JavaScript projects.

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.

Contents

Edit this page