mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 03:00:58 +08:00
@ -930,6 +930,7 @@ ion-router-link,prop,color,string | undefined,undefined,false,false
|
|||||||
ion-router-link,prop,href,string | undefined,undefined,false,false
|
ion-router-link,prop,href,string | undefined,undefined,false,false
|
||||||
ion-router-link,prop,rel,string | undefined,undefined,false,false
|
ion-router-link,prop,rel,string | undefined,undefined,false,false
|
||||||
ion-router-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
|
ion-router-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
|
||||||
|
ion-router-link,prop,target,string | undefined,undefined,false,false
|
||||||
ion-router-link,css-prop,--background
|
ion-router-link,css-prop,--background
|
||||||
ion-router-link,css-prop,--color
|
ion-router-link,css-prop,--color
|
||||||
|
|
||||||
|
8
core/src/components.d.ts
vendored
8
core/src/components.d.ts
vendored
@ -2016,6 +2016,10 @@ export namespace Components {
|
|||||||
* When using a router, it specifies the transition direction when navigating to another page using `href`.
|
* When using a router, it specifies the transition direction when navigating to another page using `href`.
|
||||||
*/
|
*/
|
||||||
'routerDirection': RouterDirection;
|
'routerDirection': RouterDirection;
|
||||||
|
/**
|
||||||
|
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
|
||||||
|
*/
|
||||||
|
'target': string | undefined;
|
||||||
}
|
}
|
||||||
interface IonRouterOutlet {
|
interface IonRouterOutlet {
|
||||||
/**
|
/**
|
||||||
@ -5248,6 +5252,10 @@ declare namespace LocalJSX {
|
|||||||
* When using a router, it specifies the transition direction when navigating to another page using `href`.
|
* When using a router, it specifies the transition direction when navigating to another page using `href`.
|
||||||
*/
|
*/
|
||||||
'routerDirection'?: RouterDirection;
|
'routerDirection'?: RouterDirection;
|
||||||
|
/**
|
||||||
|
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
|
||||||
|
*/
|
||||||
|
'target'?: string | undefined;
|
||||||
}
|
}
|
||||||
interface IonRouterOutlet extends JSXBase.HTMLAttributes<HTMLIonRouterOutletElement> {
|
interface IonRouterOutlet extends JSXBase.HTMLAttributes<HTMLIonRouterOutletElement> {
|
||||||
/**
|
/**
|
||||||
|
@ -15,6 +15,7 @@ The router link component is used for navigating to a specified link. Similar to
|
|||||||
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
|
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
|
||||||
| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` |
|
| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` |
|
||||||
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
|
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
|
||||||
|
| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` |
|
||||||
|
|
||||||
|
|
||||||
## CSS Custom Properties
|
## CSS Custom Properties
|
||||||
|
@ -36,6 +36,13 @@ export class RouterLink implements ComponentInterface {
|
|||||||
*/
|
*/
|
||||||
@Prop() routerDirection: RouterDirection = 'forward';
|
@Prop() routerDirection: RouterDirection = 'forward';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specifies where to display the linked URL.
|
||||||
|
* Only applies when an `href` is provided.
|
||||||
|
* Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
|
||||||
|
*/
|
||||||
|
@Prop() target: string | undefined;
|
||||||
|
|
||||||
private onClick = (ev: Event) => {
|
private onClick = (ev: Event) => {
|
||||||
openURL(this.href, ev, this.routerDirection);
|
openURL(this.href, ev, this.routerDirection);
|
||||||
}
|
}
|
||||||
@ -44,7 +51,8 @@ export class RouterLink implements ComponentInterface {
|
|||||||
const mode = getIonMode(this);
|
const mode = getIonMode(this);
|
||||||
const attrs = {
|
const attrs = {
|
||||||
href: this.href,
|
href: this.href,
|
||||||
rel: this.rel
|
rel: this.rel,
|
||||||
|
target: this.target
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<Host
|
<Host
|
||||||
|
@ -30,7 +30,7 @@
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<ion-router-link href="https://ionicframework.com" rel="external" style="text-decoration: underline">Underline Router Link</ion-router-link>
|
<ion-router-link href="https://ionicframework.com" rel="external" target="_blank" style="text-decoration: underline">External Router Link</ion-router-link>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
Reference in New Issue
Block a user