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

more work

Browse Source
This commit is contained in:
Kelsey Jackson
2025-05-16 15:56:54 -05:00
parent 5a2e12e5e2
commit 8b0179cc2e
2 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/docs/components/card.md
View File

@@ -9,7 +9,7 @@ icon: card
<wa-card class="card-overview">
<img
slot="image"
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
src="https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExaThxZzkwc29tMDN1eWY2eXZ2NXR1am90N3lhdTR0aHdxZ29memFmdSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/JmPenP1svctdfDCEHi/giphy.gif"
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
/>
@@ -57,7 +57,7 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
<wa-card class="card-header">
<div slot="header" class="wa-split">
Header Title
<wa-icon-button name="gear" variant="solid" label="Settings" class="wa-size-m"></wa-icon-button>
<wa-icon-button slot="actions" name="gear" variant="solid" label="Settings" class="wa-size-m"></wa-icon-button>
</div>
This card has a header. You can put all sorts of things in it!

7
src/components/card/card.ts
View File

@@ -62,9 +62,14 @@ export default class WaCard extends WebAwesomeElement {
}
render() {
if (this.orientation === 'horizontal') {
return html`horizontal`;
}
return html`
<slot name="image" part="image" class="image"></slot>
<slot name="header" part="header" class="header"></slot>
<slot name="header" part="header" class="header">
<slot name="actions" part="actions" class="actions"></slot>
</slot>
<slot part="body" class="body"></slot>
<slot name="footer" part="footer" class="footer"></slot>
`;