Skip to main content
Version: v6

ion-router-link

shadow

Contents

The router link component is used for navigating to a specified link. Similar to the browser's anchor tag, it can accept a href for the location, and a direction for the transition animation.

note

Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use an <a> and routerLink with the Angular router.

Properties

color

Descriptionアプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です.色に関する詳しい情報は theming を参照してください。
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

href

Descriptionハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。
Attributehref
Typestring | undefined
Defaultundefined

rel

Descriptionターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られたリンクタイプのリストです。
Attributerel
Typestring | undefined
Defaultundefined

routerAnimation

Descriptionルータを使用する場合、hrefを使用して別のページに移動する際の遷移アニメーションを指定します。
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

routerDirection

Descriptionルータを使用する場合、hrefを使用して他のページに移動する際の遷移方向を指定します。
Attributerouter-direction
Type"back" | "forward" | "root"
Default'forward'

target

Descriptionリンク先のURLを表示する場所を指定します。hrefを指定した場合のみ適用される。特別なキーワードがあります。_blank", "_self", "_parent", "_top".
Attributetarget
Typestring | undefined
Defaultundefined

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

NameDescription
--backgroundルーターリンクの背景
--colorルーターリンクの文字色

Slots

No slots available for this component.

View Source