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

feat(card): convert card-content to shadow DOM

Browse Source
This commit is contained in:
Brandy Smith
2025-10-28 15:13:29 -04:00
parent d19f06167a
commit 53a795d759
8 changed files with 15 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/api.txt
View File

@ -179,7 +179,7 @@ ion-alert,css-prop,--width,ionic
ion-alert,css-prop,--width,ios
ion-alert,css-prop,--width,md
ion-app,none
ion-app,shadow
ion-app,prop,mode,"ios" | "md",undefined,false,false
ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false
ion-app,method,setFocus,setFocus(elements: HTMLElement[]) => Promise<void>
@ -504,7 +504,7 @@ ion-card,css-prop,--color,ios
ion-card,css-prop,--color,md
ion-card,part,native
ion-card-content,none
ion-card-content,shadow
ion-card-content,prop,mode,"ios" | "md",undefined,false,false
ion-card-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false

2
core/src/components/card-content/card-content.common.scss
View File

@ -1,6 +1,6 @@
// Card Content
// --------------------------------------------------
ion-card-content {
:host {
position: relative;
}

6
core/src/components/card-content/card-content.ionic.scss
View File

@ -4,7 +4,7 @@
// Ionic Card Content
// --------------------------------------------------
.card-content-ionic {
:host {
@include globals.padding(globals.$ion-space-400);
@include globals.typography(globals.$ion-body-md-regular);
@ -18,7 +18,3 @@
@include globals.margin(globals.$ion-space-200, 0, globals.$ion-space-200, 0);
}
}
ion-card-header + .card-content-ionic {
padding-top: 0;
}

6
core/src/components/card-content/card-content.ios.scss
View File

@ -4,7 +4,7 @@
// iOS Card Header
// --------------------------------------------------
.card-content-ios {
:host {
@include padding($card-ios-padding-top, $card-ios-padding-end, $card-ios-padding-bottom, $card-ios-padding-start);
font-size: $card-ios-font-size;
@ -41,7 +41,3 @@
font-size: dynamic-font(14px);
}
}
ion-card-header + .card-content-ios {
padding-top: 0;
}

6
core/src/components/card-content/card-content.md.scss
View File

@ -4,7 +4,7 @@
// Material Design Card Content
// --------------------------------------------------
.card-content-md {
:host {
@include padding($card-md-padding-top, $card-md-padding-end, $card-md-padding-bottom, $card-md-padding-start);
font-size: $card-md-font-size;
@ -44,7 +44,3 @@
line-height: 1.5;
}
}
ion-card-header + .card-content-md {
padding-top: 0;
}

2
core/src/components/card-content/card-content.native.scss
View File

@ -4,6 +4,6 @@
// Card Content
// --------------------------------------------------
ion-card-content {
:host {
display: block;
}

8
core/src/components/card-content/card-content.tsx
View File

@ -14,6 +14,7 @@ import { getIonTheme } from '../../global/ionic-global';
md: 'card-content.md.scss',
ionic: 'card-content.ionic.scss',
},
shadow: true,
})
export class CardContent implements ComponentInterface {
render() {
@ -22,11 +23,10 @@ export class CardContent implements ComponentInterface {
<Host
class={{
[theme]: true,
// Used internally for styling
[`card-content-${theme}`]: true,
}}
></Host>
>
<slot></slot>
</Host>
);
}
}

4
core/src/css/core.scss
View File

@ -424,3 +424,7 @@ h1[tabindex="-1"]:focus,
overflow: hidden;
}
}
ion-card-header + ion-card-content {
padding-top: 0;
}