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

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,ios
ion-alert,css-prop,--width,md ion-alert,css-prop,--width,md
ion-app,none ion-app,shadow
ion-app,prop,mode,"ios" | "md",undefined,false,false ion-app,prop,mode,"ios" | "md",undefined,false,false
ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false
ion-app,method,setFocus,setFocus(elements: HTMLElement[]) => Promise<void> 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,css-prop,--color,md
ion-card,part,native 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,mode,"ios" | "md",undefined,false,false
ion-card-content,prop,theme,"ios" | "md" | "ionic",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 // Card Content
// -------------------------------------------------- // --------------------------------------------------
ion-card-content { :host {
position: relative; position: relative;
} }

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

@ -4,7 +4,7 @@
// Ionic Card Content // Ionic Card Content
// -------------------------------------------------- // --------------------------------------------------
.card-content-ionic { :host {
@include globals.padding(globals.$ion-space-400); @include globals.padding(globals.$ion-space-400);
@include globals.typography(globals.$ion-body-md-regular); @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); @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 // 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); @include padding($card-ios-padding-top, $card-ios-padding-end, $card-ios-padding-bottom, $card-ios-padding-start);
font-size: $card-ios-font-size; font-size: $card-ios-font-size;
@ -41,7 +41,3 @@
font-size: dynamic-font(14px); 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 // 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); @include padding($card-md-padding-top, $card-md-padding-end, $card-md-padding-bottom, $card-md-padding-start);
font-size: $card-md-font-size; font-size: $card-md-font-size;
@ -44,7 +44,3 @@
line-height: 1.5; 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 // Card Content
// -------------------------------------------------- // --------------------------------------------------
ion-card-content { :host {
display: block; 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', md: 'card-content.md.scss',
ionic: 'card-content.ionic.scss', ionic: 'card-content.ionic.scss',
}, },
shadow: true,
}) })
export class CardContent implements ComponentInterface { export class CardContent implements ComponentInterface {
render() { render() {
@ -22,11 +23,10 @@ export class CardContent implements ComponentInterface {
<Host <Host
class={{ class={{
[theme]: true, [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; overflow: hidden;
} }
} }
ion-card-header + ion-card-content {
padding-top: 0;
}