kempo-ui 0.0.8 → 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 +3 -3
- package/docs/components/dialog.html +237 -5
- package/docs/components/focus-capture.html +2 -3
- package/docs/components/hybrid-component.html +2 -3
- package/docs/components/icon.html +6 -7
- 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 +311 -4
- 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 -3
- package/src/components/Dialog.js +48 -34
- package/src/components/Icon.js +25 -18
- package/src/components/Toggle.js +69 -69
- package/src/components/Tree.js +10 -2
- package/scripts/fix-docs-paths.js +0 -62
|
@@ -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>
|
|
@@ -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 Searching - 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>Record Selection - 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>
|
|
@@ -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>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>
|
|
@@ -69,6 +69,5 @@
|
|
|
69
69
|
</script>
|
|
70
70
|
</main>
|
|
71
71
|
<div style="height: 33.333vh"></div>
|
|
72
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
73
72
|
</body>
|
|
74
73
|
</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>Sorting - 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>
|
|
@@ -64,6 +64,5 @@
|
|
|
64
64
|
</script>
|
|
65
65
|
</main>
|
|
66
66
|
<div style="height: 33.333vh"></div>
|
|
67
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
68
67
|
</body>
|
|
69
68
|
</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>Tabs - 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>
|
|
@@ -33,8 +33,16 @@
|
|
|
33
33
|
|
|
34
34
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
35
|
<p>Create tabs using the <code>k-tabs</code> component. Add tabs using the <code>k-tab</code> component and tab contents using the <code>k-tab-content</code> component. Use the <code>for</code> attribute on the <code>k-tab</code> component to link it to the corresponding <code>k-tab-content</code> component.</p>
|
|
36
|
-
|
|
37
|
-
<
|
|
36
|
+
|
|
37
|
+
<div class="row -mx mb">
|
|
38
|
+
<div class="col d-span-6 m-span-12 px">
|
|
39
|
+
<k-card label="HTML">
|
|
40
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tabs</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"html"</span>></span>HTML<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"js"</span>></span>JavaScript<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"html"</span>></span><br /> HTML Content<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"js"</span>></span><br /> JavaScript Content<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tabs</span>></span></code></pre>
|
|
41
|
+
</k-card>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="col d-span-6 m-span-12 px">
|
|
44
|
+
<k-card label="Output">
|
|
45
|
+
<k-tabs>
|
|
38
46
|
<k-tab for="html">HTML</k-tab>
|
|
39
47
|
<k-tab for="js">JavaScript</k-tab>
|
|
40
48
|
<k-tab-content name="html">
|
|
@@ -44,11 +52,21 @@
|
|
|
44
52
|
<p>JavaScript Content</p>
|
|
45
53
|
</k-tab-content>
|
|
46
54
|
</k-tabs>
|
|
55
|
+
</k-card>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
47
58
|
|
|
48
59
|
<h3 id="tabSpacers"><a href="#tabSpacers" class="no-link">Tab Spacers</a></h3>
|
|
49
60
|
<p>Use the <code>k-tab-spacer</code> component to add a flexible space between tabs.</p>
|
|
50
|
-
<
|
|
51
|
-
|
|
61
|
+
<div class="row -mx mb">
|
|
62
|
+
<div class="col d-span-6 m-span-12 px">
|
|
63
|
+
<k-card label="HTML">
|
|
64
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tabs</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"html"</span>></span>HTML<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-spacer</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-spacer</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"js"</span>></span>JavaScript<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"html"</span>></span><br /> HTML Content<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"js"</span>></span><br /> JavaScript Content<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tabs</span>></span></code></pre>
|
|
65
|
+
</k-card>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="col d-span-6 m-span-12 px">
|
|
68
|
+
<k-card label="Output">
|
|
69
|
+
<k-tabs>
|
|
52
70
|
<k-tab for="html">HTML</k-tab>
|
|
53
71
|
<k-tab-spacer></k-tab-spacer>
|
|
54
72
|
<k-tab for="js">JavaScript</k-tab>
|
|
@@ -59,75 +77,77 @@
|
|
|
59
77
|
<p>JavaScript Content</p>
|
|
60
78
|
</k-tab-content>
|
|
61
79
|
</k-tabs>
|
|
80
|
+
</k-card>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
62
83
|
|
|
63
84
|
<h3 id="scrollingTabs"><a href="#scrollingTabs" class="no-link">Scrolling Tabs</a></h3>
|
|
64
85
|
<p>When there are many tabs, they will scroll horizontally with gradient indicators showing when more tabs are available.</p>
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab3"</span>></span>Tab 3<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
<k-tab-content name="tab1"><p>Content 1</p></k-tab-content>
|
|
100
|
-
<k-tab-content name="tab2"><p>Content 2</p></k-tab-content>
|
|
101
|
-
<k-tab-content name="tab3"><p>Content 3</p></k-tab-content>
|
|
102
|
-
<k-tab-content name="tab4"><p>Content 4</p></k-tab-content>
|
|
103
|
-
<k-tab-content name="tab5"><p>Content 5</p></k-tab-content>
|
|
104
|
-
<k-tab-content name="tab6"><p>Content 6</p></k-tab-content>
|
|
105
|
-
<k-tab-content name="tab7"><p>Content 7</p></k-tab-content>
|
|
106
|
-
<k-tab-content name="tab8"><p>Content 8</p></k-tab-content>
|
|
107
|
-
<k-tab-content name="tab9"><p>Content 9</p></k-tab-content>
|
|
108
|
-
<k-tab-content name="tab10"><p>Content 10</p></k-tab-content>
|
|
109
|
-
</k-tabs>
|
|
86
|
+
<div class="row -mx mb">
|
|
87
|
+
<div class="col d-span-6 m-span-12 px">
|
|
88
|
+
<k-card label="HTML">
|
|
89
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tabs</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab1"</span>></span>Long Tab Name 1<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab2"</span>></span>Long Tab Name 2<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab3"</span>></span>Long Tab Name 3<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab4"</span>></span>Long Tab Name 4<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab5"</span>></span>Long Tab Name 5<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab6"</span>></span>Long Tab Name 6<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab7"</span>></span>Long Tab Name 7<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab8"</span>></span>Long Tab Name 8<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab9"</span>></span>Long Tab Name 9<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab10"</span>></span>Long Tab Name 10<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab1"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 1<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab2"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 2<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab3"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 3<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab4"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 4<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab5"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 5<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab6"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 6<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab7"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 7<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab8"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 8<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab9"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 9<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab10"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Content 10<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tabs</span>></span></code></pre>
|
|
90
|
+
</k-card>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="col d-span-6 m-span-12 px">
|
|
93
|
+
<k-card label="Output">
|
|
94
|
+
<k-tabs>
|
|
95
|
+
<k-tab for="tab1">Long Tab Name 1</k-tab>
|
|
96
|
+
<k-tab for="tab2">Long Tab Name 2</k-tab>
|
|
97
|
+
<k-tab for="tab3">Long Tab Name 3</k-tab>
|
|
98
|
+
<k-tab for="tab4">Long Tab Name 4</k-tab>
|
|
99
|
+
<k-tab for="tab5">Long Tab Name 5</k-tab>
|
|
100
|
+
<k-tab for="tab6">Long Tab Name 6</k-tab>
|
|
101
|
+
<k-tab for="tab7">Long Tab Name 7</k-tab>
|
|
102
|
+
<k-tab for="tab8">Long Tab Name 8</k-tab>
|
|
103
|
+
<k-tab for="tab9">Long Tab Name 9</k-tab>
|
|
104
|
+
<k-tab for="tab10">Long Tab Name 10</k-tab>
|
|
105
|
+
<k-tab-content name="tab1"><p>Content 1</p></k-tab-content>
|
|
106
|
+
<k-tab-content name="tab2"><p>Content 2</p></k-tab-content>
|
|
107
|
+
<k-tab-content name="tab3"><p>Content 3</p></k-tab-content>
|
|
108
|
+
<k-tab-content name="tab4"><p>Content 4</p></k-tab-content>
|
|
109
|
+
<k-tab-content name="tab5"><p>Content 5</p></k-tab-content>
|
|
110
|
+
<k-tab-content name="tab6"><p>Content 6</p></k-tab-content>
|
|
111
|
+
<k-tab-content name="tab7"><p>Content 7</p></k-tab-content>
|
|
112
|
+
<k-tab-content name="tab8"><p>Content 8</p></k-tab-content>
|
|
113
|
+
<k-tab-content name="tab9"><p>Content 9</p></k-tab-content>
|
|
114
|
+
<k-tab-content name="tab10"><p>Content 10</p></k-tab-content>
|
|
115
|
+
</k-tabs>
|
|
116
|
+
</k-card>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
|
|
110
120
|
|
|
111
121
|
<h3 id="fixedHeight"><a href="#fixedHeight" class="no-link">Fixed Height</a></h3>
|
|
112
122
|
<p>Use the <code>fixed-height</code> attribute to make the tabs component fill its container height and enable content scrolling.</p>
|
|
113
|
-
<
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
<
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
123
|
+
<div class="row -mx mb">
|
|
124
|
+
<div class="col d-span-6 m-span-12 px">
|
|
125
|
+
<k-card label="HTML">
|
|
126
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tabs</span> <span class="hljs-attr">fixed-height</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"fixed1"</span>></span>Tab 1<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"fixed2"</span>></span>Tab 2<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fixed1"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>This content will scroll if it's too long.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fixed2"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Another tab that is not tall enough.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tabs</span>></span></code></pre>
|
|
127
|
+
</k-card>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="col d-span-6 m-span-12 px">
|
|
130
|
+
<k-card label="Output">
|
|
131
|
+
<k-tabs fixed-height="true" style="height: 200px">
|
|
132
|
+
<k-tab for="fixed1">Tab 1</k-tab>
|
|
133
|
+
<k-tab for="fixed2">Tab 2</k-tab>
|
|
134
|
+
<k-tab-content name="fixed1">
|
|
135
|
+
<p>This content will scroll if it's too long.</p>
|
|
136
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
137
|
+
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
138
|
+
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
|
|
139
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
140
|
+
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
141
|
+
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
|
|
142
|
+
</k-tab-content>
|
|
143
|
+
<k-tab-content name="fixed2">
|
|
144
|
+
<p>Another tab that is not tall enough.</p>
|
|
145
|
+
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
|
|
146
|
+
</k-tab-content>
|
|
147
|
+
</k-tabs>
|
|
148
|
+
</k-card>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
131
151
|
|
|
132
152
|
<h2 id="jsRef">JavaScript Reference</h2>
|
|
133
153
|
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
@@ -169,6 +189,5 @@
|
|
|
169
189
|
</main>
|
|
170
190
|
<div style="height:33vh"></div>
|
|
171
191
|
<script type="module" src="../src/components/Tabs.js"></script>
|
|
172
|
-
<script type="module" src="../src/components/Import.js"></script>
|
|
173
192
|
</body>
|
|
174
193
|
</html>
|