@onsvisual/svelte-components 1.0.0-next.3 → 1.0.0-next.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
|
|
28
28
|
<Story name="Cards with links" args={{ href: "#0" }} {template} />
|
|
29
29
|
|
|
30
|
-
<Story name="Featured cards" args={{ mode: "featured" }} {template} />
|
|
30
|
+
<Story name="Featured cards with baseline" args={{ mode: "featured", baseline: true }} {template} />
|
|
31
31
|
|
|
32
32
|
<Story
|
|
33
33
|
name="Featured cards with image"
|
|
@@ -31,6 +31,11 @@
|
|
|
31
31
|
* @type {"default"|"featured"}
|
|
32
32
|
*/
|
|
33
33
|
export let mode = "default";
|
|
34
|
+
/**
|
|
35
|
+
* Include a border at the bottom of the card
|
|
36
|
+
* @type {boolean}
|
|
37
|
+
*/
|
|
38
|
+
export let baseline = false;
|
|
34
39
|
/**
|
|
35
40
|
* Optional: URL for title/image link
|
|
36
41
|
* @type {string}
|
|
@@ -58,9 +63,10 @@
|
|
|
58
63
|
class="ons-card ons-u-mb-no {cls}"
|
|
59
64
|
class:ons-card--feature={mode === "featured"}
|
|
60
65
|
class:ons-u-p-l={mode === "featured"}
|
|
66
|
+
class:ons-card--baseline={baseline}
|
|
61
67
|
>
|
|
62
68
|
{#if href}
|
|
63
|
-
<a href
|
|
69
|
+
<a {href} class="ons-card__link">
|
|
64
70
|
<slot name="image">
|
|
65
71
|
{#if image}
|
|
66
72
|
<img
|
|
@@ -117,4 +123,7 @@
|
|
|
117
123
|
.ons-card > :global(p:last-of-type) {
|
|
118
124
|
margin-bottom: 0;
|
|
119
125
|
}
|
|
126
|
+
.ons-card--baseline {
|
|
127
|
+
border-bottom: 2px solid var(--ons-color-borders-light);
|
|
128
|
+
}
|
|
120
129
|
</style>
|
|
@@ -11,6 +11,7 @@ export default class Card extends SvelteComponentTyped<{
|
|
|
11
11
|
colspan?: number | undefined;
|
|
12
12
|
hideTitle?: boolean | undefined;
|
|
13
13
|
mode?: "default" | "featured" | undefined;
|
|
14
|
+
baseline?: boolean | undefined;
|
|
14
15
|
imageAlt?: string | undefined;
|
|
15
16
|
}, {
|
|
16
17
|
[evt: string]: CustomEvent<any>;
|
|
@@ -35,6 +36,7 @@ declare const __propDef: {
|
|
|
35
36
|
colspan?: number | undefined;
|
|
36
37
|
hideTitle?: boolean | undefined;
|
|
37
38
|
mode?: "default" | "featured" | undefined;
|
|
39
|
+
baseline?: boolean | undefined;
|
|
38
40
|
imageAlt?: string | undefined;
|
|
39
41
|
};
|
|
40
42
|
events: {
|