christoph/svelte-formula11
1
Fork 0
Code Issues 23 Actions Packages Projects 1 Activity

Lib: Allow card component to have left aligned header image

Browse Source
This commit is contained in:
Christoph Urlacher
2025-12-26 17:05:34 +01:00
parent 94e728bf39
commit a46a176d59
1 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/cards/Card.svelte
View File

@ -21,6 +21,9 @@
/** Hide the header image element. It can be shown by removing the "hidden" property using JS and the imgid. */ /** Hide the header image element. It can be shown by removing the "hidden" property using JS and the imgid. */
imghidden?: boolean; imghidden?: boolean;
/** If the header image is positioned at the left of the card */
imgleft?: boolean;
/** The width class for the card, defaults to [w-auto] */ /** The width class for the card, defaults to [w-auto] */
width?: string; width?: string;
@ -35,6 +38,7 @@
imgheight = undefined, imgheight = undefined,
imgid = undefined, imgid = undefined,
imghidden = false, imghidden = false,
imgleft = false,
width = "w-auto", width = "w-auto",
imgonclick = undefined, imgonclick = undefined,
...restProps ...restProps
@ -45,7 +49,7 @@
} }
</script> </script>
<div class="card {width} overflow-hidden bg-white shadow"> <div class="card {width} overflow-hidden bg-white shadow {imgleft ? 'flex' : ''}">
<!-- Allow empty strings for images that only appear after user action --> <!-- Allow empty strings for images that only appear after user action -->
{#if imgsrc !== undefined} {#if imgsrc !== undefined}
<LazyImage <LazyImage