@onsvisual/svelte-components 1.1.54 → 1.1.56
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.
|
@@ -33,6 +33,22 @@
|
|
|
33
33
|
</Grid>
|
|
34
34
|
{/snippet}
|
|
35
35
|
|
|
36
|
+
{#snippet threeColumnsTemplate()}
|
|
37
|
+
<Grid colWidth="medium">
|
|
38
|
+
<GridCell><div class="grid-cell">Grid cell one</div></GridCell>
|
|
39
|
+
<GridCell><div class="grid-cell">Grid cell two</div></GridCell>
|
|
40
|
+
<GridCell><div class="grid-cell">Grid cell three</div></GridCell>
|
|
41
|
+
</Grid>
|
|
42
|
+
{/snippet}
|
|
43
|
+
|
|
44
|
+
{#snippet threeColumnsClassTemplate()}
|
|
45
|
+
<Grid>
|
|
46
|
+
<GridCell cls="ons-col-4@m"><div class="grid-cell">Grid cell one</div></GridCell>
|
|
47
|
+
<GridCell cls="ons-col-4@m"><div class="grid-cell">Grid cell two</div></GridCell>
|
|
48
|
+
<GridCell cls="ons-col-4@m"><div class="grid-cell">Grid cell three</div></GridCell>
|
|
49
|
+
</Grid>
|
|
50
|
+
{/snippet}
|
|
51
|
+
|
|
36
52
|
<Story name="Default" args={{}} {template} />
|
|
37
53
|
|
|
38
54
|
<Story name="Wide columns" args={{ colWidth: "wide" }} {template} />
|
|
@@ -41,6 +57,10 @@
|
|
|
41
57
|
|
|
42
58
|
<Story name="Full width columns" args={{ colWidth: "full" }} {template} />
|
|
43
59
|
|
|
60
|
+
<Story name="Three columns with medium column width" args={{}} template={threeColumnsTemplate} />
|
|
61
|
+
|
|
62
|
+
<Story name="Three columns with GridCell class override" args={{}} template={threeColumnsClassTemplate} />
|
|
63
|
+
|
|
44
64
|
<style>
|
|
45
65
|
.grid-cell {
|
|
46
66
|
background: var(--ons-color-grey-10);
|
|
@@ -51,18 +51,24 @@
|
|
|
51
51
|
const width = getContext("width") || "wide";
|
|
52
52
|
const colWidth = getContext("colWidth") || null;
|
|
53
53
|
const rowHeight = getContext("rowHeight") || null;
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
: "";
|
|
54
|
+
|
|
55
|
+
const colClass = colWidth
|
|
56
|
+
? calcSpans(classes?.[width]?.[colWidth] || [], colspan)
|
|
57
|
+
.map((c) => `ons-col-${c}`)
|
|
58
|
+
.join(" ")
|
|
59
|
+
: "";
|
|
61
60
|
</script>
|
|
62
61
|
|
|
63
62
|
{#if colWidth}
|
|
64
63
|
<div
|
|
65
|
-
class="ons-grid__col {colClass}"
|
|
64
|
+
class="ons-grid__col {cls || colClass}"
|
|
65
|
+
style:height={typeof rowHeight === "number" ? `${rowHeight}px` : rowHeight}
|
|
66
|
+
>
|
|
67
|
+
<slot />
|
|
68
|
+
</div>
|
|
69
|
+
{:else if cls}
|
|
70
|
+
<div
|
|
71
|
+
class="ons-grid__col {cls}"
|
|
66
72
|
style:height={typeof rowHeight === "number" ? `${rowHeight}px` : rowHeight}
|
|
67
73
|
>
|
|
68
74
|
<slot />
|