kempo-ui 0.0.9 → 0.0.10
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/dist/src/components/Card.js +3 -3
- package/dist/src/components/Dialog.js +11 -11
- package/dist/src/components/Icon.js +1 -1
- package/dist/src/components/Toggle.js +15 -14
- package/dist/src/components/Tree.js +11 -3
- package/docs/components/accordion.html +2 -3
- package/docs/components/card.html +2 -3
- package/docs/components/collapsible.html +2 -3
- package/docs/components/content-slider.html +2 -3
- package/docs/components/dialog.html +2 -2
- package/docs/components/focus-capture.html +2 -3
- package/docs/components/hybrid-component.html +2 -3
- package/docs/components/icon.html +4 -5
- package/docs/components/import.html +2 -3
- package/docs/components/light-component.html +2 -3
- package/docs/components/persistant-collapsible.html +19 -37
- package/docs/components/photo-viewer.html +129 -84
- package/docs/components/resize.html +2 -3
- package/docs/components/shadow-component.html +2 -3
- package/docs/components/show-more.html +2 -4
- package/docs/components/side-menu.html +2 -3
- package/docs/components/sortable.html +3 -3
- package/docs/components/split.html +2 -3
- package/docs/components/table.html +2 -3
- package/docs/components/tableControls.html +2 -3
- package/docs/components/tableCustomFields.html +2 -3
- package/docs/components/tableFetchRecords.html +2 -3
- package/docs/components/tableFieldSortHide.html +2 -3
- package/docs/components/tablePagination.html +2 -3
- package/docs/components/tableRecordEditing.html +2 -3
- package/docs/components/tableRecordFiltering.html +2 -3
- package/docs/components/tableRecordHiding.html +2 -3
- package/docs/components/tableRecordSearching.html +2 -3
- package/docs/components/tableRecordSelection.html +2 -3
- package/docs/components/tableRowControls.html +2 -3
- package/docs/components/tableSorting.html +2 -3
- package/docs/components/tabs.html +89 -70
- package/docs/components/tags.html +45 -16
- package/docs/components/theme-switcher.html +3 -4
- package/docs/components/timestamp.html +40 -10
- package/docs/components/toast.html +3 -2
- package/docs/components/toggle.html +3 -5
- package/docs/components/tree.html +76 -64
- package/docs/src/components/Card.js +3 -3
- package/docs/src/components/Dialog.js +11 -11
- package/docs/src/components/Icon.js +1 -1
- package/docs/src/components/Toggle.js +15 -14
- package/docs/src/components/Tree.js +11 -3
- package/docs/utils/debounce.html +5 -24
- package/docs/utils/drag.html +3 -13
- package/docs/utils/formatTimestamp.html +7 -25
- package/docs/utils/propConverters.html +7 -46
- package/docs/utils/toTitleCase.html +2 -2
- package/docs/utils/watchWindowSize.html +7 -98
- package/package.json +1 -1
- package/src/components/Card.js +3 -0
- package/src/components/Toggle.js +69 -69
- package/src/components/Tree.js +10 -2
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>PhotoViewer - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
8
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
9
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
10
|
<script type="module" src="./init.js"></script>
|
|
11
11
|
</head>
|
|
@@ -36,106 +36,152 @@
|
|
|
36
36
|
|
|
37
37
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
38
38
|
<p>The <code>k-photo-viewer</code> component displays images with fullscreen viewing capabilities. Click on any image to open it in fullscreen mode.</p>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
39
|
+
<div class="row -mx mb">
|
|
40
|
+
<div class="col d-span-6 m-span-12 px">
|
|
41
|
+
<k-card label="HTML">
|
|
42
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/civic.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda Civic Type R"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Honda Civic Type R - Track-focused hot hatch<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span></code></pre>
|
|
43
|
+
</k-card>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="col d-span-6 m-span-12 px">
|
|
46
|
+
<k-card label="Output">
|
|
47
|
+
<k-photo-viewer
|
|
48
|
+
src="../media/civic.jpg"
|
|
49
|
+
alt="Honda Civic Type R"
|
|
50
|
+
>
|
|
51
|
+
<p>Honda Civic Type R - Track-focused hot hatch</p>
|
|
52
|
+
</k-photo-viewer>
|
|
53
|
+
</k-card>
|
|
54
|
+
</div>
|
|
49
55
|
</div>
|
|
50
56
|
|
|
51
57
|
<h3 id="gallery"><a href="#gallery" class="no-link">Gallery Navigation</a></h3>
|
|
52
58
|
<p>When multiple PhotoViewer components are siblings, you can navigate between them using the arrow buttons in fullscreen mode or keyboard arrow keys.</p>
|
|
53
59
|
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
60
|
+
<div class="row -mx mb">
|
|
61
|
+
<div class="col d-span-6 m-span-12 px">
|
|
62
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"gallery"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/civic.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda Civic Type R"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Honda Civic Type R<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/corvette.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Chevrolet Corvette C8"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Chevrolet Corvette C8<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/evo.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Mitsubishi Lancer Evolution"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Mitsubishi Lancer Evolution<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
63
|
+
</k-card>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="col d-span-6 m-span-12 px">
|
|
66
|
+
<k-card label="Output">
|
|
67
|
+
<div class="gallery mb" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; max-width: 800px;">
|
|
68
|
+
<k-photo-viewer
|
|
69
|
+
src="../media/civic.jpg"
|
|
70
|
+
alt="Honda Civic Type R"
|
|
71
|
+
>
|
|
72
|
+
<h6 class="m0">Honda Civic Type R</h6>
|
|
73
|
+
</k-photo-viewer>
|
|
74
|
+
<k-photo-viewer
|
|
75
|
+
src="../media/corvette.jpg"
|
|
76
|
+
alt="Chevrolet Corvette C8"
|
|
77
|
+
>
|
|
78
|
+
<h6 class="m0">Chevrolet Corvette C8</h6>
|
|
79
|
+
</k-photo-viewer>
|
|
80
|
+
<k-photo-viewer
|
|
81
|
+
src="../media/evo.jpg"
|
|
82
|
+
alt="Mitsubishi Lancer Evolution"
|
|
83
|
+
>
|
|
84
|
+
<h6 class="m0">Mitsubishi Lancer Evolution</h6>
|
|
85
|
+
</k-photo-viewer>
|
|
86
|
+
</div>
|
|
87
|
+
</k-card>
|
|
88
|
+
</div>
|
|
75
89
|
</div>
|
|
90
|
+
|
|
76
91
|
|
|
77
92
|
<h3 id="globalNavigation"><a href="#globalNavigation" class="no-link">Global Navigation</a></h3>
|
|
78
93
|
<p>With the <code>global</code> attribute, PhotoViewers can navigate between all instances on the page, not just siblings.</p>
|
|
94
|
+
<div class="row -mx mb">
|
|
95
|
+
<div class="col d-span-6 m-span-12 px">
|
|
96
|
+
<k-card label="HTML">
|
|
97
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/gtr.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Nissan GT-R"</span><br /> <span class="hljs-attr">global</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Nissan GT-R (Global Navigation)<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span></code></pre>
|
|
98
|
+
</k-card>
|
|
99
|
+
</div>
|
|
100
|
+
<div class="col d-span-6 m-span-12 px">
|
|
101
|
+
<k-card label="Output">
|
|
102
|
+
<k-photo-viewer
|
|
103
|
+
src="../media/gtr.jpg"
|
|
104
|
+
alt="Nissan GT-R"
|
|
105
|
+
global
|
|
106
|
+
>
|
|
107
|
+
<h6 class="m0">Nissan GT-R (Global Navigation)</h6>
|
|
108
|
+
<p class="m0 small">This viewer can navigate to all photos on the page</p>
|
|
109
|
+
</k-photo-viewer>
|
|
110
|
+
</k-card>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
|
|
79
115
|
|
|
80
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/gtr.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Nissan GT-R"</span><br /> <span class="hljs-attr">global</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Nissan GT-R (Global Navigation)<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span></code></pre>
|
|
81
116
|
|
|
82
|
-
<div class="mb" style="max-width: 300px;">
|
|
83
|
-
<k-photo-viewer
|
|
84
|
-
src="../media/gtr.jpg"
|
|
85
|
-
alt="Nissan GT-R"
|
|
86
|
-
global
|
|
87
|
-
>
|
|
88
|
-
<h6 class="m0">Nissan GT-R (Global Navigation)</h6>
|
|
89
|
-
<p class="m0 small">This viewer can navigate to all photos on the page</p>
|
|
90
|
-
</k-photo-viewer>
|
|
91
|
-
</div>
|
|
92
117
|
|
|
93
118
|
<h3 id="customControls"><a href="#customControls" class="no-link">Custom Controls</a></h3>
|
|
94
119
|
<p>Customize the fullscreen controls using slots and disable keyboard controls if needed.</p>
|
|
120
|
+
<div class="row -mx mb">
|
|
121
|
+
<div class="col d-span-6 m-span-12 px">
|
|
122
|
+
<k-card label="HTML">
|
|
123
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/nsx.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda NSX"</span><br /> <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"close"</span>></span>✕<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"prev"</span>></span>◀<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"next"</span>></span>▶<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Honda NSX<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Custom controls, keyboard disabled<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/evo.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Mitsubishi Lancer Evolution"</span><br /> <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"close"</span>></span>✕<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"prev"</span>></span>◀<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"next"</span>></span>▶<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Mitsubishi Lancer Evolution<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Custom controls, keyboard disabled<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span></code></pre>
|
|
124
|
+
</k-card>
|
|
125
|
+
</div>
|
|
126
|
+
<div class="col d-span-6 m-span-12 px">
|
|
127
|
+
<k-card label="Output">
|
|
128
|
+
<div class="mb" style="max-width: 350px;">
|
|
129
|
+
<k-photo-viewer
|
|
130
|
+
src="../media/nsx.jpg"
|
|
131
|
+
alt="Honda NSX"
|
|
132
|
+
keyboard-controls="false"
|
|
133
|
+
>
|
|
134
|
+
<span slot="close">✕</span>
|
|
135
|
+
<span slot="prev">◀</span>
|
|
136
|
+
<span slot="next">▶</span>
|
|
137
|
+
<h6 class="m0">Honda NSX</h6>
|
|
138
|
+
<p class="m0">Custom controls, keyboard disabled</p>
|
|
139
|
+
</k-photo-viewer>
|
|
140
|
+
<k-photo-viewer
|
|
141
|
+
src="../media/evo.jpg"
|
|
142
|
+
alt="Mitsubishi Lancer Evolution"
|
|
143
|
+
keyboard-controls="false"
|
|
144
|
+
>
|
|
145
|
+
<span slot="close">✕</span>
|
|
146
|
+
<span slot="prev">◀</span>
|
|
147
|
+
<span slot="next">▶</span>
|
|
148
|
+
<h6 class="m0">Mitsubishi Lancer Evolution</h6>
|
|
149
|
+
<p class="m0">Custom controls, keyboard disabled</p>
|
|
150
|
+
</k-photo-viewer>
|
|
151
|
+
</div>
|
|
152
|
+
</k-card>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
|
|
95
157
|
|
|
96
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/nsx.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda NSX"</span><br /> <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"close"</span>></span>✕<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"prev"</span>></span>◀<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"next"</span>></span>▶<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Honda NSX<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Custom controls, keyboard disabled<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/evo.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Mitsubishi Lancer Evolution"</span><br /> <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"close"</span>></span>✕<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"prev"</span>></span>◀<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"next"</span>></span>▶<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Mitsubishi Lancer Evolution<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Custom controls, keyboard disabled<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span></code></pre>
|
|
97
158
|
|
|
98
|
-
<div class="mb" style="max-width: 350px;">
|
|
99
|
-
<k-photo-viewer
|
|
100
|
-
src="../media/nsx.jpg"
|
|
101
|
-
alt="Honda NSX"
|
|
102
|
-
keyboard-controls="false"
|
|
103
|
-
>
|
|
104
|
-
<span slot="close">✕</span>
|
|
105
|
-
<span slot="prev">◀</span>
|
|
106
|
-
<span slot="next">▶</span>
|
|
107
|
-
<h6 class="m0">Honda NSX</h6>
|
|
108
|
-
<p class="m0">Custom controls, keyboard disabled</p>
|
|
109
|
-
</k-photo-viewer>
|
|
110
|
-
<k-photo-viewer
|
|
111
|
-
src="../media/evo.jpg"
|
|
112
|
-
alt="Mitsubishi Lancer Evolution"
|
|
113
|
-
keyboard-controls="false"
|
|
114
|
-
>
|
|
115
|
-
<span slot="close">✕</span>
|
|
116
|
-
<span slot="prev">◀</span>
|
|
117
|
-
<span slot="next">▶</span>
|
|
118
|
-
<h6 class="m0">Mitsubishi Lancer Evolution</h6>
|
|
119
|
-
<p class="m0">Custom controls, keyboard disabled</p>
|
|
120
|
-
</k-photo-viewer>
|
|
121
|
-
</div>
|
|
122
159
|
|
|
123
160
|
<h3 id="captions"><a href="#captions" class="no-link">Captions</a></h3>
|
|
124
161
|
<p>Use different captions for thumbnail view and fullscreen view using slots.</p>
|
|
125
|
-
|
|
126
|
-
<
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
>
|
|
133
|
-
<
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
162
|
+
|
|
163
|
+
<div class="row -mx mb">
|
|
164
|
+
<div class="col d-span-6 m-span-12 px">
|
|
165
|
+
<k-card label="HTML">
|
|
166
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/corvette.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Chevrolet Corvette C8"</span><br />></span><br /> <span class="hljs-comment"><!-- Default caption (thumbnail view) --></span><br /> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Corvette C8<span class="hljs-tag"></<span class="hljs-name">h6</span>></span><br /> <br /> <span class="hljs-comment"><!-- Fullscreen caption --></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"fullscreen-caption"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>2020 Chevrolet Corvette C8 Stingray<span class="hljs-tag"></<span class="hljs-name">h4</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>The first mid-engine Corvette featuring a 6.2L V8 engine<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-photo-viewer</span>></span></code></pre>
|
|
167
|
+
</k-card>
|
|
168
|
+
</div>
|
|
169
|
+
<div class="col d-span-6 m-span-12 px">
|
|
170
|
+
<k-card label="Output">
|
|
171
|
+
<div class="mb" style="max-width: 400px;">
|
|
172
|
+
<k-photo-viewer
|
|
173
|
+
src="../media/corvette.jpg"
|
|
174
|
+
alt="Chevrolet Corvette C8"
|
|
175
|
+
>
|
|
176
|
+
<h6 class="m0">Corvette C8</h6>
|
|
177
|
+
<div slot="fullscreen-caption">
|
|
178
|
+
<h4>2020 Chevrolet Corvette C8 Stingray</h4>
|
|
179
|
+
<p>The first mid-engine Corvette featuring a 6.2L V8 engine producing 495 horsepower</p>
|
|
180
|
+
</div>
|
|
181
|
+
</k-photo-viewer>
|
|
182
|
+
</div>
|
|
183
|
+
</k-card>
|
|
184
|
+
</div>
|
|
139
185
|
</div>
|
|
140
186
|
|
|
141
187
|
<h2 id="jsRef">JavaScript Reference</h2>
|
|
@@ -213,7 +259,6 @@
|
|
|
213
259
|
|
|
214
260
|
</main>
|
|
215
261
|
<div style="height:33vh"></div>
|
|
216
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
217
262
|
<script type="module" src="../src/components/PhotoViewer.js"></script>
|
|
218
263
|
</body>
|
|
219
264
|
</html>
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Resize - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
8
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
9
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
10
|
<script type="module" src="./init.js"></script>
|
|
11
11
|
</head>
|
|
@@ -166,7 +166,6 @@
|
|
|
166
166
|
|
|
167
167
|
</main>
|
|
168
168
|
<div style="height:33vh"></div>
|
|
169
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
170
169
|
<script type="module" src="../src/components/Resize.js"></script>
|
|
171
170
|
</body>
|
|
172
171
|
</html>
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>ShadowComponent - Base Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
8
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
9
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
10
|
<script type="module" src="./init.js"></script>
|
|
11
11
|
</head>
|
|
@@ -79,6 +79,5 @@
|
|
|
79
79
|
|
|
80
80
|
</main>
|
|
81
81
|
<div style="height:33vh"></div>
|
|
82
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
83
82
|
</body>
|
|
84
83
|
</html>
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Show More - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
8
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
9
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
10
|
<script type="module" src="./init.js"></script>
|
|
11
11
|
</head>
|
|
@@ -116,8 +116,6 @@
|
|
|
116
116
|
|
|
117
117
|
</main>
|
|
118
118
|
<div style="height:33vh"></div>
|
|
119
|
-
|
|
120
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
121
119
|
<script type="module" src="../src/components/ShowMore.js"></script>
|
|
122
120
|
</body>
|
|
123
121
|
</html>
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>SideMenu - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script type="module" src="./init.js"></script>
|
|
12
12
|
</head>
|
|
@@ -148,7 +148,6 @@
|
|
|
148
148
|
|
|
149
149
|
</main>
|
|
150
150
|
<div style="height:33vh"></div>
|
|
151
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
152
151
|
<script type="module" src="../src/components/SideMenu.js"></script>
|
|
153
152
|
</body>
|
|
154
153
|
</html>
|
|
@@ -4,8 +4,9 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Sortable - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
8
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
9
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
11
|
<script type="module" src="./init.js"></script>
|
|
11
12
|
</head>
|
|
@@ -122,7 +123,6 @@
|
|
|
122
123
|
|
|
123
124
|
</main>
|
|
124
125
|
<div style="height:33vh"></div>
|
|
125
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
126
126
|
<script type="module" src="../src/components/Sortable.js"></script>
|
|
127
127
|
</body>
|
|
128
128
|
</html>
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Split - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
8
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
9
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
10
10
|
<script type="module" src="./init.js"></script>
|
|
11
11
|
</head>
|
|
@@ -136,7 +136,6 @@
|
|
|
136
136
|
|
|
137
137
|
</main>
|
|
138
138
|
<div style="height:33vh"></div>
|
|
139
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
140
139
|
<script type="module" src="../src/components/Card.js"></script>
|
|
141
140
|
<script type="module" src="../src/components/Split.js"></script>
|
|
142
141
|
</body>
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Table - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script type="module" src="../src/components/Table.js"></script>
|
|
12
12
|
<script type="module" src="./init.js"></script>
|
|
@@ -303,6 +303,5 @@
|
|
|
303
303
|
|
|
304
304
|
</main>
|
|
305
305
|
<div style="height: 33.333vh"></div>
|
|
306
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
307
306
|
</body>
|
|
308
307
|
</html>
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Top and Bottom Controls - Table - Kempo Docs</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script type="module" src="../src/components/Table.js"></script>
|
|
12
12
|
<script type="module" src="./init.js"></script>
|
|
@@ -68,6 +68,5 @@
|
|
|
68
68
|
</script>
|
|
69
69
|
</main>
|
|
70
70
|
<div style="height: 33.333vh"></div>
|
|
71
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
72
71
|
</body>
|
|
73
72
|
</html>
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Custom Fields - Table - Kempo Docs</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script type="module" src="../src/components/Table.js"></script>
|
|
12
12
|
<script type="module" src="./init.js"></script>
|
|
@@ -104,6 +104,5 @@
|
|
|
104
104
|
</script>
|
|
105
105
|
</main>
|
|
106
106
|
<div style="height: 33.333vh"></div>
|
|
107
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
108
107
|
</body>
|
|
109
108
|
</html>
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Table - Fetch Records - Kempo Docs</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script type="module" src="../src/components/Table.js"></script>
|
|
12
12
|
<script type="module" src="./init.js"></script>
|
|
@@ -105,6 +105,5 @@
|
|
|
105
105
|
</script>
|
|
106
106
|
</main>
|
|
107
107
|
<div style="height: 33.333vh"></div>
|
|
108
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
109
108
|
</body>
|
|
110
109
|
</html>
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Field Sort and Hide - Table - Kempo Docs</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script type="module" src="../src/components/Table.js"></script>
|
|
12
12
|
<script type="module" src="./init.js"></script>
|
|
@@ -66,6 +66,5 @@
|
|
|
66
66
|
</script>
|
|
67
67
|
</main>
|
|
68
68
|
<div style="height: 33.333vh"></div>
|
|
69
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
70
69
|
</body>
|
|
71
70
|
</html>
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Pagination - Table - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script type="module" src="../src/components/Table.js"></script>
|
|
12
12
|
<script type="module" src="./init.js"></script>
|
|
@@ -91,6 +91,5 @@
|
|
|
91
91
|
</script>
|
|
92
92
|
</main>
|
|
93
93
|
<div style="height: 33.333vh"></div>
|
|
94
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
95
94
|
</body>
|
|
96
95
|
</html>
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Record Editing - Table - Kempo Docs - A Web Components Solution</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script type="module" src="../src/components/Table.js"></script>
|
|
12
12
|
<script type="module" src="./init.js"></script>
|
|
@@ -135,6 +135,5 @@
|
|
|
135
135
|
</script>
|
|
136
136
|
</main>
|
|
137
137
|
<div style="height: 33.333vh"></div>
|
|
138
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
139
138
|
</body>
|
|
140
139
|
</html>
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Record Filtering - Table - Kempo Docs</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script type="module" src="../src/components/Table.js"></script>
|
|
12
12
|
<script type="module" src="./init.js"></script>
|
|
@@ -79,6 +79,5 @@
|
|
|
79
79
|
</script>
|
|
80
80
|
</main>
|
|
81
81
|
<div style="height: 33.333vh"></div>
|
|
82
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
83
82
|
</body>
|
|
84
83
|
</html>
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Row Controls - Table - Kempo Docs</title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
|
-
<link rel="stylesheet" href="../
|
|
9
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script type="module" src="../src/components/Table.js"></script>
|
|
12
12
|
<script type="module" src="./init.js"></script>
|
|
@@ -71,6 +71,5 @@
|
|
|
71
71
|
|
|
72
72
|
</main>
|
|
73
73
|
<div style="height: 33.333vh"></div>
|
|
74
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
75
74
|
</body>
|
|
76
75
|
</html>
|