fix(router-link): add missing target prop (#18659)

references #18655
This commit is contained in:
Brandy Carney
2019-07-01 11:23:41 -04:00
committed by GitHub
parent 36a58df181
commit 1f51ab27c4
5 changed files with 20 additions and 2 deletions

View File

@ -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

View File

@ -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> {
/** /**

View File

@ -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

View File

@ -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

View File

@ -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>