@ionic/core
Version:
Base components for Ionic
156 lines (155 loc) • 4.8 kB
JavaScript
import { Component, Host, Prop, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { createColorClasses, openURL } from '../../utils/theme';
export class RouterLink {
constructor() {
/**
* When using a router, it specifies the transition direction when navigating to
* another page using `href`.
*/
this.routerDirection = 'forward';
this.onClick = (ev) => {
openURL(this.href, ev, this.routerDirection, this.routerAnimation);
};
}
render() {
const mode = getIonMode(this);
const attrs = {
href: this.href,
rel: this.rel,
target: this.target
};
return (h(Host, { onClick: this.onClick, class: createColorClasses(this.color, {
[mode]: true,
'ion-activatable': true
}) },
h("a", Object.assign({}, attrs),
h("slot", null))));
}
static get is() { return "ion-router-link"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["router-link.scss"]
}; }
static get styleUrls() { return {
"$": ["router-link.css"]
}; }
static get properties() { return {
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Color",
"resolved": "string | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
},
"attribute": "color",
"reflect": true
},
"href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
},
"attribute": "href",
"reflect": false
},
"rel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
},
"attribute": "rel",
"reflect": false
},
"routerDirection": {
"type": "string",
"mutable": false,
"complexType": {
"original": "RouterDirection",
"resolved": "\"back\" | \"forward\" | \"root\"",
"references": {
"RouterDirection": {
"location": "import",
"path": "../../interface"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`."
},
"attribute": "router-direction",
"reflect": false,
"defaultValue": "'forward'"
},
"routerAnimation": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "AnimationBuilder | undefined",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`."
}
},
"target": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
},
"attribute": "target",
"reflect": false
}
}; }
}