javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(anchor): add custom properties and make sure color works properly

Browse Source 
references #14850
This commit is contained in:
Brandy Carney
2018-08-08 10:51:29 -04:00
parent 288eeb54ee
commit 8fef263b71
3 changed files with 69 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,16 +4,19 @@
// --------------------------------------------------
:host {
// default background / color
--color: #{ion-color(primary, base)};
/**
* @prop --background: Background of the badge
* @prop --color: Text color of the badge
*/
--background: transparent;
--color: #{ion-color(primary, base)};
background: var(--background);
color: var(--color);
}
:host(.ion-color) {
--color: #{current-color(base)};
color: current-color(base);
}
a {

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

@@ -60,6 +60,13 @@ When using a router, it specifies the transition direction when navigating to
another page using `href`.
## CSS Custom Properties
| Name | Description |
| -------------- | ----------------------- |
| `--background` | Background of the badge |
| `--color` | Text color of the badge |
----------------------------------------------

56
core/src/components/anchor/test/standalone/index.html Normal file
View File

@@ -0,0 +1,56 @@
<!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">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
</head>
<body 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>