js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixes to the card component

Browse Source
This commit is contained in:
Kelsey Jackson
2025-09-11 11:19:50 -05:00
parent 6dce88429a
commit b0582f98c6
2 changed files with 34 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/webawesome/src/components/card/card.css
View File

@@ -76,10 +76,20 @@
}
}
/* Make these slots "full width" */
::slotted([slot='header']),
::slotted([slot='footer']) {
flex-grow: 1;
}
/* Push slots to sides when the action slots renders */
.has-actions {
justify-content: space-between;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
border-block-end-style: inherit;
border-block-end-color: var(--wa-color-surface-border);
border-block-end-width: var(--wa-panel-border-width);
@@ -94,7 +104,6 @@
.footer {
display: flex;
align-items: center;
justify-content: space-between;
border-block-start-style: inherit;
border-block-start-color: var(--wa-color-surface-border);
border-block-start-width: var(--wa-panel-border-width);

31
packages/webawesome/src/components/card/card.ts
View File

@@ -69,15 +69,30 @@ export default class WaCard extends WebAwesomeElement {
// Vertical Orientation
return html`
<slot name="media" part="media" class="media"></slot>
<header part="header" class="header">
<slot name="header"></slot>
<slot name="header-actions"></slot>
</header>
${this.hasSlotController.test('header-actions')
? html`
<header part="header" class="header has-actions">
<slot name="header"></slot>
<slot name="header-actions"></slot>
</header>`
: html`
<header part="header" class="header">
<slot name="header"></slot>
</header>`
}
<slot part="body" class="body"></slot>
<footer part="footer" class="footer">
<slot name="footer"></slot>
<slot name="footer-actions"></slot>
</footer>
${this.hasSlotController.test('footer-actions')
? html`
<footer part="footer" class="footer has-actions">
<slot name="footer"></slot>
<slot name="footer-actions"></slot>
</footer>`
: html`
<footer part="footer" class="footer">
<slot name="footer"></slot>
</footer>`}
`;
}
}