javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(label): add color variable, examples to test and document

Browse Source 
references #14853 references #14850
This commit is contained in:
Brandy Carney
2018-10-10 10:29:34 -05:00
parent af01378232
commit b485eba3a8
2 changed files with 28 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/components/label/label.scss
View File

@ -5,12 +5,19 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
/**
* @prop --color: Color of the label
*/
--color: currentColor;
@include margin(0); @include margin(0);
display: block; display: block;
flex: 1; flex: 1;
color: var(--color);
font-family: $font-family-base; font-family: $font-family-base;
font-size: inherit; font-size: inherit;

28
core/src/components/label/test/standalone/index.html
View File

@ -8,19 +8,33 @@
<script src="/dist/ionic.js"></script> <script src="/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="/css/core.css"> <link rel="stylesheet" type="text/css" href="/css/core.css">
<link rel="stylesheet" type="text/css" href="/scripts/screenshot/testing.css"> <link rel="stylesheet" type="text/css" href="/scripts/screenshot/testing.css">
<style>
ion-label {
color: red;
}
</style>
</head> </head>
<body> <body>
<h1>Default</h1>
<ion-label>Default</ion-label> <ion-label>Default</ion-label>
<ion-label color="primary">Wrap label this label just goes on and on and on</ion-label> <ion-label>Wrap label this label just goes on and on and on</ion-label>
<ion-label position="fixed">Fixed</ion-label> <ion-label position="fixed">Fixed</ion-label>
<ion-label position="floating">Floating</ion-label> <ion-label position="floating">Floating</ion-label>
<ion-label position="stacked">Stacked</ion-label> <ion-label position="stacked">Stacked</ion-label>
<h1>Colors</h1>
<ion-label color="primary">Primary</ion-label>
<ion-label color="secondary">Secondary</ion-label>
<ion-label color="tertiary">Tertiary</ion-label>
<ion-label color="success">Success</ion-label>
<ion-label color="warning">Warning</ion-label>
<ion-label color="danger">Danger</ion-label>
<ion-label color="light">Light</ion-label>
<ion-label color="medium">Medium</ion-label>
<ion-label color="dark" class="custom">Dark</ion-label>
<ion-label class="custom">Custom</ion-label>
<style>
.custom {
--color: hotpink;
}
</style>
</body> </body>
</html> </html>