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

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

Browse Source 
references #14850
This commit is contained in:
Brandy Carney
2018-08-08 12:33:15 -04:00
parent 8fef263b71
commit 9beca986f7
3 changed files with 78 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
core/src/components/badge/badge.scss
View File

@ -4,18 +4,31 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
--ion-color-base: #{ion-color(primary, base)}; /**
--ion-color-contrast: #{ion-color(primary, contrast)}; * @prop --background: Background of the badge
* @prop --color: Text color of the badge
*
* @prop --padding-top: Padding top of the badge
* @prop --padding-end: Padding end of the badge
* @prop --padding-bottom: Padding bottom of the badge
* @prop --padding-start: Padding start of the badge
*/
--background: #{ion-color(primary, base)};
--color: #{ion-color(primary, contrast)};
--padding-top: #{$badge-padding-top};
--padding-end: #{$badge-padding-end};
--padding-bottom: #{$badge-padding-bottom};
--padding-start: #{$badge-padding-start};
@include font-smoothing(); @include font-smoothing();
@include padding($badge-padding-top, $badge-padding-end, $badge-padding-bottom, $badge-padding-start); @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
display: inline-block; display: inline-block;
min-width: $badge-min-width; min-width: $badge-min-width;
background-color: #{current-color(base)}; background: var(--background);
color: #{current-color(contrast)}; color: var(--color);
font-size: $badge-font-size; font-size: $badge-font-size;
font-weight: $badge-font-weight; font-weight: $badge-font-weight;
@ -30,6 +43,11 @@
vertical-align: baseline; vertical-align: baseline;
} }
:host(.ion-color) {
background: #{current-color(base)};
color: #{current-color(contrast)};
}
:host(:empty) { :host(:empty) {
display: none; display: none;
} }

11
core/src/components/badge/readme.md
View File

@ -44,6 +44,17 @@ The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`. Possible values are: `"ios"` or `"md"`.
## CSS Custom Properties
| Name | Description |
| ------------------ | --------------------------- |
| `--background` | Background of the badge |
| `--color` | Text color of the badge |
| `--padding-bottom` | Padding bottom of the badge |
| `--padding-end` | Padding end of the badge |
| `--padding-start` | Padding start of the badge |
| `--padding-top` | Padding top of the badge |
---------------------------------------------- ----------------------------------------------

45
core/src/components/badge/test/standalone/index.html
View File

@ -9,10 +9,14 @@
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css"> <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
</head> </head>
<body> <body padding>
<h1>Default</h1>
<!-- Default --> <!-- Default -->
<ion-badge>99</ion-badge> <ion-badge>99</ion-badge>
<hr>
<!-- Colors --> <!-- Colors -->
<ion-badge color="primary">11</ion-badge> <ion-badge color="primary">11</ion-badge>
<ion-badge color="secondary">22</ion-badge> <ion-badge color="secondary">22</ion-badge>
@ -23,5 +27,44 @@
<ion-badge color="light">77</ion-badge> <ion-badge color="light">77</ion-badge>
<ion-badge color="medium">88</ion-badge> <ion-badge color="medium">88</ion-badge>
<ion-badge color="dark">99</ion-badge> <ion-badge color="dark">99</ion-badge>
<h1>Custom</h1>
<!-- Custom Font -->
<ion-badge class="wide">wide</ion-badge>
<ion-badge class="large">large</ion-badge>
<ion-badge class="round">round</ion-badge>
<!-- Custom Colors -->
<ion-badge class="custom">custom</ion-badge>
<ion-badge color="secondary" class="custom">custom w/ secondary</ion-badge>
<style>
ion-badge {
--background: blue;
}
.wide {
min-width: 80px;
}
.large {
font-weight: normal;
font-size: 24px;
}
.round {
width: 60px;
height: 60px;
border-radius: 50%;
vertical-align: middle;
line-height: 50px;
}
.custom {
--background: lightpink;
--color: #222;
}
</style>
</body> </body>
</html> </html>