opensourcemirror
/
Ionic
mirror of https://github.com/ionic-team/ionic.git
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(router-link): add router-link and deprecate anchor (#18620)

This commit is contained in:
Brandy Carney 2019-06-25 18:06:51 -04:00 committed by GitHub
parent 8a88dd25b6
commit d4c7b036fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 333 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
core/api.txt
View File

@ -72,11 +72,9 @@ ion-alert-controller,method,getTop,getTop() => Promise<HTMLIonAlertElement | und
ion-anchor,shadow
ion-anchor,prop,color,string | undefined,undefined,false,false
ion-anchor,prop,download,string | undefined,undefined,false,false
ion-anchor,prop,href,string | undefined,undefined,false,false
ion-anchor,prop,rel,string | undefined,undefined,false,false
ion-anchor,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
ion-anchor,prop,target,string | undefined,undefined,false,false
ion-anchor,css-prop,--background
ion-anchor,css-prop,--color
@ -927,6 +925,14 @@ ion-router,method,push,push(url: string, direction?: RouterDirection) => Promise
ion-router,event,ionRouteDidChange,RouterEventDetail,true
ion-router,event,ionRouteWillChange,RouterEventDetail,true
ion-router-link,shadow
ion-router-link,prop,color,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,routerDirection,"back" | "forward" | "root",'forward',false,false
ion-router-link,css-prop,--background
ion-router-link,css-prop,--color
ion-router-outlet,shadow
ion-router-outlet,prop,animated,boolean,true,false,false
ion-router-outlet,prop,animation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false

60
core/src/components.d.ts vendored
View File

@ -244,10 +244,6 @@ export namespace Components {
*/
'color'?: Color;
/**
* This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
*/
'download': string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href': string | undefined;
@ -259,10 +255,6 @@ export namespace Components {
* When using a router, it specifies the transition direction when navigating to another page using `href`.
*/
'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 IonApp {}
interface IonAvatar {}
@ -2007,6 +1999,24 @@ export namespace Components {
*/
'useHash': boolean;
}
interface IonRouterLink {
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
*/
'color'?: Color;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href': string | undefined;
/**
* 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).
*/
'rel': string | undefined;
/**
* When using a router, it specifies the transition direction when navigating to another page using `href`.
*/
'routerDirection': RouterDirection;
}
interface IonRouterOutlet {
/**
* If `true`, the router-outlet should animate the transition of components.
@ -3160,6 +3170,12 @@ declare global {
new (): HTMLIonRouterElement;
};
interface HTMLIonRouterLinkElement extends Components.IonRouterLink, HTMLStencilElement {}
var HTMLIonRouterLinkElement: {
prototype: HTMLIonRouterLinkElement;
new (): HTMLIonRouterLinkElement;
};
interface HTMLIonRouterOutletElement extends Components.IonRouterOutlet, HTMLStencilElement {}
var HTMLIonRouterOutletElement: {
prototype: HTMLIonRouterOutletElement;
@ -3387,6 +3403,7 @@ declare global {
'ion-route': HTMLIonRouteElement;
'ion-route-redirect': HTMLIonRouteRedirectElement;
'ion-router': HTMLIonRouterElement;
'ion-router-link': HTMLIonRouterLinkElement;
'ion-router-outlet': HTMLIonRouterOutletElement;
'ion-row': HTMLIonRowElement;
'ion-searchbar': HTMLIonSearchbarElement;
@ -3557,10 +3574,6 @@ declare namespace LocalJSX {
*/
'color'?: Color;
/**
* This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
*/
'download'?: string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string | undefined;
@ -3572,10 +3585,6 @@ declare namespace LocalJSX {
* When using a router, it specifies the transition direction when navigating to another page using `href`.
*/
'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 IonApp extends JSXBase.HTMLAttributes<HTMLIonAppElement> {}
interface IonAvatar extends JSXBase.HTMLAttributes<HTMLIonAvatarElement> {}
@ -5218,6 +5227,24 @@ declare namespace LocalJSX {
*/
'useHash'?: boolean;
}
interface IonRouterLink extends JSXBase.HTMLAttributes<HTMLIonRouterLinkElement> {
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
*/
'color'?: Color;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string | undefined;
/**
* 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).
*/
'rel'?: string | undefined;
/**
* When using a router, it specifies the transition direction when navigating to another page using `href`.
*/
'routerDirection'?: RouterDirection;
}
interface IonRouterOutlet extends JSXBase.HTMLAttributes<HTMLIonRouterOutletElement> {
/**
* If `true`, the router-outlet should animate the transition of components.
@ -6036,6 +6063,7 @@ declare namespace LocalJSX {
'ion-route': IonRoute;
'ion-route-redirect': IonRouteRedirect;
'ion-router': IonRouter;
'ion-router-link': IonRouterLink;
'ion-router-outlet': IonRouterOutlet;
'ion-row': IonRow;
'ion-searchbar': IonSearchbar;

4
core/src/components/anchor/anchor.scss
View File

@ -5,8 +5,8 @@
:host {
/**
* @prop --background: Background of the badge
* @prop --color: Text color of the badge
* @prop --background: Background of the anchor
* @prop --color: Text color of the anchor
*/
--background: transparent;
--color: #{ion-color(primary, base)};

27
core/src/components/anchor/anchor.tsx
View File

@ -2,15 +2,17 @@ import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { Color, RouterDirection } from '../../interface';
import { AnchorInterface } from '../../utils/element-interface';
import { createColorClasses, openURL } from '../../utils/theme';
/**
* @deprecated Use `ion-router-link` instead.
*/
@Component({
tag: 'ion-anchor',
styleUrl: 'anchor.scss',
shadow: true
})
export class Anchor implements ComponentInterface, AnchorInterface {
export class Anchor implements ComponentInterface {
/**
* The color to use from your application's color palette.
@ -19,14 +21,6 @@ export class Anchor implements ComponentInterface, AnchorInterface {
*/
@Prop() color?: Color;
/**
* This attribute instructs browsers to download a URL instead of navigating to
* it, so the user will be prompted to save it as a local file. If the attribute
* has a value, it is used as the pre-filled file name in the Save prompt
* (the user can still change the file name if they want).
*/
@Prop() download: string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
@ -45,12 +39,9 @@ export class Anchor implements ComponentInterface, AnchorInterface {
*/
@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;
componentDidLoad() {
console.warn('The <ion-anchor> component has been deprecated. Please use an <ion-router-link> if you are using a vanilla JS or Stencil project or an <a> with the Angular router.');
}
private onClick = (ev: Event) => {
openURL(this.href, ev, this.routerDirection);
@ -59,10 +50,8 @@ export class Anchor implements ComponentInterface, AnchorInterface {
render() {
const mode = getIonMode(this);
const attrs = {
download: this.download,
href: this.href,
rel: this.rel,
target: this.target
rel: this.rel
};
return (
<Host

26
core/src/components/anchor/readme.md
View File

@ -1,30 +1,26 @@
# ion-anchor
The Anchor 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: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use an `<a>` and `routerLink` with the Angular router.
> [DEPRECATED]. Use [ion-router-link](../router-link) instead.
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `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` |
| `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` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `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` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
## CSS Custom Properties
| Name | Description |
| -------------- | ----------------------- |
| `--background` | Background of the badge |
| `--color` | Text color of the badge |
| Name | Description |
| -------------- | ------------------------ |
| `--background` | Background of the anchor |
| `--color` | Text color of the anchor |
----------------------------------------------

30
core/src/components/router-link/readme.md Normal file
View File

@ -0,0 +1,30 @@
# ion-router-link
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: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use an `<a>` and `routerLink` with the Angular router.
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `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` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
## CSS Custom Properties
| Name | Description |
| -------------- | ----------------------------- |
| `--background` | Background of the router link |
| `--color` | Text color of the router link |
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

24
core/src/components/router-link/router-link.scss Normal file
View File

@ -0,0 +1,24 @@
@import "../../themes/ionic.globals";
// Anchor
// --------------------------------------------------
:host {
/**
* @prop --background: Background of the router link
* @prop --color: Text color of the router link
*/
--background: transparent;
--color: #{ion-color(primary, base)};
background: var(--background);
color: var(--color);
}
:host(.ion-color) {
color: current-color(base);
}
a {
@include text-inherit();
}

64
core/src/components/router-link/router-link.tsx Normal file
View File

@ -0,0 +1,64 @@
import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { Color, RouterDirection } from '../../interface';
import { createColorClasses, openURL } from '../../utils/theme';
@Component({
tag: 'ion-router-link',
styleUrl: 'router-link.scss',
shadow: true
})
export class RouterLink implements ComponentInterface {
/**
* The color to use from your application's color palette.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information on colors, see [theming](/docs/theming/basics).
*/
@Prop() color?: Color;
/**
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href: string | undefined;
/**
* 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).
*/
@Prop() rel: string | undefined;
/**
* When using a router, it specifies the transition direction when navigating to
* another page using `href`.
*/
@Prop() routerDirection: RouterDirection = 'forward';
private onClick = (ev: Event) => {
openURL(this.href, ev, this.routerDirection);
}
render() {
const mode = getIonMode(this);
const attrs = {
href: this.href,
rel: this.rel
};
return (
<Host
onClick={this.onClick}
class={{
...createColorClasses(this.color),
[mode]: true,
'ion-activatable': true
}}
>
<a {...attrs}>
<slot></slot>
</a>
</Host>
);
}
}

81
core/src/components/router-link/test/basic/index.html Normal file
View File

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Router Link - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Router Link - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<p>
<a href="#">A</a>
</p>
<p>
<ion-router-link href="#">Router Link</ion-router-link>
</p>
<p>
<ion-router-link href="https://ionicframework.com" rel="external" style="text-decoration: underline">Underline Router Link</ion-router-link>
</p>
<p>
<ion-router-link href="#" download="yes" class="custom">Custom Router Link</ion-router-link>
</p>
<p>
<ion-router-link color="dark" href="#">Dark Router Link</ion-router-link>
</p>
<p>
<ion-router-link color="danger" href="#">Danger Router Link</ion-router-link>
</p>
<p>
<ion-router-link id="toggleColor" color="tertiary" href="#">Dynamic Color</ion-router-link>
</p>
<ion-button onclick="toggleColor()">Toggle Color</ion-button>
</ion-content>
</ion-app>
<script>
const el = document.querySelector('#toggleColor');
function toggleColor() {
const prev = el.getAttribute('color');
el.setAttribute('color', prev === 'secondary' ? 'tertiary' : 'secondary');
el.innerHTML = prev === 'secondary' ? 'Tertiary Router Link' : 'Secondary Router Link';
}
</script>
<style>
.custom {
font-family: cursive;
font-size: 24px;
font-weight: bold;
letter-spacing: 5px;
text-decoration: dotted underline;
text-transform: uppercase;
color: magenta;
}
</style>
</body>
</html>

58
core/src/components/router-link/test/standalone/index.html Normal file
View File

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Router Link - Standalone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/core.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body class="ion-padding">
<h1>Default</h1>
<ion-router-link href="#">Router Link</ion-router-link>
<h1>Colors</h1>
<ion-router-link href="#" color="primary">Primary Router Link</ion-router-link>
<ion-router-link href="#" color="secondary">Secondary Router Link</ion-router-link>
<ion-router-link href="#" color="tertiary">Tertiary Router Link</ion-router-link>
<ion-router-link href="#" color="success">Success Router Link</ion-router-link>
<ion-router-link href="#" color="warning">Warning Router Link</ion-router-link>
<ion-router-link href="#" color="danger">Danger Router Link</ion-router-link>
<ion-router-link href="#" color="light">Light Router Link</ion-router-link>
<ion-router-link href="#" color="medium">Medium Router Link</ion-router-link>
<ion-router-link href="#" color="dark">Dark Router Link</ion-router-link>
<h1>Custom</h1>
<ion-router-link href="#" style="text-decoration: underline">Underline Router Link</ion-router-link>
<ion-router-link href="#" class="cursive">Cursive Router Link</ion-router-link>
<ion-router-link href="#" class="custom">Custom Router Link</ion-router-link>
<ion-router-link href="#" color="secondary" class="custom">Custom Secondary Router Link</ion-router-link>
<style>
ion-router-link {
display: block;
--color: blue;
}
.cursive {
font-family: cursive;
font-size: 24px;
font-weight: bold;
letter-spacing: 5px;
text-decoration: dotted underline;
text-transform: uppercase;
color: magenta;
}
.custom {
--background: blue;
--color: white;
}
</style>
</body>
</html>

5
core/stencil.config.ts
View File

@ -9,7 +9,7 @@ export const config: Config = {
bundles: [
{ components: ['ion-action-sheet'] },
{ components: ['ion-alert'] },
{ components: ['ion-anchor', 'ion-back-button'] },
{ components: ['ion-back-button'] },
{ components: ['ion-app', 'ion-buttons', 'ion-content', 'ion-footer', 'ion-header', 'ion-title', 'ion-toolbar'] },
{ components: ['ion-avatar', 'ion-badge', 'ion-thumbnail'] },
{ components: ['ion-backdrop'] },
@ -37,7 +37,7 @@ export const config: Config = {
{ components: ['ion-refresher', 'ion-refresher-content'] },
{ components: ['ion-reorder', 'ion-reorder-group'] },
{ components: ['ion-ripple-effect'] },
{ components: ['ion-router', 'ion-route', 'ion-route-redirect', 'ion-router-outlet'] },
{ components: ['ion-anchor', 'ion-router', 'ion-route', 'ion-route-redirect', 'ion-router-link', 'ion-router-outlet'] },
{ components: ['ion-searchbar'] },
{ components: ['ion-segment', 'ion-segment-button'] },
{ components: ['ion-select', 'ion-select-option', 'ion-select-popover'] },
@ -118,6 +118,7 @@ export const config: Config = {
'ion-router',
'ion-route',
'ion-route-redirect',
'ion-router-link',
'ion-router-outlet',
'ion-anchor',