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

fix(card-header): get color property working

Browse Source 
references #14723
references #14853
This commit is contained in:
Brandy Carney
2018-10-09 12:52:44 -05:00
parent a9a29f74f9
commit 92514b3019
3 changed files with 94 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
core/src/components/card-header/card-header.scss
View File

@ -6,4 +6,17 @@
:host {
display: block;
position: relative;
background: var(--background);
color: var(--color);
}
:host(.ion-color) {
background: current-color(base);
color: current-color(contrast);
}
:host(.ion-color) ::slotted(ion-card-title),
:host(.ion-color) ::slotted(ion-card-subtitle) {
color: currentColor;
}

10
core/src/components/card-header/test/basic/e2e.ts Normal file
View File

@ -0,0 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';
it('card-header: basic', async () => {
const page = await newE2EPage({
url: '/src/components/card-header/test/basic?ionic:animated=false'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

71
core/src/components/card-header/test/basic/index.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Card Header - 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.bundle.css">
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Card Header - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content">
<ion-card-header>
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
<ion-card-title>Card Title</ion-card-title>
<ion-card-subtitle class="custom-color">Custom Subtitle</ion-card-subtitle>
<ion-card-title class="custom-color">Custom Title</ion-card-title>
<ion-card-subtitle color="secondary" class="custom-color">Color Subtitle</ion-card-subtitle>
<ion-card-title color="danger" class="custom-color">Color Title</ion-card-title>
</ion-card-header>
<ion-card class="custom-background">
<ion-card-header class="custom-header">
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
<ion-card-title>Card Title</ion-card-title>
</ion-card-header>
<ion-card-content>
This is Card Content
</ion-card-content>
</ion-card>
<ion-card class="custom-background">
<ion-card-header color="secondary">
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
<ion-card-title>Card Title</ion-card-title>
</ion-card-header>
<ion-card-content>
This is Card Content
</ion-card-content>
</ion-card>
</ion-content>
</ion-app>
<style>
.custom-background {
--background: url(https://images.unsplash.com/photo-1503756234508-e32369269deb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=47b63db904d2c72377ffc588f645eb45&auto=format&fit=crop&w=975&q=80) center 20%;
--color: white;
}
.custom-header {
--background: rgba(255, 255, 255, 0.5);
}
.custom-color {
--color: hotpink;
}
</style>
</body>
</html>