kempo-css 2.1.3 → 2.1.5
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/.vscode/settings.json +2 -0
- package/CHANGELOG.md +12 -0
- package/dist/kempo.min.css +1 -1
- package/docs/borders-spacing.html +446 -0
- package/docs/buttons.html +262 -0
- package/docs/colors.html +199 -0
- package/docs/components/ThemePropertyInput.js +2 -2
- package/docs/elevation.html +509 -0
- package/docs/examples/responsive-grid.html +1 -1
- package/docs/index.html +237 -1477
- package/docs/inputs.html +252 -0
- package/docs/kempo.css +13 -0
- package/docs/kempo.min.css +1 -1
- package/docs/layout.html +311 -0
- package/docs/tables.html +262 -0
- package/docs/theme-editor.html +936 -802
- package/docs/typography.html +275 -0
- package/docs/utilities.html +172 -0
- package/docs-src/.config.js +26 -0
- package/docs-src/borders-spacing.page.html +297 -0
- package/docs-src/buttons.page.html +113 -0
- package/docs-src/colors.page.html +50 -0
- package/docs-src/default.template.html +22 -0
- package/docs-src/elevation.page.html +361 -0
- package/docs-src/examples/responsive-grid.html +33 -0
- package/docs-src/head.fragment.html +16 -0
- package/docs-src/index.page.html +95 -0
- package/docs-src/inputs.page.html +103 -0
- package/docs-src/layout.page.html +163 -0
- package/docs-src/nav.fragment.html +116 -0
- package/docs-src/tables.page.html +114 -0
- package/docs-src/theme-editor.page.html +850 -0
- package/docs-src/theme-editor.template.html +11 -0
- package/docs-src/typography.page.html +126 -0
- package/docs-src/utilities.page.html +26 -0
- package/llms.txt +2 -0
- package/package.json +3 -2
- package/scripts/build.js +7 -1
- package/src/kempo.css +13 -0
- package/tests/typography.browser-test.js +26 -0
- package/docs/init.js +0 -4
- package/docs/nav.js +0 -33
package/docs/layout.html
ADDED
|
@@ -0,0 +1,311 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Layout - Kempo CSS</title>
|
|
8
|
+
<link rel="icon" type="image/png" sizes="48x48" href="./media/icon48.png">
|
|
9
|
+
<link rel="manifest" href="./manifest.json" />
|
|
10
|
+
<link rel="stylesheet" href="./kempo.min.css" />
|
|
11
|
+
<link rel="stylesheet" href="./kempo-hljs.min.css" />
|
|
12
|
+
<script>
|
|
13
|
+
window.kempo = {
|
|
14
|
+
pathToStylesheet: './kempo.min.css',
|
|
15
|
+
pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons']
|
|
16
|
+
};
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
|
|
23
|
+
<k-nav fixed class="bg-primary">
|
|
24
|
+
<button id="toggleNavSideMenu" class="link">
|
|
25
|
+
<k-icon name="menu"></k-icon>
|
|
26
|
+
</button>
|
|
27
|
+
<a href="./" class="d-if ph" style="align-items: center">
|
|
28
|
+
<img src="./media/icon32.png" alt="Kempo CSS Icon" class="pr" />
|
|
29
|
+
Kempo CSS
|
|
30
|
+
</a>
|
|
31
|
+
<a href="./theme-editor.html">Theme Editor</a>
|
|
32
|
+
<div class="flex"></div>
|
|
33
|
+
<a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon></a>
|
|
34
|
+
<a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon></a>
|
|
35
|
+
<a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon></a>
|
|
36
|
+
<k-theme-switcher></k-theme-switcher>
|
|
37
|
+
</k-nav>
|
|
38
|
+
<div style="width: 100%; height: 4rem;"></div>
|
|
39
|
+
<k-aside id="navSideMenu" main="overlay" state="offscreen">
|
|
40
|
+
<menu>
|
|
41
|
+
<div class="ta-center bb mb r0">
|
|
42
|
+
<h1 class="tc-primary">Kempo CSS</h1>
|
|
43
|
+
<img src="./media/icon128.png" alt="Kempo CSS Icon" />
|
|
44
|
+
</div>
|
|
45
|
+
<h5><a href="./typography.html">Typography</a></h5>
|
|
46
|
+
<div class="ml mb -mt">
|
|
47
|
+
<a href="./typography.html#paragraphs" class="d-b">Paragraphs</a>
|
|
48
|
+
<a href="./typography.html#headings" class="d-b">Headings</a>
|
|
49
|
+
<a href="./typography.html#textmarkup" class="d-b">Text Markup</a>
|
|
50
|
+
<a href="./typography.html#textdecoration" class="d-b">Text Decoration</a>
|
|
51
|
+
<a href="./typography.html#lists" class="d-b">Lists</a>
|
|
52
|
+
</div>
|
|
53
|
+
<h5><a href="./layout.html">Layout</a></h5>
|
|
54
|
+
<div class="ml mb -mt">
|
|
55
|
+
<a href="./layout.html#display" class="d-b">Display</a>
|
|
56
|
+
<a href="./layout.html#flexbox" class="d-b">Flexbox</a>
|
|
57
|
+
<a href="./layout.html#grid" class="d-b">Grid System</a>
|
|
58
|
+
<a href="./layout.html#responsive-grid" class="d-b">Responsive Grid</a>
|
|
59
|
+
<a href="./layout.html#min-width-grid" class="d-b">Alternative Responsive Grid</a>
|
|
60
|
+
</div>
|
|
61
|
+
<h5><a href="./borders-spacing.html">Borders & Spacing</a></h5>
|
|
62
|
+
<div class="ml mb -mt">
|
|
63
|
+
<a href="./borders-spacing.html#borders" class="d-b">Borders</a>
|
|
64
|
+
<a href="./borders-spacing.html#border-radius" class="d-b">Border Radius</a>
|
|
65
|
+
<a href="./borders-spacing.html#padding" class="d-b">Padding</a>
|
|
66
|
+
<a href="./borders-spacing.html#margins" class="d-b">Margins</a>
|
|
67
|
+
<a href="./borders-spacing.html#negative-margins" class="d-b">Negative Margins</a>
|
|
68
|
+
<a href="./borders-spacing.html#cancelled-margins" class="d-b">Cancelled Margins</a>
|
|
69
|
+
</div>
|
|
70
|
+
<h5><a href="./inputs.html">Inputs</a></h5>
|
|
71
|
+
<div class="ml mb -mt">
|
|
72
|
+
<a href="./inputs.html#basic-inputs" class="d-b">Basic Inputs</a>
|
|
73
|
+
<a href="./inputs.html#labels" class="d-b">Labels</a>
|
|
74
|
+
<a href="./inputs.html#checkbox-radio" class="d-b">Checkbox / Radio</a>
|
|
75
|
+
</div>
|
|
76
|
+
<h5><a href="./buttons.html">Buttons</a></h5>
|
|
77
|
+
<div class="ml mb -mt">
|
|
78
|
+
<a href="./buttons.html#button-types" class="d-b">Button Types</a>
|
|
79
|
+
<a href="./buttons.html#button-colors" class="d-b">Button Colors</a>
|
|
80
|
+
<a href="./buttons.html#button-sizes" class="d-b">Button Sizes</a>
|
|
81
|
+
<a href="./buttons.html#button-groups" class="d-b">Button Groups</a>
|
|
82
|
+
<a href="./buttons.html#no-styles" class="d-b">No Styles</a>
|
|
83
|
+
</div>
|
|
84
|
+
<h5><a href="./tables.html">Tables</a></h5>
|
|
85
|
+
<div class="ml mb -mt">
|
|
86
|
+
<a href="./tables.html#basic-table" class="d-b">Basic Table</a>
|
|
87
|
+
<a href="./tables.html#responsive-table" class="d-b">Responsive Table</a>
|
|
88
|
+
</div>
|
|
89
|
+
<h5><a href="./colors.html">Colors</a></h5>
|
|
90
|
+
<div class="ml mb -mt">
|
|
91
|
+
<a href="./colors.html#background" class="d-b">Background</a>
|
|
92
|
+
<a href="./colors.html#text-colors" class="d-b">Text Colors</a>
|
|
93
|
+
</div>
|
|
94
|
+
<h5><a href="./elevation.html">Elevation</a></h5>
|
|
95
|
+
<div class="ml mb -mt">
|
|
96
|
+
<a href="./elevation.html#elevation-z-index" class="d-b">Z-Index</a>
|
|
97
|
+
<a href="./elevation.html#elevation-shadow" class="d-b">Shadow</a>
|
|
98
|
+
<a href="./elevation.html#elevation-bg" class="d-b">Elevation Background</a>
|
|
99
|
+
<a href="./elevation.html#elevation-combined" class="d-b">Combined Example</a>
|
|
100
|
+
<a href="./elevation.html#elevation-variables" class="d-b">CSS Variables</a>
|
|
101
|
+
</div>
|
|
102
|
+
<h5><a href="./utilities.html">Utilities</a></h5>
|
|
103
|
+
<div class="ml mb -mt">
|
|
104
|
+
<a href="./utilities.html#noScroll" class="d-b">Disable Body Scrolling</a>
|
|
105
|
+
</div>
|
|
106
|
+
<hr />
|
|
107
|
+
<a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon> Read the License</a><br />
|
|
108
|
+
<a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon> View on NPM</a><br />
|
|
109
|
+
<a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon> View on GitHub</a>
|
|
110
|
+
<div style="height:33vh"></div>
|
|
111
|
+
</menu>
|
|
112
|
+
</k-aside>
|
|
113
|
+
<script type="module">
|
|
114
|
+
document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
|
|
115
|
+
await window.customElements.whenDefined('k-aside');
|
|
116
|
+
document.getElementById('navSideMenu').toggle();
|
|
117
|
+
});
|
|
118
|
+
document.addEventListener('click', function(e) {
|
|
119
|
+
if (e.target.matches('a[href^="#"]')) {
|
|
120
|
+
e.preventDefault();
|
|
121
|
+
const targetId = e.target.getAttribute('href').replace('#', '');
|
|
122
|
+
const target = document.getElementById(targetId);
|
|
123
|
+
if (target) {
|
|
124
|
+
target.scrollIntoView({ behavior: 'smooth' });
|
|
125
|
+
history.replaceState(null, '', window.location.pathname + window.location.search + '#' + targetId);
|
|
126
|
+
document.getElementById('navSideMenu').hide();
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
const fixedNav = document.querySelector('k-nav[fixed]');
|
|
131
|
+
if (fixedNav) {
|
|
132
|
+
const updateNavShadow = () => fixedNav.classList.toggle('scrolled', window.scrollY > 0);
|
|
133
|
+
window.addEventListener('scroll', updateNavShadow, { passive: true });
|
|
134
|
+
updateNavShadow();
|
|
135
|
+
}
|
|
136
|
+
</script>
|
|
137
|
+
|
|
138
|
+
<k-main>
|
|
139
|
+
<main>
|
|
140
|
+
<h1 class="ta-center">Layout</h1>
|
|
141
|
+
|
|
142
|
+
<h2 id="display">Display</h2>
|
|
143
|
+
<table class="mb">
|
|
144
|
+
<thead>
|
|
145
|
+
<tr>
|
|
146
|
+
<th>Class</th>
|
|
147
|
+
<th>CSS Value</th>
|
|
148
|
+
</tr>
|
|
149
|
+
</thead>
|
|
150
|
+
<tbody>
|
|
151
|
+
<tr>
|
|
152
|
+
<td><code>d-b</code></td>
|
|
153
|
+
<td>block</td>
|
|
154
|
+
</tr>
|
|
155
|
+
<tr>
|
|
156
|
+
<td><code>d-ib</code></td>
|
|
157
|
+
<td>inline-block</td>
|
|
158
|
+
</tr>
|
|
159
|
+
<tr>
|
|
160
|
+
<td><code>d-i</code></td>
|
|
161
|
+
<td>inline</td>
|
|
162
|
+
</tr>
|
|
163
|
+
<tr>
|
|
164
|
+
<td><code>d-f</code></td>
|
|
165
|
+
<td>flex</td>
|
|
166
|
+
</tr>
|
|
167
|
+
<tr>
|
|
168
|
+
<td><code>d-if</code></td>
|
|
169
|
+
<td>inline-flex</td>
|
|
170
|
+
</tr>
|
|
171
|
+
</tbody>
|
|
172
|
+
</table>
|
|
173
|
+
|
|
174
|
+
<h2 id="flexbox">Flexbox</h2>
|
|
175
|
+
<div class="row -mx">
|
|
176
|
+
<div class="col m-span-12 px">
|
|
177
|
+
<k-card label="HTML">
|
|
178
|
+
<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">"d-f"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 100px"</span>></span>100px<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>></span>flex<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>></span>flex<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>></span>flex<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>></span>flex<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-2"</span>></span>flex-2<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex b"</span>></span>flex<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-3"</span>></span>flex-3<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
179
|
+
</k-card>
|
|
180
|
+
</div>
|
|
181
|
+
<div class="col m-span-12 px">
|
|
182
|
+
<k-card label="Output*">
|
|
183
|
+
<div class="d-f mb">
|
|
184
|
+
<div
|
|
185
|
+
style="width: 100px"
|
|
186
|
+
class="b pq mr"
|
|
187
|
+
>100px</div>
|
|
188
|
+
<div class="flex b pq">flex</div>
|
|
189
|
+
</div>
|
|
190
|
+
<div class="d-f mb">
|
|
191
|
+
<div class="flex b pq mr">flex</div>
|
|
192
|
+
<div class="flex b pq">flex</div>
|
|
193
|
+
</div>
|
|
194
|
+
<div class="d-f mb">
|
|
195
|
+
<div class="flex b pq mr">flex</div>
|
|
196
|
+
<div class="flex-2 b pq">flex-2</div>
|
|
197
|
+
</div>
|
|
198
|
+
<div class="d-f">
|
|
199
|
+
<div class="flex b pq mr">flex</div>
|
|
200
|
+
<div class="flex-3 b pq">flex-3</div>
|
|
201
|
+
</div>
|
|
202
|
+
</k-card>
|
|
203
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
<h2 id="grid">Grid System</h2>
|
|
209
|
+
<div class="row -mx">
|
|
210
|
+
<div class="col m-span-12 px">
|
|
211
|
+
<k-card label="HTML">
|
|
212
|
+
<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">"row"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span>></span>col<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span>></span>col<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span>></span>col<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col span-4"</span>></span>col span-4<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col span-8"</span>></span>col span-8<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
213
|
+
</k-card>
|
|
214
|
+
</div>
|
|
215
|
+
<div class="col m-span-12 px">
|
|
216
|
+
<k-card label="Output*">
|
|
217
|
+
<div class="row mb">
|
|
218
|
+
<div class="col b pq">col</div>
|
|
219
|
+
<div class="col b pq">col</div>
|
|
220
|
+
<div class="col b pq">col</div>
|
|
221
|
+
</div>
|
|
222
|
+
<div class="row">
|
|
223
|
+
<div class="col span-4 b pq">col span-4</div>
|
|
224
|
+
<div class="col span-8 b pq">col span-8</div>
|
|
225
|
+
</div>
|
|
226
|
+
</k-card>
|
|
227
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
|
|
231
|
+
<h3 id="responsive-grid">Responsive Grid</h3>
|
|
232
|
+
<p>This responsive grid is based on the size of the viewport, not the size of the container. The example below is
|
|
233
|
+
running in an iframe for easy demonstration, but if you need the layout to be responsive to the contianer size see
|
|
234
|
+
the <a href="#min-width-grid">Alternative Responsive Grid</a> below.</p>
|
|
235
|
+
<k-card label="HTML">
|
|
236
|
+
<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">"row"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col d-span-3 t-span-6 m-span-12"</span>></span><br /> col d-span-3 t-span-6 m-span-12<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col d-span-3 t-span-6 m-span-12"</span>></span><br /> col d-span-3 t-span-6 m-span-12<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col d-span-3 t-span-6 m-span-12"</span>></span><br /> col d-span-3 t-span-6 m-span-12<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col d-span-3 t-span-6 m-span-12"</span>></span><br /> col d-span-3 t-span-6 m-span-12<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
237
|
+
</k-card>
|
|
238
|
+
<k-resize
|
|
239
|
+
dimension="width"
|
|
240
|
+
class="b0"
|
|
241
|
+
style="min-width: 22rem"
|
|
242
|
+
>
|
|
243
|
+
<k-card
|
|
244
|
+
label="Output*"
|
|
245
|
+
class="mtq"
|
|
246
|
+
>
|
|
247
|
+
<iframe
|
|
248
|
+
src="./examples/responsive-grid.html"
|
|
249
|
+
height="200"
|
|
250
|
+
class="b0"
|
|
251
|
+
></iframe>
|
|
252
|
+
</k-card>
|
|
253
|
+
</k-resize>
|
|
254
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
255
|
+
|
|
256
|
+
<h3 id="min-width-grid">Alternative Responsive Grid</h3>
|
|
257
|
+
<div class="row -mx">
|
|
258
|
+
<div class="col m-span-12 px">
|
|
259
|
+
<k-card label="HTML">
|
|
260
|
+
<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">"row"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"min-width: 150px"</span>></span><br /> col, min-width: 150px<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"min-width: 200px"</span>></span><br /> col, min-width: 200px<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"min-width: 300px"</span>></span><br /> col, min-width: 300px<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
261
|
+
</k-card>
|
|
262
|
+
</div>
|
|
263
|
+
<div class="col m-span-12 px">
|
|
264
|
+
<k-resize
|
|
265
|
+
dimension="width"
|
|
266
|
+
class="b0"
|
|
267
|
+
style="min-width: 22rem; max-width: 688px"
|
|
268
|
+
>
|
|
269
|
+
<k-card
|
|
270
|
+
label="Output*"
|
|
271
|
+
class="mtq"
|
|
272
|
+
>
|
|
273
|
+
<div class="row">
|
|
274
|
+
<div
|
|
275
|
+
class="col b pq"
|
|
276
|
+
style="min-width: 150px"
|
|
277
|
+
>
|
|
278
|
+
col, min-width: 150px
|
|
279
|
+
</div>
|
|
280
|
+
<div
|
|
281
|
+
class="col b pq"
|
|
282
|
+
style="min-width: 200px"
|
|
283
|
+
>
|
|
284
|
+
col, min-width: 200px
|
|
285
|
+
</div>
|
|
286
|
+
<div
|
|
287
|
+
class="col b pq"
|
|
288
|
+
style="min-width: 300px"
|
|
289
|
+
>
|
|
290
|
+
col, min-width: 300px
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
</k-card>
|
|
294
|
+
</k-resize>
|
|
295
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
296
|
+
</div>
|
|
297
|
+
</div>
|
|
298
|
+
|
|
299
|
+
</main>
|
|
300
|
+
<div style="height:33vh"></div>
|
|
301
|
+
</k-main>
|
|
302
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Nav.js"></script>
|
|
303
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Aside.js"></script>
|
|
304
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Icon.js"></script>
|
|
305
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/ThemeSwitcher.js"></script>
|
|
306
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Card.js"></script>
|
|
307
|
+
|
|
308
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Resize.js"></script>
|
|
309
|
+
|
|
310
|
+
</body>
|
|
311
|
+
</html>
|
package/docs/tables.html
ADDED
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Tables - Kempo CSS</title>
|
|
8
|
+
<link rel="icon" type="image/png" sizes="48x48" href="./media/icon48.png">
|
|
9
|
+
<link rel="manifest" href="./manifest.json" />
|
|
10
|
+
<link rel="stylesheet" href="./kempo.min.css" />
|
|
11
|
+
<link rel="stylesheet" href="./kempo-hljs.min.css" />
|
|
12
|
+
<script>
|
|
13
|
+
window.kempo = {
|
|
14
|
+
pathToStylesheet: './kempo.min.css',
|
|
15
|
+
pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons']
|
|
16
|
+
};
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
|
|
23
|
+
<k-nav fixed class="bg-primary">
|
|
24
|
+
<button id="toggleNavSideMenu" class="link">
|
|
25
|
+
<k-icon name="menu"></k-icon>
|
|
26
|
+
</button>
|
|
27
|
+
<a href="./" class="d-if ph" style="align-items: center">
|
|
28
|
+
<img src="./media/icon32.png" alt="Kempo CSS Icon" class="pr" />
|
|
29
|
+
Kempo CSS
|
|
30
|
+
</a>
|
|
31
|
+
<a href="./theme-editor.html">Theme Editor</a>
|
|
32
|
+
<div class="flex"></div>
|
|
33
|
+
<a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon></a>
|
|
34
|
+
<a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon></a>
|
|
35
|
+
<a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon></a>
|
|
36
|
+
<k-theme-switcher></k-theme-switcher>
|
|
37
|
+
</k-nav>
|
|
38
|
+
<div style="width: 100%; height: 4rem;"></div>
|
|
39
|
+
<k-aside id="navSideMenu" main="overlay" state="offscreen">
|
|
40
|
+
<menu>
|
|
41
|
+
<div class="ta-center bb mb r0">
|
|
42
|
+
<h1 class="tc-primary">Kempo CSS</h1>
|
|
43
|
+
<img src="./media/icon128.png" alt="Kempo CSS Icon" />
|
|
44
|
+
</div>
|
|
45
|
+
<h5><a href="./typography.html">Typography</a></h5>
|
|
46
|
+
<div class="ml mb -mt">
|
|
47
|
+
<a href="./typography.html#paragraphs" class="d-b">Paragraphs</a>
|
|
48
|
+
<a href="./typography.html#headings" class="d-b">Headings</a>
|
|
49
|
+
<a href="./typography.html#textmarkup" class="d-b">Text Markup</a>
|
|
50
|
+
<a href="./typography.html#textdecoration" class="d-b">Text Decoration</a>
|
|
51
|
+
<a href="./typography.html#lists" class="d-b">Lists</a>
|
|
52
|
+
</div>
|
|
53
|
+
<h5><a href="./layout.html">Layout</a></h5>
|
|
54
|
+
<div class="ml mb -mt">
|
|
55
|
+
<a href="./layout.html#display" class="d-b">Display</a>
|
|
56
|
+
<a href="./layout.html#flexbox" class="d-b">Flexbox</a>
|
|
57
|
+
<a href="./layout.html#grid" class="d-b">Grid System</a>
|
|
58
|
+
<a href="./layout.html#responsive-grid" class="d-b">Responsive Grid</a>
|
|
59
|
+
<a href="./layout.html#min-width-grid" class="d-b">Alternative Responsive Grid</a>
|
|
60
|
+
</div>
|
|
61
|
+
<h5><a href="./borders-spacing.html">Borders & Spacing</a></h5>
|
|
62
|
+
<div class="ml mb -mt">
|
|
63
|
+
<a href="./borders-spacing.html#borders" class="d-b">Borders</a>
|
|
64
|
+
<a href="./borders-spacing.html#border-radius" class="d-b">Border Radius</a>
|
|
65
|
+
<a href="./borders-spacing.html#padding" class="d-b">Padding</a>
|
|
66
|
+
<a href="./borders-spacing.html#margins" class="d-b">Margins</a>
|
|
67
|
+
<a href="./borders-spacing.html#negative-margins" class="d-b">Negative Margins</a>
|
|
68
|
+
<a href="./borders-spacing.html#cancelled-margins" class="d-b">Cancelled Margins</a>
|
|
69
|
+
</div>
|
|
70
|
+
<h5><a href="./inputs.html">Inputs</a></h5>
|
|
71
|
+
<div class="ml mb -mt">
|
|
72
|
+
<a href="./inputs.html#basic-inputs" class="d-b">Basic Inputs</a>
|
|
73
|
+
<a href="./inputs.html#labels" class="d-b">Labels</a>
|
|
74
|
+
<a href="./inputs.html#checkbox-radio" class="d-b">Checkbox / Radio</a>
|
|
75
|
+
</div>
|
|
76
|
+
<h5><a href="./buttons.html">Buttons</a></h5>
|
|
77
|
+
<div class="ml mb -mt">
|
|
78
|
+
<a href="./buttons.html#button-types" class="d-b">Button Types</a>
|
|
79
|
+
<a href="./buttons.html#button-colors" class="d-b">Button Colors</a>
|
|
80
|
+
<a href="./buttons.html#button-sizes" class="d-b">Button Sizes</a>
|
|
81
|
+
<a href="./buttons.html#button-groups" class="d-b">Button Groups</a>
|
|
82
|
+
<a href="./buttons.html#no-styles" class="d-b">No Styles</a>
|
|
83
|
+
</div>
|
|
84
|
+
<h5><a href="./tables.html">Tables</a></h5>
|
|
85
|
+
<div class="ml mb -mt">
|
|
86
|
+
<a href="./tables.html#basic-table" class="d-b">Basic Table</a>
|
|
87
|
+
<a href="./tables.html#responsive-table" class="d-b">Responsive Table</a>
|
|
88
|
+
</div>
|
|
89
|
+
<h5><a href="./colors.html">Colors</a></h5>
|
|
90
|
+
<div class="ml mb -mt">
|
|
91
|
+
<a href="./colors.html#background" class="d-b">Background</a>
|
|
92
|
+
<a href="./colors.html#text-colors" class="d-b">Text Colors</a>
|
|
93
|
+
</div>
|
|
94
|
+
<h5><a href="./elevation.html">Elevation</a></h5>
|
|
95
|
+
<div class="ml mb -mt">
|
|
96
|
+
<a href="./elevation.html#elevation-z-index" class="d-b">Z-Index</a>
|
|
97
|
+
<a href="./elevation.html#elevation-shadow" class="d-b">Shadow</a>
|
|
98
|
+
<a href="./elevation.html#elevation-bg" class="d-b">Elevation Background</a>
|
|
99
|
+
<a href="./elevation.html#elevation-combined" class="d-b">Combined Example</a>
|
|
100
|
+
<a href="./elevation.html#elevation-variables" class="d-b">CSS Variables</a>
|
|
101
|
+
</div>
|
|
102
|
+
<h5><a href="./utilities.html">Utilities</a></h5>
|
|
103
|
+
<div class="ml mb -mt">
|
|
104
|
+
<a href="./utilities.html#noScroll" class="d-b">Disable Body Scrolling</a>
|
|
105
|
+
</div>
|
|
106
|
+
<hr />
|
|
107
|
+
<a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon> Read the License</a><br />
|
|
108
|
+
<a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon> View on NPM</a><br />
|
|
109
|
+
<a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon> View on GitHub</a>
|
|
110
|
+
<div style="height:33vh"></div>
|
|
111
|
+
</menu>
|
|
112
|
+
</k-aside>
|
|
113
|
+
<script type="module">
|
|
114
|
+
document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
|
|
115
|
+
await window.customElements.whenDefined('k-aside');
|
|
116
|
+
document.getElementById('navSideMenu').toggle();
|
|
117
|
+
});
|
|
118
|
+
document.addEventListener('click', function(e) {
|
|
119
|
+
if (e.target.matches('a[href^="#"]')) {
|
|
120
|
+
e.preventDefault();
|
|
121
|
+
const targetId = e.target.getAttribute('href').replace('#', '');
|
|
122
|
+
const target = document.getElementById(targetId);
|
|
123
|
+
if (target) {
|
|
124
|
+
target.scrollIntoView({ behavior: 'smooth' });
|
|
125
|
+
history.replaceState(null, '', window.location.pathname + window.location.search + '#' + targetId);
|
|
126
|
+
document.getElementById('navSideMenu').hide();
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
const fixedNav = document.querySelector('k-nav[fixed]');
|
|
131
|
+
if (fixedNav) {
|
|
132
|
+
const updateNavShadow = () => fixedNav.classList.toggle('scrolled', window.scrollY > 0);
|
|
133
|
+
window.addEventListener('scroll', updateNavShadow, { passive: true });
|
|
134
|
+
updateNavShadow();
|
|
135
|
+
}
|
|
136
|
+
</script>
|
|
137
|
+
|
|
138
|
+
<k-main>
|
|
139
|
+
<main>
|
|
140
|
+
<h1 class="ta-center">Tables</h1>
|
|
141
|
+
|
|
142
|
+
<h2 id="basic-table">Basic Table</h2>
|
|
143
|
+
<div class="row -mx">
|
|
144
|
+
<div class="col m-span-12 px">
|
|
145
|
+
<k-card label="HTML">
|
|
146
|
+
<pre style="overflow:auto;max-height:20rem;"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">table</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">thead</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 1<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 2<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 3<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 4<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">thead</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tbody</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tbody</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">table</span>></span></code></pre>
|
|
147
|
+
</k-card>
|
|
148
|
+
</div>
|
|
149
|
+
<div class="col m-span-12 px">
|
|
150
|
+
<k-card
|
|
151
|
+
label="Output"
|
|
152
|
+
class="pb"
|
|
153
|
+
>
|
|
154
|
+
<table>
|
|
155
|
+
<thead>
|
|
156
|
+
<tr>
|
|
157
|
+
<th>Field 1</th>
|
|
158
|
+
<th>Field 2</th>
|
|
159
|
+
<th>Field 3</th>
|
|
160
|
+
<th>Field 4</th>
|
|
161
|
+
</tr>
|
|
162
|
+
</thead>
|
|
163
|
+
<tbody>
|
|
164
|
+
<tr>
|
|
165
|
+
<td>Row 1 - Data 1</td>
|
|
166
|
+
<td>Row 1 - Data 2</td>
|
|
167
|
+
<td>Row 1 - Data 3</td>
|
|
168
|
+
<td>Row 1 - Data 4</td>
|
|
169
|
+
</tr>
|
|
170
|
+
<tr>
|
|
171
|
+
<td>Row 2 - Data 1</td>
|
|
172
|
+
<td>Row 2 - Data 2</td>
|
|
173
|
+
<td>Row 2 - Data 3</td>
|
|
174
|
+
<td>Row 2 - Data 4</td>
|
|
175
|
+
</tr>
|
|
176
|
+
<tr>
|
|
177
|
+
<td>Row 3 - Data 1</td>
|
|
178
|
+
<td>Row 3 - Data 2</td>
|
|
179
|
+
<td>Row 3 - Data 3</td>
|
|
180
|
+
<td>Row 3 - Data 4</td>
|
|
181
|
+
</tr>
|
|
182
|
+
</tbody>
|
|
183
|
+
</table>
|
|
184
|
+
</k-card>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
<h2 id="responsive-table">Responsive Table</h2>
|
|
189
|
+
<div class="row -mx">
|
|
190
|
+
<div class="col m-span-12 px">
|
|
191
|
+
<k-card label="HTML">
|
|
192
|
+
<pre style="overflow:auto;max-height:20rem"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table-wrapper"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">table</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">thead</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 1<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 2<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 3<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 4<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 5<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 6<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">thead</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tbody</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 5<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 6<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 5<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 6<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 5<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 6<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tbody</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">table</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
193
|
+
</k-card>
|
|
194
|
+
</div>
|
|
195
|
+
<div class="col m-span-12 px">
|
|
196
|
+
<k-resize
|
|
197
|
+
dimension="width"
|
|
198
|
+
class="b0"
|
|
199
|
+
style="min-width: 22rem; max-width: 688px"
|
|
200
|
+
>
|
|
201
|
+
<k-card
|
|
202
|
+
label="Output*"
|
|
203
|
+
class="mtq"
|
|
204
|
+
>
|
|
205
|
+
<div class="table-wrapper">
|
|
206
|
+
<table>
|
|
207
|
+
<thead>
|
|
208
|
+
<tr>
|
|
209
|
+
<th>Field 1</th>
|
|
210
|
+
<th>Field 2</th>
|
|
211
|
+
<th>Field 3</th>
|
|
212
|
+
<th>Field 4</th>
|
|
213
|
+
<th>Field 5</th>
|
|
214
|
+
<th>Field 6</th>
|
|
215
|
+
</tr>
|
|
216
|
+
</thead>
|
|
217
|
+
<tbody>
|
|
218
|
+
<tr>
|
|
219
|
+
<td>Row 1 - Data 1</td>
|
|
220
|
+
<td>Row 1 - Data 2</td>
|
|
221
|
+
<td>Row 1 - Data 3</td>
|
|
222
|
+
<td>Row 1 - Data 4</td>
|
|
223
|
+
<td>Row 1 - Data 5</td>
|
|
224
|
+
<td>Row 1 - Data 6</td>
|
|
225
|
+
</tr>
|
|
226
|
+
<tr>
|
|
227
|
+
<td>Row 2 - Data 1</td>
|
|
228
|
+
<td>Row 2 - Data 2</td>
|
|
229
|
+
<td>Row 2 - Data 3</td>
|
|
230
|
+
<td>Row 2 - Data 4</td>
|
|
231
|
+
<td>Row 2 - Data 5</td>
|
|
232
|
+
<td>Row 2 - Data 6</td>
|
|
233
|
+
</tr>
|
|
234
|
+
<tr>
|
|
235
|
+
<td>Row 3 - Data 1</td>
|
|
236
|
+
<td>Row 3 - Data 2</td>
|
|
237
|
+
<td>Row 3 - Data 3</td>
|
|
238
|
+
<td>Row 3 - Data 4</td>
|
|
239
|
+
<td>Row 3 - Data 5</td>
|
|
240
|
+
<td>Row 3 - Data 6</td>
|
|
241
|
+
</tr>
|
|
242
|
+
</tbody>
|
|
243
|
+
</table>
|
|
244
|
+
</div>
|
|
245
|
+
</k-card>
|
|
246
|
+
</k-resize>
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
249
|
+
|
|
250
|
+
</main>
|
|
251
|
+
<div style="height:33vh"></div>
|
|
252
|
+
</k-main>
|
|
253
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Nav.js"></script>
|
|
254
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Aside.js"></script>
|
|
255
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Icon.js"></script>
|
|
256
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/ThemeSwitcher.js"></script>
|
|
257
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Card.js"></script>
|
|
258
|
+
|
|
259
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Resize.js"></script>
|
|
260
|
+
|
|
261
|
+
</body>
|
|
262
|
+
</html>
|