mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-16 10:01:59 +08:00
refactor(anchor): remove anchor in favor of router-link (#18935)
BREAKING CHANGES The deprecated `ion-anchor` component has been removed in favor using `ion-router-link`. It should still only be used with vanilla and Stencil JavaScript projects. For Angular projects, use an `<a>` and `routerLink` with the Angular router.
This commit is contained in:
Brandy Carney
@ -70,14 +70,6 @@ ion-alert-controller,method,create,create(options: AlertOptions) => Promise<HTML
|
||||
ion-alert-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
|
||||
ion-alert-controller,method,getTop,getTop() => Promise<HTMLIonAlertElement | undefined>
|
||||
|
||||
ion-anchor,shadow
|
||||
ion-anchor,prop,color,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,css-prop,--background
|
||||
ion-anchor,css-prop,--color
|
||||
|
||||
ion-app,none
|
||||
|
||||
ion-avatar,shadow
|
||||
|
||||
45
core/src/components.d.ts
vendored
45
core/src/components.d.ts
vendored
@ -253,24 +253,6 @@ export namespace Components {
|
||||
*/
|
||||
'getTop': () => Promise<HTMLIonAlertElement | undefined>;
|
||||
}
|
||||
interface IonAnchor {
|
||||
/**
|
||||
* 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 IonApp {}
|
||||
interface IonAvatar {}
|
||||
interface IonBackButton {
|
||||
@ -2908,12 +2890,6 @@ declare global {
|
||||
new (): HTMLIonAlertControllerElement;
|
||||
};
|
||||
|
||||
interface HTMLIonAnchorElement extends Components.IonAnchor, HTMLStencilElement {}
|
||||
var HTMLIonAnchorElement: {
|
||||
prototype: HTMLIonAnchorElement;
|
||||
new (): HTMLIonAnchorElement;
|
||||
};
|
||||
|
||||
interface HTMLIonAppElement extends Components.IonApp, HTMLStencilElement {}
|
||||
var HTMLIonAppElement: {
|
||||
prototype: HTMLIonAppElement;
|
||||
@ -3464,7 +3440,6 @@ declare global {
|
||||
'ion-action-sheet-controller': HTMLIonActionSheetControllerElement;
|
||||
'ion-alert': HTMLIonAlertElement;
|
||||
'ion-alert-controller': HTMLIonAlertControllerElement;
|
||||
'ion-anchor': HTMLIonAnchorElement;
|
||||
'ion-app': HTMLIonAppElement;
|
||||
'ion-avatar': HTMLIonAvatarElement;
|
||||
'ion-back-button': HTMLIonBackButtonElement;
|
||||
@ -3694,24 +3669,6 @@ declare namespace LocalJSX {
|
||||
'translucent'?: boolean;
|
||||
}
|
||||
interface IonAlertController {}
|
||||
interface IonAnchor {
|
||||
/**
|
||||
* 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 IonApp {}
|
||||
interface IonAvatar {}
|
||||
interface IonBackButton {
|
||||
@ -6135,7 +6092,6 @@ declare namespace LocalJSX {
|
||||
'ion-action-sheet-controller': IonActionSheetController;
|
||||
'ion-alert': IonAlert;
|
||||
'ion-alert-controller': IonAlertController;
|
||||
'ion-anchor': IonAnchor;
|
||||
'ion-app': IonApp;
|
||||
'ion-avatar': IonAvatar;
|
||||
'ion-back-button': IonBackButton;
|
||||
@ -6240,7 +6196,6 @@ declare module "@stencil/core" {
|
||||
'ion-action-sheet-controller': LocalJSX.IonActionSheetController & JSXBase.HTMLAttributes<HTMLIonActionSheetControllerElement>;
|
||||
'ion-alert': LocalJSX.IonAlert & JSXBase.HTMLAttributes<HTMLIonAlertElement>;
|
||||
'ion-alert-controller': LocalJSX.IonAlertController & JSXBase.HTMLAttributes<HTMLIonAlertControllerElement>;
|
||||
'ion-anchor': LocalJSX.IonAnchor & JSXBase.HTMLAttributes<HTMLIonAnchorElement>;
|
||||
'ion-app': LocalJSX.IonApp & JSXBase.HTMLAttributes<HTMLIonAppElement>;
|
||||
'ion-avatar': LocalJSX.IonAvatar & JSXBase.HTMLAttributes<HTMLIonAvatarElement>;
|
||||
'ion-back-button': LocalJSX.IonBackButton & JSXBase.HTMLAttributes<HTMLIonBackButtonElement>;
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Anchor
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the anchor
|
||||
* @prop --color: Text color of the anchor
|
||||
*/
|
||||
--background: transparent;
|
||||
--color: #{ion-color(primary, base)};
|
||||
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
:host(.ion-color) {
|
||||
color: current-color(base);
|
||||
}
|
||||
|
||||
a {
|
||||
@include text-inherit();
|
||||
}
|
||||
@ -1,71 +0,0 @@
|
||||
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';
|
||||
|
||||
/**
|
||||
* @deprecated Use `ion-router-link` instead.
|
||||
*/
|
||||
@Component({
|
||||
tag: 'ion-anchor',
|
||||
styleUrl: 'anchor.scss',
|
||||
shadow: true
|
||||
})
|
||||
export class Anchor 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';
|
||||
|
||||
componentDidLoad() {
|
||||
console.warn('[DEPRECATED][ion-anchor] 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);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
# ion-anchor
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
> **[DEPRECATED]** Use `ion-router-link` instead.
|
||||
|
||||
## 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 anchor |
|
||||
| `--color` | Text color of the anchor |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@ -1,81 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Anchor - 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>Anchor - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<p>
|
||||
<a href="#">A</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-anchor href="#">Anchor</ion-anchor>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-anchor href="https://ionicframework.com" rel="external" style="text-decoration: underline">Underline Anchor</ion-anchor>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-anchor href="#" download="yes" class="custom">Custom Anchor</ion-anchor>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-anchor color="dark" href="#">Dark Anchor</ion-anchor>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-anchor color="danger" href="#">Danger Anchor</ion-anchor>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-anchor id="toggleColor" color="tertiary" href="#">Dynamic Color</ion-anchor>
|
||||
</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 Anchor' : 'Secondary Anchor';
|
||||
}
|
||||
</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>
|
||||
@ -1,58 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Anchor - 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-anchor href="#">Anchor</ion-anchor>
|
||||
|
||||
<h1>Colors</h1>
|
||||
<ion-anchor href="#" color="primary">Primary Anchor</ion-anchor>
|
||||
<ion-anchor href="#" color="secondary">Secondary Anchor</ion-anchor>
|
||||
<ion-anchor href="#" color="tertiary">Tertiary Anchor</ion-anchor>
|
||||
<ion-anchor href="#" color="success">Success Anchor</ion-anchor>
|
||||
<ion-anchor href="#" color="warning">Warning Anchor</ion-anchor>
|
||||
<ion-anchor href="#" color="danger">Danger Anchor</ion-anchor>
|
||||
<ion-anchor href="#" color="light">Light Anchor</ion-anchor>
|
||||
<ion-anchor href="#" color="medium">Medium Anchor</ion-anchor>
|
||||
<ion-anchor href="#" color="dark">Dark Anchor</ion-anchor>
|
||||
|
||||
<h1>Custom</h1>
|
||||
<ion-anchor href="#" style="text-decoration: underline">Underline Anchor</ion-anchor>
|
||||
<ion-anchor href="#" class="cursive">Cursive Anchor</ion-anchor>
|
||||
<ion-anchor href="#" class="custom">Custom Anchor</ion-anchor>
|
||||
<ion-anchor href="#" color="secondary" class="custom">Custom Secondary Anchor</ion-anchor>
|
||||
|
||||
<style>
|
||||
ion-anchor {
|
||||
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>
|
||||
@ -50,7 +50,7 @@ test('component: modes', async () => {
|
||||
// components that need to have the mode class
|
||||
// added for external / user styling
|
||||
// e.g. <ion-badge class="md">
|
||||
tags = ['ion-action-sheet', 'ion-alert', 'ion-anchor', 'ion-app', 'ion-avatar', 'ion-back-button', 'ion-backdrop', 'ion-badge', 'ion-button', 'ion-buttons', 'ion-card-content', 'ion-card-header', 'ion-card-subtitle', 'ion-card-title', 'ion-card', 'ion-checkbox', 'ion-chip', 'ion-col', 'ion-content', 'ion-datetime', 'ion-fab', 'ion-fab-button', 'ion-fab-list', 'ion-footer', 'ion-grid', 'ion-header', 'ion-icon', 'ion-img', 'ion-infinite-scroll', 'ion-infinite-scroll-content', 'ion-input', 'ion-item', 'ion-item-divider', 'ion-item-group', 'ion-item-option', 'ion-item-options', 'ion-item-sliding', 'ion-label', 'ion-list', 'ion-list-header', 'ion-loading', 'ion-modal', 'ion-menu', 'ion-menu-button', 'ion-menu-toggle', 'ion-note', 'ion-picker', 'ion-picker-column', 'ion-popover', 'ion-progress-bar', 'ion-radio', 'ion-radio-group', 'ion-range', 'ion-refresher', 'ion-refresher-content', 'ion-reorder', 'ion-reorder-group', 'ion-ripple-effect', 'ion-row', 'ion-searchbar', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-select-option', 'ion-select-popover', 'ion-skeleton-text', 'ion-slide', 'ion-slides', 'ion-spinner', 'ion-split-pane', 'ion-tab-bar', 'ion-tab-button', 'ion-text', 'ion-textarea', 'ion-thumbnail', 'ion-title', 'ion-toast', 'ion-toggle', 'ion-toolbar'];
|
||||
tags = ['ion-action-sheet', 'ion-alert', 'ion-app', 'ion-avatar', 'ion-back-button', 'ion-backdrop', 'ion-badge', 'ion-button', 'ion-buttons', 'ion-card-content', 'ion-card-header', 'ion-card-subtitle', 'ion-card-title', 'ion-card', 'ion-checkbox', 'ion-chip', 'ion-col', 'ion-content', 'ion-datetime', 'ion-fab', 'ion-fab-button', 'ion-fab-list', 'ion-footer', 'ion-grid', 'ion-header', 'ion-icon', 'ion-img', 'ion-infinite-scroll', 'ion-infinite-scroll-content', 'ion-input', 'ion-item', 'ion-item-divider', 'ion-item-group', 'ion-item-option', 'ion-item-options', 'ion-item-sliding', 'ion-label', 'ion-list', 'ion-list-header', 'ion-loading', 'ion-modal', 'ion-menu', 'ion-menu-button', 'ion-menu-toggle', 'ion-note', 'ion-picker', 'ion-picker-column', 'ion-popover', 'ion-progress-bar', 'ion-radio', 'ion-radio-group', 'ion-range', 'ion-refresher', 'ion-refresher-content', 'ion-reorder', 'ion-reorder-group', 'ion-ripple-effect', 'ion-router-link', 'ion-row', 'ion-searchbar', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-select-option', 'ion-select-popover', 'ion-skeleton-text', 'ion-slide', 'ion-slides', 'ion-spinner', 'ion-split-pane', 'ion-tab-bar', 'ion-tab-button', 'ion-text', 'ion-textarea', 'ion-thumbnail', 'ion-title', 'ion-toast', 'ion-toggle', 'ion-toolbar'];
|
||||
|
||||
const globalMode = await page.evaluate(() => document.documentElement.getAttribute('mode'));
|
||||
for (const tag of tags) {
|
||||
|
||||
@ -33,7 +33,6 @@
|
||||
<ion-content>
|
||||
<ion-action-sheet></ion-action-sheet>
|
||||
<ion-alert></ion-alert>
|
||||
<ion-anchor></ion-anchor>
|
||||
<ion-avatar></ion-avatar>
|
||||
<ion-backdrop></ion-backdrop>
|
||||
<ion-badge></ion-badge>
|
||||
@ -85,6 +84,7 @@
|
||||
<ion-reorder-group></ion-reorder-group>
|
||||
<ion-reorder></ion-reorder>
|
||||
<ion-ripple-effect></ion-ripple-effect>
|
||||
<ion-router-link></ion-router-link>
|
||||
<ion-row></ion-row>
|
||||
<ion-searchbar></ion-searchbar>
|
||||
<ion-segment-button></ion-segment-button>
|
||||
|
||||
@ -53,7 +53,6 @@ export const config: Config = {
|
||||
|
||||
// Deprecated
|
||||
{ components: [
|
||||
'ion-anchor',
|
||||
'ion-action-sheet-controller',
|
||||
'ion-alert-controller',
|
||||
'ion-loading-controller',
|
||||
@ -133,7 +132,6 @@ export const config: Config = {
|
||||
'ion-route-redirect',
|
||||
'ion-router-link',
|
||||
'ion-router-outlet',
|
||||
'ion-anchor',
|
||||
|
||||
// tabs
|
||||
'ion-tabs',
|
||||
|
||||
Reference in New Issue
Block a user