diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index a934319cef..aabd492c70 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -504,6 +504,10 @@ declare global {
namespace StencilComponents {
interface IonAnchor {
+ /**
+ * The color to use for the anchor.
+ */
+ '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.
*/
@@ -534,6 +538,10 @@ declare global {
}
namespace JSXElements {
export interface IonAnchorAttributes extends HTMLAttributes {
+ /**
+ * The color to use for the anchor.
+ */
+ '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.
*/
diff --git a/core/src/components/anchor/anchor.scss b/core/src/components/anchor/anchor.scss
index 69dce57dac..39a7aca3ca 100644
--- a/core/src/components/anchor/anchor.scss
+++ b/core/src/components/anchor/anchor.scss
@@ -1,5 +1,25 @@
@import "../../themes/ionic.globals";
+// Anchor
+// --------------------------------------------------
+
+:host {
+ // default background / color
+ --background: transparent;
+ --color: #{ion-color(primary, base)};
+
+ --text-decoration: none;
+
+ background: var(--background);
+ color: var(--color);
+
+ text-decoration: var(--text-decoration);
+}
+
+:host(.ion-color) {
+ --color: #{current-color(base)};
+}
+
a {
@include text-inherit();
}
\ No newline at end of file
diff --git a/core/src/components/anchor/anchor.tsx b/core/src/components/anchor/anchor.tsx
index ed776ef99f..8959a5c87e 100644
--- a/core/src/components/anchor/anchor.tsx
+++ b/core/src/components/anchor/anchor.tsx
@@ -1,17 +1,22 @@
import { Component, Prop } from '@stencil/core';
-import { RouterDirection } from '../../interface';
-import { openURL } from '../../utils/theme';
+import { Color, RouterDirection } from '../../interface';
+import { createColorClasses, openURL } from '../../utils/theme';
@Component({
tag: 'ion-anchor',
- shadow: true,
- styleUrl: 'anchor.scss'
+ styleUrl: 'anchor.scss',
+ shadow: true
})
export class Anchor {
@Prop({ context: 'window' }) win!: Window;
+ /**
+ * The color to use for the anchor.
+ */
+ @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.
@@ -24,11 +29,19 @@ export class Anchor {
*/
@Prop() routerDirection?: RouterDirection;
+ hostData() {
+ return {
+ class: createColorClasses(this.color)
+ };
+ }
+
render() {
- return openURL(this.win, this.href, ev, this.routerDirection)}>
-
- ;
+ return (
+ openURL(this.win, this.href, ev, this.routerDirection)}>
+
+
+ );
}
}
diff --git a/core/src/components/anchor/readme.md b/core/src/components/anchor/readme.md
index 0bebdfab26..b25e7df9d3 100644
--- a/core/src/components/anchor/readme.md
+++ b/core/src/components/anchor/readme.md
@@ -1,6 +1,6 @@
# ion-anchor
-Anchor is a component used for navigating to a specified link. Similar to the browsers anchor tag, Anchor can accept a href for the location, and a direction for the transition animation.
+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.
diff --git a/core/src/components/anchor/test/basic/index.html b/core/src/components/anchor/test/basic/index.html
new file mode 100644
index 0000000000..0ab08e14bc
--- /dev/null
+++ b/core/src/components/anchor/test/basic/index.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+ Anchor - Basic
+
+
+
+
+
+
+
+
+
+
+ Anchor - Basic
+
+
+
+
+