mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 08:09:32 +08:00
feat(router-link): add router-link and deprecate anchor (#18620)
This commit is contained in:
Brandy Carney
30
core/src/components/router-link/readme.md
Normal file
30
core/src/components/router-link/readme.md
Normal 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
24
core/src/components/router-link/router-link.scss
Normal 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
64
core/src/components/router-link/router-link.tsx
Normal 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
81
core/src/components/router-link/test/basic/index.html
Normal 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
58
core/src/components/router-link/test/standalone/index.html
Normal 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>
|
||||
Reference in New Issue
Block a user