ion-nav
Navは、任意のコンポーネントをロードし、スタックに新しいコンポーネントを追加するためのスタンドアロンコンポーネントです。
Router Outletとは異なり、Navは特定のルーターに縛られることはありません。つまり、Navコンポーネントをロードし、他のコンポーネントをスタックにプッシュしても、アプリ全体のルーターには影響しない。例えば、新しいコンポーネントをion-nav
にプッシュして、URLが更新されることを期待するべきではありません。これは、アプリのURLに関連付けずに、独自のサブナビゲーションが必要なモーダルがあるような使用例に適しています。
ion-nav
はルーティングに使用するものではありません。 代わりに、Angular、React、Vue、またはバニラJavaScriptプロジェクト用のion-router
のルーティングガイドを参照してください。
NavLinkを利用する
NavLinkは、Navと対話する際の簡略化されたAPIです。開発者は、コンポーネントをカスタマイズしたり、コンポーネントのプロパティを渡したり、ルートアニメーションの方向を変更したり、ナビゲート時のカスタムアニメーションを定義したりすることができます。
Interfaces
NavCustomEvent
必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent
インターフェースの代わりにこのインターフェースを使用することが可能です。
interface NavCustomEvent extends CustomEvent {
target: HTMLIonNavElement;
}
プロパティ
animated
Description | If true , the nav should animate the transition of components. |
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 | Root NavComponent to load |
Attribute | root |
Type | Function | HTMLElement | ViewController | null | string | undefined |
Default | undefined |
rootParams
Description | Any parameters for the root component |
Attribute | undefined |
Type | undefined | { [key: string]: any; } |
Default | undefined |
swipeGesture
Description | If the nav component should allow for swipe-to-go-back. |
Attribute | swipe-gesture |
Type | boolean | undefined |
Default | undefined |
イベント
Name | Description | Bubbles |
---|---|---|
ionNavDidChange | Event fired when the nav has changed components | false |
ionNavWillChange | Event fired when the nav will change components | false |
メソッド
canGoBack
Description | Returns true if the current view can go back. |
Signature | canGoBack(view?: ViewController) => Promise<boolean> |
getActive
Description | Get the active view. |
Signature | getActive() => Promise<ViewController | undefined> |
getByIndex
Description | Get the view at the specified index. |
Signature | getByIndex(index: number) => Promise<ViewController | undefined> |
getLength
Description | Returns the number of views in the stack. |
Signature | getLength() => Promise<number> |
getPrevious
Description | Get the previous view. |
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 | Pop to a specific index in the navigation stack. |
Signature | popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean> |
popToRoot
Description | Navigate back to the root of the stack, no matter how far back that is. |
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 | Removes a component from the navigation stack at the specified index. |
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 | Set the root for the current navigation stack to a component. |
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.