javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(anchor): add proper styling, support for colors, and basic test

Browse Source 
fixes #14777
This commit is contained in:
Brandy Carney
2018-07-16 12:57:55 -04:00
parent 9d0d9bf3d2
commit 1dbf5bbb35
5 changed files with 120 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -504,6 +504,10 @@ declare global {
namespace StencilComponents { namespace StencilComponents {
interface IonAnchor { 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. * 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 { namespace JSXElements {
export interface IonAnchorAttributes extends HTMLAttributes { 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. * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/ */

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

@ -1,5 +1,25 @@
@import "../../themes/ionic.globals"; @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 { a {
@include text-inherit(); @include text-inherit();
} }

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

@ -1,17 +1,22 @@
import { Component, Prop } from '@stencil/core'; import { Component, Prop } from '@stencil/core';
import { RouterDirection } from '../../interface'; import { Color, RouterDirection } from '../../interface';
import { openURL } from '../../utils/theme'; import { createColorClasses, openURL } from '../../utils/theme';
@Component({ @Component({
tag: 'ion-anchor', tag: 'ion-anchor',
shadow: true, styleUrl: 'anchor.scss',
styleUrl: 'anchor.scss' shadow: true
}) })
export class Anchor { export class Anchor {
@Prop({ context: 'window' }) win!: Window; @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. * Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered. * If this property is set, an anchor tag will be rendered.
@ -24,11 +29,19 @@ export class Anchor {
*/ */
@Prop() routerDirection?: RouterDirection; @Prop() routerDirection?: RouterDirection;
hostData() {
return {
class: createColorClasses(this.color)
};
}
render() { render() {
return <a return (
<a
href={this.href} href={this.href}
onClick={(ev) => openURL(this.win, this.href, ev, this.routerDirection)}> onClick={(ev) => openURL(this.win, this.href, ev, this.routerDirection)}>
<slot></slot> <slot></slot>
</a>; </a>
);
} }
} }

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

@ -1,6 +1,6 @@
# ion-anchor # 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.
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

69
core/src/components/anchor/test/basic/index.html Normal file
View File

@ -0,0 +1,69 @@
<!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">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Anchor - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<p>
<a href="#">A</a>
</p>
<p>
<ion-anchor href="#">Anchor</ion-anchor>
</p>
<p>
<ion-anchor href="#" class="underline">Underline 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>
.underline {
--text-decoration: underline;
}
</style>
</body>
</html>