kempo-ui 0.0.11 → 0.0.13
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.
- package/docs/components/accordion.html +122 -32
- package/docs/components/card.html +57 -41
- package/docs/components/collapsible.html +158 -36
- package/docs/components/content-slider.html +182 -35
- package/docs/components/dialog.html +79 -45
- package/docs/components/focus-capture.html +78 -40
- package/docs/components/hybrid-component.html +72 -34
- package/docs/components/icon.html +122 -41
- package/docs/components/import.html +39 -41
- package/docs/components/light-component.html +60 -35
- package/docs/components/persistant-collapsible.html +84 -38
- package/docs/components/photo-viewer.html +186 -37
- package/docs/components/resize.html +140 -38
- package/docs/components/shadow-component.html +53 -39
- package/docs/components/show-more.html +93 -40
- package/docs/components/side-menu.html +122 -38
- package/docs/components/sortable.html +94 -36
- package/docs/components/split.html +112 -39
- package/docs/components/table.html +269 -31
- package/docs/components/tableControls.html +54 -51
- package/docs/components/tableCustomFields.html +90 -51
- package/docs/components/tableFetchRecords.html +89 -49
- package/docs/components/tableFieldSortHide.html +52 -51
- package/docs/components/tablePagination.html +77 -51
- package/docs/components/tableRecordEditing.html +121 -51
- package/docs/components/tableRecordFiltering.html +63 -49
- package/docs/components/tableRecordHiding.html +56 -50
- package/docs/components/tableRecordSearching.html +52 -51
- package/docs/components/tableRecordSelection.html +53 -52
- package/docs/components/tableRowControls.html +56 -52
- package/docs/components/tableSorting.html +50 -51
- package/docs/components/tabs.html +147 -43
- package/docs/components/tags.html +72 -38
- package/docs/components/theme-switcher.html +86 -36
- package/docs/components/timestamp.html +44 -38
- package/docs/components/toast.html +25 -44
- package/docs/components/toggle.html +119 -39
- package/docs/components/tree.html +145 -39
- package/docs/dev.config.json +1 -1
- package/docs/index.html +209 -55
- package/docs/utils/debounce.html +31 -28
- package/docs/utils/drag.html +42 -28
- package/docs/utils/formatTimestamp.html +67 -28
- package/docs/utils/propConverters.html +80 -23
- package/docs/utils/toTitleCase.html +24 -28
- package/docs/utils/watchWindowSize.html +96 -5
- package/package.json +1 -1
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo.min.css" />
|
|
6
|
+
<title>Accordion - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
9
8
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
10
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -13,59 +12,150 @@
|
|
|
13
12
|
</head>
|
|
14
13
|
<body>
|
|
15
14
|
<k-import src="../nav.inc.html"></k-import>
|
|
15
|
+
<h1 class="ta-center">Accordion</h1>
|
|
16
16
|
<main>
|
|
17
|
-
<h1>watchWindowSize</h1>
|
|
18
|
-
|
|
19
17
|
<details
|
|
20
18
|
class="b r mb"
|
|
21
19
|
>
|
|
22
20
|
<summary class="p">Table of Contents</summary>
|
|
23
21
|
<div class="m mt0 pl">
|
|
24
|
-
<h6>
|
|
22
|
+
<h6>Examples</h6>
|
|
25
23
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#
|
|
27
|
-
<
|
|
24
|
+
<a href="#defaultOpen">Default Open Panel</a><br />
|
|
25
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
26
|
+
<a href="#constructor">Constructor</a><br />
|
|
27
|
+
<a href="#requirements">Requirements</a><br />
|
|
28
|
+
<a href="#properties">Properties</a><br />
|
|
29
|
+
<a href="#methods">Methods</a><br />
|
|
30
|
+
<a href="#events">Events</a><br />
|
|
28
31
|
</div>
|
|
29
32
|
</details>
|
|
30
33
|
|
|
31
34
|
<h3>Description</h3>
|
|
32
|
-
<p>
|
|
35
|
+
<p>A widget that allows a single panel of content to be opened and closed.</p>
|
|
33
36
|
|
|
34
37
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>
|
|
36
|
-
<
|
|
38
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-accordion</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span>></span>Panel 1<span class="hljs-tag"></<span class="hljs-name">k-accordion-header</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>></span>Panel 1 content<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-accordion-panel</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>></span>Panel 2<span class="hljs-tag"></<span class="hljs-name">k-accordion-header</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>></span>Panel 2 content<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-accordion-panel</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>></span>Panel 3<span class="hljs-tag"></<span class="hljs-name">k-accordion-header</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>></span>Panel 3 content<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-accordion-panel</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-accordion</span>></span></code></pre>
|
|
39
|
+
<k-accordion
|
|
40
|
+
class="mb"
|
|
41
|
+
>
|
|
42
|
+
<k-accordion-header for-panel="panel1">Panel 1</k-accordion-header>
|
|
43
|
+
<k-accordion-panel name="panel1">
|
|
44
|
+
<p class="m">Panel 1 content</p>
|
|
45
|
+
</k-accordion-panel>
|
|
46
|
+
<k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
|
|
47
|
+
<k-accordion-panel name="panel2">
|
|
48
|
+
<p class="m">Panel 2 content</p>
|
|
49
|
+
</k-accordion-panel>
|
|
50
|
+
<k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
|
|
51
|
+
<k-accordion-panel name="panel3">
|
|
52
|
+
<p class="m">Panel 3 content</p>
|
|
53
|
+
</k-accordion-panel>
|
|
54
|
+
</k-accordion>
|
|
37
55
|
|
|
38
|
-
<h3 id="
|
|
39
|
-
|
|
40
|
-
<
|
|
41
|
-
<
|
|
56
|
+
<h3 id="defaultOpen"><a href="#defaultOpen" class="no-link">Default Open Panel</a></h3>
|
|
57
|
+
<p>You can have a panel open by default by setting the <code>active</code> attribute to <code>true</code> on both the header and the panel.</p>
|
|
58
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-accordion</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"true"</span>></span>Panel 1<span class="hljs-tag"></<span class="hljs-name">k-accordion-header</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"true"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>></span>Panel 1 content<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">k-accordion-panel</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>></span>Panel 2<span class="hljs-tag"></<span class="hljs-name">k-accordion-header</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>></span>Panel 2 content<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">k-accordion-panel</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>></span>Panel 3<span class="hljs-tag"></<span class="hljs-name">k-accordion-header</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>></span>Panel 3 content<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">k-accordion-panel</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-accordion</span>></span></code></pre>
|
|
59
|
+
<k-accordion
|
|
60
|
+
class="mb"
|
|
61
|
+
>
|
|
62
|
+
<k-accordion-header for-panel="panel1" active="true">Panel 1</k-accordion-header>
|
|
63
|
+
<k-accordion-panel name="panel1" active="true">
|
|
64
|
+
<p class="m">Panel 1 content</p>
|
|
65
|
+
</k-accordion-panel>
|
|
66
|
+
<k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
|
|
67
|
+
<k-accordion-panel name="panel2">
|
|
68
|
+
<p class="m">Panel 2 content</p>
|
|
69
|
+
</k-accordion-panel>
|
|
70
|
+
<k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
|
|
71
|
+
<k-accordion-panel name="panel3">
|
|
72
|
+
<p class="m">Panel 3 content</p>
|
|
73
|
+
</k-accordion-panel>
|
|
74
|
+
</k-accordion>
|
|
75
|
+
|
|
76
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
77
|
+
|
|
78
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
79
|
+
<h6>Extends <a href="./component.html">ShadowComponent</a></h6>
|
|
80
|
+
<h5>
|
|
81
|
+
<code>new Accordion()</code><br />
|
|
82
|
+
</h5>
|
|
83
|
+
|
|
84
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
42
85
|
<ul>
|
|
43
|
-
<li><
|
|
44
|
-
<li><strong>Returns:</strong> Current window width</li>
|
|
86
|
+
<li><a href="./component.html">ShadowComponent</a></li>
|
|
45
87
|
</ul>
|
|
46
88
|
|
|
47
|
-
<
|
|
48
|
-
|
|
89
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
90
|
+
|
|
91
|
+
<h4>Accordion (Main Component)</h4>
|
|
92
|
+
<h5><code>activeHeader<i>: HTMLElement | null</i></code></h5>
|
|
93
|
+
<p>Returns the currently active header element, or <code>null</code> if no panel is open.</p>
|
|
94
|
+
<h5><code>activePanel<i>: HTMLElement | null</i></code></h5>
|
|
95
|
+
<p>Returns the currently active panel element, or <code>null</code> if no panel is open.</p>
|
|
96
|
+
|
|
97
|
+
<h4>AccordionHeader</h4>
|
|
98
|
+
<h5><code>forPanel<i>: string</i></code></h5>
|
|
99
|
+
<p>The panel name that this header controls. Syncs with the <code>for-panel</code> attribute.</p>
|
|
100
|
+
<h5><code>active<i>: boolean</i></code></h5>
|
|
101
|
+
<p>Whether this header is currently active (its associated panel is open). Syncs with the <code>active</code> attribute.</p>
|
|
102
|
+
<h5><code>accordion<i>: Accordion | null</i></code></h5>
|
|
103
|
+
<p>Returns the parent accordion component, or <code>null</code> if not inside an accordion.</p>
|
|
104
|
+
|
|
105
|
+
<h4>AccordionPanel</h4>
|
|
106
|
+
<h5><code>name<i>: string</i></code></h5>
|
|
107
|
+
<p>Unique identifier for this panel. Must match the <code>for-panel</code> attribute of its associated header. Syncs with the <code>name</code> attribute.</p>
|
|
108
|
+
<h5><code>active<i>: boolean</i></code></h5>
|
|
109
|
+
<p>Whether this panel is currently open. Syncs with the <code>active</code> attribute.</p>
|
|
110
|
+
<h5><code>transitioning<i>: boolean</i></code></h5>
|
|
111
|
+
<p>Whether this panel is currently animating (opening or closing). Syncs with the <code>transitioning</code> attribute.</p>
|
|
112
|
+
<h5><code>accordion<i>: Accordion | null</i></code></h5>
|
|
113
|
+
<p>Returns the parent accordion component, or <code>null</code> if not inside an accordion.</p>
|
|
114
|
+
|
|
115
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
116
|
+
|
|
117
|
+
<h4>Accordion (Main Component)</h4>
|
|
118
|
+
<h5><code>getHeader(panelName)<i>: HTMLElement | null</i></code></h5>
|
|
119
|
+
<p>Returns the header element associated with the specified panel name, or <code>null</code> if not found.</p>
|
|
49
120
|
<ul>
|
|
50
|
-
<li><strong>
|
|
121
|
+
<li><strong>panelName</strong> <code>string</code> - The name of the panel whose header to retrieve</li>
|
|
51
122
|
</ul>
|
|
52
123
|
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
<
|
|
56
|
-
|
|
124
|
+
<h5><code>getPanel(panelName)<i>: HTMLElement | null</i></code></h5>
|
|
125
|
+
<p>Returns the panel element with the specified name, or <code>null</code> if not found.</p>
|
|
126
|
+
<ul>
|
|
127
|
+
<li><strong>panelName</strong> <code>string</code> - The name of the panel to retrieve</li>
|
|
128
|
+
</ul>
|
|
57
129
|
|
|
58
|
-
<
|
|
59
|
-
<
|
|
130
|
+
<h5><code>openPanel(panelName)<i>: void</i></code></h5>
|
|
131
|
+
<p>Opens the panel with the specified name. Closes any currently open panel first. Dispatches an <code>openpanel</code> event.</p>
|
|
132
|
+
<ul>
|
|
133
|
+
<li><strong>panelName</strong> <code>string</code> - The name of the panel to open</li>
|
|
134
|
+
</ul>
|
|
60
135
|
|
|
61
|
-
<
|
|
62
|
-
<
|
|
136
|
+
<h5><code>closePanel(panelName)<i>: void</i></code></h5>
|
|
137
|
+
<p>Closes the panel with the specified name. Dispatches a <code>closepanel</code> event.</p>
|
|
138
|
+
<ul>
|
|
139
|
+
<li><strong>panelName</strong> <code>string</code> - The name of the panel to close</li>
|
|
140
|
+
</ul>
|
|
63
141
|
|
|
64
|
-
<
|
|
65
|
-
<p>
|
|
66
|
-
<
|
|
142
|
+
<h5><code>togglePanel(panelName)<i>: void</i></code></h5>
|
|
143
|
+
<p>Toggles the panel with the specified name (opens if closed, closes if open). Dispatches a <code>togglepanel</code> event.</p>
|
|
144
|
+
<ul>
|
|
145
|
+
<li><strong>panelName</strong> <code>string</code> - The name of the panel to toggle</li>
|
|
146
|
+
</ul>
|
|
67
147
|
|
|
148
|
+
<h3 id="events"><a href="#events" class="no-link">Events</a></h3>
|
|
149
|
+
<h5><code>openpanel</code></h5>
|
|
150
|
+
<p>Fired when a panel is opened. The event detail contains <code>{ panelName }</code>.</p>
|
|
151
|
+
<h5><code>closepanel</code></h5>
|
|
152
|
+
<p>Fired when a panel is closed. The event detail contains <code>{ panelName }</code>.</p>
|
|
153
|
+
<h5><code>togglepanel</code></h5>
|
|
154
|
+
<p>Fired when a panel is toggled. The event detail contains <code>{ panelName }</code>.</p>
|
|
155
|
+
|
|
68
156
|
</main>
|
|
69
157
|
<div style="height:33vh"></div>
|
|
158
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
159
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
70
160
|
</body>
|
|
71
|
-
</html>
|
|
161
|
+
</html>
|
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo.min.css" />
|
|
6
|
+
<title>Card - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
9
8
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
10
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -13,59 +12,76 @@
|
|
|
13
12
|
</head>
|
|
14
13
|
<body>
|
|
15
14
|
<k-import src="../nav.inc.html"></k-import>
|
|
15
|
+
<h1 class="ta-center">Card</h1>
|
|
16
16
|
<main>
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
<details
|
|
20
|
-
class="b r mb"
|
|
21
|
-
>
|
|
17
|
+
<details class="b r mb">
|
|
22
18
|
<summary class="p">Table of Contents</summary>
|
|
23
19
|
<div class="m mt0 pl">
|
|
24
|
-
<h6>
|
|
20
|
+
<h6>Examples</h6>
|
|
25
21
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
|
|
27
|
-
<
|
|
22
|
+
|
|
23
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
24
|
+
<a href="#constructor">Constructor</a><br />
|
|
25
|
+
<a href="#requirements">Requirements</a><br />
|
|
26
|
+
<a href="#properties">Properties</a><br />
|
|
27
|
+
<a href="#methods">Methods</a><br />
|
|
28
28
|
</div>
|
|
29
29
|
</details>
|
|
30
30
|
|
|
31
|
-
<
|
|
32
|
-
<
|
|
31
|
+
<p>A card is a "box" around some content with a border, padding and margins that make it stand out.</p>
|
|
32
|
+
<div class="row -mx mb">
|
|
33
|
+
<div class="col d-span-6 m-span-12 px">
|
|
34
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-card</span>></span><br /> This is a card<br /><span class="hljs-tag"></<span class="hljs-name">k-card</span>></span></code></pre>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="col d-span-6 m-span-12 px">
|
|
37
|
+
<k-card>
|
|
38
|
+
This is a card
|
|
39
|
+
</k-card>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
33
42
|
|
|
34
|
-
<h3 id="
|
|
35
|
-
<p>
|
|
36
|
-
<
|
|
43
|
+
<h3 id="labels"><a href="#labels" class="no-link">Labels</a></h3>
|
|
44
|
+
<p>A label gives some text in a box on the top border of the card, helping identify the purpose of the contents.</p>
|
|
45
|
+
<div class="row -mx mb">
|
|
46
|
+
<div class="col d-span-6 m-span-12 px">
|
|
47
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-card</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"I'm a Label"</span>></span><br /> This is a card<br /><span class="hljs-tag"></<span class="hljs-name">k-card</span>></span></code></pre>
|
|
48
|
+
</div>
|
|
49
|
+
<div class="col d-span-6 m-span-12 px">
|
|
50
|
+
<k-card label="I'm a Label">
|
|
51
|
+
This is a card
|
|
52
|
+
</k-card>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
37
55
|
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
<h5><code>watchWindowSize(handler)</code></h5>
|
|
41
|
-
<p>Registers a handler function to be called when the window is resized.</p>
|
|
42
|
-
<ul>
|
|
43
|
-
<li><strong>handler:</strong> Function that receives the new window width</li>
|
|
44
|
-
<li><strong>Returns:</strong> Current window width</li>
|
|
45
|
-
</ul>
|
|
56
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
46
57
|
|
|
47
|
-
<
|
|
48
|
-
<
|
|
49
|
-
<
|
|
50
|
-
<
|
|
51
|
-
|
|
58
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
59
|
+
<h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
|
|
60
|
+
<h5>
|
|
61
|
+
<code>new Card()</code><br />
|
|
62
|
+
<code>new Card(<i>string</i> label)</code>
|
|
63
|
+
</h5>
|
|
52
64
|
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
<
|
|
56
|
-
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ResponsiveComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LitElement</span> </span>{<br /> <span class="hljs-keyword">constructor</span>() {<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-keyword">this</span>.isMobile = <span class="hljs-literal">false</span>;<br /> <span class="hljs-keyword">this</span>.resizeHandler = <span class="hljs-keyword">this</span>.handleResize.bind(<span class="hljs-keyword">this</span>);<br /> }<br /><br /> connectedCallback() {<br /> <span class="hljs-keyword">super</span>.connectedCallback();<br /> <span class="hljs-keyword">const</span> currentWidth = watchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> <span class="hljs-keyword">this</span>.handleResize(currentWidth);<br /> }<br /><br /> disconnectedCallback() {<br /> <span class="hljs-keyword">super</span>.disconnectedCallback();<br /> unwatchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> }<br /><br /> handleResize(width) {<br /> <span class="hljs-keyword">this</span>.isMobile = width < <span class="hljs-number">768</span>;<br /> <span class="hljs-keyword">this</span>.requestUpdate();<br /> }<br /><br /> render() {<br /> <span class="hljs-keyword">return</span> html`<span class="xml"><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${<span class="hljs-keyword">this</span>.isMobile ? <span class="hljs-string">'mobile'</span> : <span class="hljs-string">'desktop'</span>}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span><br /> Content adapts to screen size<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> `</span>;<br /> }<br />}</code></pre>
|
|
65
|
+
<h4>Parameters</h4>
|
|
66
|
+
<h5><code>label<i>: string</i></code></h5>
|
|
67
|
+
<p>The label for the card.</p>
|
|
57
68
|
|
|
58
|
-
<
|
|
59
|
-
<
|
|
69
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
70
|
+
<ul>
|
|
71
|
+
<li><a href="./shadow-component.html">ShadowComponent</a></li>
|
|
72
|
+
</ul>
|
|
60
73
|
|
|
61
|
-
<
|
|
62
|
-
<
|
|
74
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
75
|
+
<h5><code>label<i>: string</i></code></h5>
|
|
76
|
+
<p>The label for the card. Syncs with the <code>label</code> attribute.</p>
|
|
63
77
|
|
|
64
|
-
<
|
|
65
|
-
<
|
|
66
|
-
<
|
|
78
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
79
|
+
<h5><code>setLabel(<i>string</i> label)<i>: void</i></code></h5>
|
|
80
|
+
<p>Sets the label for the card.</p>
|
|
67
81
|
|
|
68
82
|
</main>
|
|
69
83
|
<div style="height:33vh"></div>
|
|
84
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
85
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
70
86
|
</body>
|
|
71
|
-
</html>
|
|
87
|
+
</html>
|