kempo-ui 0.0.11 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/components/accordion.html +122 -32
- package/docs/components/card.html +57 -41
- package/docs/components/collapsible.html +158 -36
- package/docs/components/content-slider.html +182 -35
- package/docs/components/dialog.html +79 -45
- package/docs/components/focus-capture.html +78 -40
- package/docs/components/hybrid-component.html +72 -34
- package/docs/components/icon.html +122 -41
- package/docs/components/import.html +39 -41
- package/docs/components/light-component.html +60 -35
- package/docs/components/persistant-collapsible.html +84 -38
- package/docs/components/photo-viewer.html +186 -37
- package/docs/components/resize.html +140 -38
- package/docs/components/shadow-component.html +53 -39
- package/docs/components/show-more.html +93 -40
- package/docs/components/side-menu.html +122 -38
- package/docs/components/sortable.html +94 -36
- package/docs/components/split.html +112 -39
- package/docs/components/table.html +269 -31
- package/docs/components/tableControls.html +54 -51
- package/docs/components/tableCustomFields.html +90 -51
- package/docs/components/tableFetchRecords.html +89 -49
- package/docs/components/tableFieldSortHide.html +52 -51
- package/docs/components/tablePagination.html +77 -51
- package/docs/components/tableRecordEditing.html +121 -51
- package/docs/components/tableRecordFiltering.html +63 -49
- package/docs/components/tableRecordHiding.html +56 -50
- package/docs/components/tableRecordSearching.html +52 -51
- package/docs/components/tableRecordSelection.html +53 -52
- package/docs/components/tableRowControls.html +56 -52
- package/docs/components/tableSorting.html +50 -51
- package/docs/components/tabs.html +147 -43
- package/docs/components/tags.html +72 -38
- package/docs/components/theme-switcher.html +86 -36
- package/docs/components/timestamp.html +44 -38
- package/docs/components/toast.html +25 -44
- package/docs/components/toggle.html +119 -39
- package/docs/components/tree.html +145 -39
- package/docs/dev.config.json +1 -1
- package/docs/index.html +209 -55
- package/docs/utils/debounce.html +31 -28
- package/docs/utils/drag.html +42 -28
- package/docs/utils/formatTimestamp.html +67 -28
- package/docs/utils/propConverters.html +80 -23
- package/docs/utils/toTitleCase.html +24 -28
- package/docs/utils/watchWindowSize.html +96 -5
- package/package.json +1 -1
|
@@ -3,69 +3,73 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
6
|
+
<title>Row Controls - Table - Kempo Docs</title>
|
|
7
7
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
|
+
<script type="module" src="../src/components/Table.js"></script>
|
|
11
12
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
13
|
<script type="module" src="./init.js"></script>
|
|
14
|
+
<script>
|
|
15
|
+
window.contacts = [];
|
|
16
|
+
function generateContact(){
|
|
17
|
+
const maleNames = [
|
|
18
|
+
"Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
|
|
19
|
+
"Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
|
|
20
|
+
"Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
|
|
21
|
+
"Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
|
|
22
|
+
"Wyatt", "Matthew"
|
|
23
|
+
];
|
|
24
|
+
const femaleNames = [
|
|
25
|
+
"Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
|
|
26
|
+
"Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
|
|
27
|
+
"Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
|
|
28
|
+
"Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
|
|
29
|
+
"Grace", "Nora", "Riley", "Zoey"
|
|
30
|
+
];
|
|
31
|
+
const lastNames = [
|
|
32
|
+
"Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
|
|
33
|
+
"Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
|
|
34
|
+
"Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
|
|
35
|
+
"Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
|
|
36
|
+
"Ramirez", "Lewis", "Robinson"
|
|
37
|
+
];
|
|
38
|
+
const gender = Math.random() > 0.5 ? 'm' : 'f';
|
|
39
|
+
const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
|
|
40
|
+
const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
|
|
41
|
+
const name = `${firstName} ${lastName}`;
|
|
42
|
+
const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
|
|
43
|
+
const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
|
|
44
|
+
const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
|
|
45
|
+
return { name, email, birthday, phoneNumber, gender };
|
|
46
|
+
}
|
|
47
|
+
for (let i = 0; i < 5; i++) {
|
|
48
|
+
contacts.push(generateContact());
|
|
49
|
+
};
|
|
50
|
+
</script>
|
|
13
51
|
</head>
|
|
14
52
|
<body>
|
|
15
53
|
<k-import src="../nav.inc.html"></k-import>
|
|
54
|
+
<h1 class="ta-center">Table - Row Controls</h1>
|
|
16
55
|
<main>
|
|
17
|
-
<h1>watchWindowSize</h1>
|
|
18
|
-
|
|
19
|
-
<details
|
|
20
|
-
class="b r mb"
|
|
21
|
-
>
|
|
22
|
-
<summary class="p">Table of Contents</summary>
|
|
23
|
-
<div class="m mt0 pl">
|
|
24
|
-
<h6>Usage</h6>
|
|
25
|
-
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#functions">Functions</a><br />
|
|
27
|
-
<a href="#examples">Examples</a><br />
|
|
28
|
-
</div>
|
|
29
|
-
</details>
|
|
30
|
-
|
|
31
|
-
<h3>Description</h3>
|
|
32
|
-
<p>The <code>watchWindowSize</code> utility provides a debounced way to monitor window resize events. It manages multiple handlers efficiently and automatically debounces resize events to improve performance.</p>
|
|
33
|
-
|
|
34
|
-
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>Import and use the window size watching functions:</p>
|
|
36
|
-
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-keyword">const</span> handler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Window width:'</span>, width);<br />};<br /><br /><span class="hljs-comment">// Start watching</span><br /><span class="hljs-keyword">const</span> currentWidth = watchWindowSize(handler);<br /><br /><span class="hljs-comment">// Stop watching when done</span><br />unwatchWindowSize(handler);</code></pre>
|
|
37
|
-
|
|
38
|
-
<h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
|
|
39
|
-
|
|
40
|
-
<h5><code>watchWindowSize(handler)</code></h5>
|
|
41
|
-
<p>Registers a handler function to be called when the window is resized.</p>
|
|
42
|
-
<ul>
|
|
43
|
-
<li><strong>handler:</strong> Function that receives the new window width</li>
|
|
44
|
-
<li><strong>Returns:</strong> Current window width</li>
|
|
45
|
-
</ul>
|
|
46
|
-
|
|
47
|
-
<h5><code>unwatchWindowSize(handler)</code></h5>
|
|
48
|
-
<p>Unregisters a previously registered handler function.</p>
|
|
49
|
-
<ul>
|
|
50
|
-
<li><strong>handler:</strong> The same function reference that was registered</li>
|
|
51
|
-
</ul>
|
|
52
|
-
|
|
53
|
-
<h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
|
|
54
|
-
|
|
55
|
-
<h4>Responsive Component</h4>
|
|
56
|
-
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ResponsiveComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LitElement</span> </span>{<br /> <span class="hljs-keyword">constructor</span>() {<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-keyword">this</span>.isMobile = <span class="hljs-literal">false</span>;<br /> <span class="hljs-keyword">this</span>.resizeHandler = <span class="hljs-keyword">this</span>.handleResize.bind(<span class="hljs-keyword">this</span>);<br /> }<br /><br /> connectedCallback() {<br /> <span class="hljs-keyword">super</span>.connectedCallback();<br /> <span class="hljs-keyword">const</span> currentWidth = watchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> <span class="hljs-keyword">this</span>.handleResize(currentWidth);<br /> }<br /><br /> disconnectedCallback() {<br /> <span class="hljs-keyword">super</span>.disconnectedCallback();<br /> unwatchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> }<br /><br /> handleResize(width) {<br /> <span class="hljs-keyword">this</span>.isMobile = width < <span class="hljs-number">768</span>;<br /> <span class="hljs-keyword">this</span>.requestUpdate();<br /> }<br /><br /> render() {<br /> <span class="hljs-keyword">return</span> html`<span class="xml"><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${<span class="hljs-keyword">this</span>.isMobile ? <span class="hljs-string">'mobile'</span> : <span class="hljs-string">'desktop'</span>}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span><br /> Content adapts to screen size<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> `</span>;<br /> }<br />}</code></pre>
|
|
57
|
-
|
|
58
|
-
<h4>Multiple Handlers</h4>
|
|
59
|
-
<pre><code class="hljs javascript"><span class="hljs-comment">// Handler for navigation</span><br /><span class="hljs-keyword">const</span> navHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">const</span> nav = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.navigation'</span>);<br /> nav.classList.toggle(<span class="hljs-string">'mobile'</span>, width < <span class="hljs-number">1024</span>);<br />};<br /><br /><span class="hljs-comment">// Handler for sidebar</span><br /><span class="hljs-keyword">const</span> sidebarHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">const</span> sidebar = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.sidebar'</span>);<br /> sidebar.style.display = width < <span class="hljs-number">768</span> ? <span class="hljs-string">'none'</span> : <span class="hljs-string">'block'</span>;<br />};<br /><br /><span class="hljs-comment">// Both handlers will be called on resize</span><br />watchWindowSize(navHandler);<br />watchWindowSize(sidebarHandler);<br /><br /><span class="hljs-comment">// Clean up when needed</span><br />unwatchWindowSize(navHandler);<br />unwatchWindowSize(sidebarHandler);</code></pre>
|
|
60
|
-
|
|
61
|
-
<h4>Breakpoint Detection</h4>
|
|
62
|
-
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> breakpoints = {<br /> <span class="hljs-attr">mobile</span>: <span class="hljs-number">768</span>,<br /> <span class="hljs-attr">tablet</span>: <span class="hljs-number">1024</span>,<br /> <span class="hljs-attr">desktop</span>: <span class="hljs-number">1200</span><br />};<br /><br /><span class="hljs-keyword">const</span> breakpointHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">let</span> currentBreakpoint = <span class="hljs-string">'mobile'</span>;<br /> <br /> <span class="hljs-keyword">if</span> (width >= breakpoints.desktop) {<br /> currentBreakpoint = <span class="hljs-string">'desktop'</span>;<br /> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (width >= breakpoints.tablet) {<br /> currentBreakpoint = <span class="hljs-string">'tablet'</span>;<br /> }<br /> <br /> <span class="hljs-built_in">document</span>.body.setAttribute(<span class="hljs-string">'data-breakpoint'</span>, currentBreakpoint);<br /> <br /> <span class="hljs-comment">// Dispatch custom event</span><br /> <span class="hljs-built_in">window</span>.dispatchEvent(<span class="hljs-keyword">new</span> CustomEvent(<span class="hljs-string">'breakpointchange'</span>, {<br /> <span class="hljs-attr">detail</span>: { width, <span class="hljs-attr">breakpoint</span>: currentBreakpoint }<br /> }));<br />};<br /><br />watchWindowSize(breakpointHandler);</code></pre>
|
|
63
|
-
|
|
64
|
-
<h4>Performance Benefits</h4>
|
|
65
|
-
<p>The utility automatically debounces resize events, so you don't need to worry about performance:</p>
|
|
66
|
-
<pre><code class="hljs javascript"><span class="hljs-comment">// This handler will only be called after resize events stop</span><br /><span class="hljs-keyword">const</span> expensiveHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-comment">// Expensive DOM calculations or API calls</span><br /> recalculateLayout();<br /> updateCharts();<br /> reflow();<br />};<br /><br />watchWindowSize(expensiveHandler); <span class="hljs-comment">// Automatically debounced</span></code></pre>
|
|
67
56
|
|
|
57
|
+
<a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
|
|
58
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"rowControlsExample"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tc-export-json</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"before"</span> <span class="hljs-attr">max-width</span>=<span class="hljs-string">"40"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"export-file"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-icon</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">k-tc-export-json</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tc-delete-record</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tc-delete-record</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-table</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/ExportJson.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/DeleteRecord.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'rowControlsExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
59
|
+
<p>The table component can display controls before or after each row. Each control is defined by an icon name, a callback function, and optionally an HTML string or a render function.</p>
|
|
60
|
+
<k-table id="rowControlsExample">
|
|
61
|
+
<k-tc-export-json slot="before" max-width="40">
|
|
62
|
+
<k-icon name="export-file"></k-icon>
|
|
63
|
+
</k-tc-export-json>
|
|
64
|
+
<k-tc-delete-record slot="after"></k-tc-delete-record>
|
|
65
|
+
</k-table>
|
|
66
|
+
<script type="module" src="../src/components/tableControls/ExportJson.js"></script>
|
|
67
|
+
<script type="module" src="../src/components/tableControls/DeleteRecord.js"></script>
|
|
68
|
+
<script type="module">
|
|
69
|
+
document.getElementById('rowControlsExample').setRecords(contacts);
|
|
70
|
+
</script>
|
|
68
71
|
</main>
|
|
69
|
-
<div style="height:
|
|
72
|
+
<div style="height: 33.333vh"></div>
|
|
73
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
70
74
|
</body>
|
|
71
75
|
</html>
|
|
@@ -3,69 +3,68 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
6
|
+
<title>Sorting - Table - Kempo Docs</title>
|
|
7
7
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
|
+
<script type="module" src="../src/components/Table.js"></script>
|
|
11
12
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
13
|
<script type="module" src="./init.js"></script>
|
|
14
|
+
<script>
|
|
15
|
+
window.contacts = [];
|
|
16
|
+
function generateContact(){
|
|
17
|
+
const maleNames = [
|
|
18
|
+
"Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
|
|
19
|
+
"Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
|
|
20
|
+
"Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
|
|
21
|
+
"Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
|
|
22
|
+
"Wyatt", "Matthew"
|
|
23
|
+
];
|
|
24
|
+
const femaleNames = [
|
|
25
|
+
"Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
|
|
26
|
+
"Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
|
|
27
|
+
"Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
|
|
28
|
+
"Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
|
|
29
|
+
"Grace", "Nora", "Riley", "Zoey"
|
|
30
|
+
];
|
|
31
|
+
const lastNames = [
|
|
32
|
+
"Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
|
|
33
|
+
"Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
|
|
34
|
+
"Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
|
|
35
|
+
"Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
|
|
36
|
+
"Ramirez", "Lewis", "Robinson"
|
|
37
|
+
];
|
|
38
|
+
const gender = Math.random() > 0.5 ? 'm' : 'f';
|
|
39
|
+
const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
|
|
40
|
+
const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
|
|
41
|
+
const name = `${firstName} ${lastName}`;
|
|
42
|
+
const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
|
|
43
|
+
const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
|
|
44
|
+
const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
|
|
45
|
+
return { name, email, birthday, phoneNumber, gender };
|
|
46
|
+
}
|
|
47
|
+
for (let i = 0; i < 10; i++) {
|
|
48
|
+
contacts.push(generateContact());
|
|
49
|
+
};
|
|
50
|
+
</script>
|
|
13
51
|
</head>
|
|
14
52
|
<body>
|
|
15
53
|
<k-import src="../nav.inc.html"></k-import>
|
|
54
|
+
<h1 class="ta-center">Table - Sorting</h1>
|
|
16
55
|
<main>
|
|
17
|
-
<h1>watchWindowSize</h1>
|
|
18
|
-
|
|
19
|
-
<details
|
|
20
|
-
class="b r mb"
|
|
21
|
-
>
|
|
22
|
-
<summary class="p">Table of Contents</summary>
|
|
23
|
-
<div class="m mt0 pl">
|
|
24
|
-
<h6>Usage</h6>
|
|
25
|
-
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#functions">Functions</a><br />
|
|
27
|
-
<a href="#examples">Examples</a><br />
|
|
28
|
-
</div>
|
|
29
|
-
</details>
|
|
30
56
|
|
|
31
|
-
<
|
|
32
|
-
<p>The <code>watchWindowSize</code> utility provides a debounced way to monitor window resize events. It manages multiple handlers efficiently and automatically debounces resize events to improve performance.</p>
|
|
33
|
-
|
|
34
|
-
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>Import and use the window size watching functions:</p>
|
|
36
|
-
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-keyword">const</span> handler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Window width:'</span>, width);<br />};<br /><br /><span class="hljs-comment">// Start watching</span><br /><span class="hljs-keyword">const</span> currentWidth = watchWindowSize(handler);<br /><br /><span class="hljs-comment">// Stop watching when done</span><br />unwatchWindowSize(handler);</code></pre>
|
|
37
|
-
|
|
38
|
-
<h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
|
|
39
|
-
|
|
40
|
-
<h5><code>watchWindowSize(handler)</code></h5>
|
|
41
|
-
<p>Registers a handler function to be called when the window is resized.</p>
|
|
42
|
-
<ul>
|
|
43
|
-
<li><strong>handler:</strong> Function that receives the new window width</li>
|
|
44
|
-
<li><strong>Returns:</strong> Current window width</li>
|
|
45
|
-
</ul>
|
|
46
|
-
|
|
47
|
-
<h5><code>unwatchWindowSize(handler)</code></h5>
|
|
48
|
-
<p>Unregisters a previously registered handler function.</p>
|
|
49
|
-
<ul>
|
|
50
|
-
<li><strong>handler:</strong> The same function reference that was registered</li>
|
|
51
|
-
</ul>
|
|
52
|
-
|
|
53
|
-
<h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
|
|
54
|
-
|
|
55
|
-
<h4>Responsive Component</h4>
|
|
56
|
-
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ResponsiveComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LitElement</span> </span>{<br /> <span class="hljs-keyword">constructor</span>() {<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-keyword">this</span>.isMobile = <span class="hljs-literal">false</span>;<br /> <span class="hljs-keyword">this</span>.resizeHandler = <span class="hljs-keyword">this</span>.handleResize.bind(<span class="hljs-keyword">this</span>);<br /> }<br /><br /> connectedCallback() {<br /> <span class="hljs-keyword">super</span>.connectedCallback();<br /> <span class="hljs-keyword">const</span> currentWidth = watchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> <span class="hljs-keyword">this</span>.handleResize(currentWidth);<br /> }<br /><br /> disconnectedCallback() {<br /> <span class="hljs-keyword">super</span>.disconnectedCallback();<br /> unwatchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> }<br /><br /> handleResize(width) {<br /> <span class="hljs-keyword">this</span>.isMobile = width < <span class="hljs-number">768</span>;<br /> <span class="hljs-keyword">this</span>.requestUpdate();<br /> }<br /><br /> render() {<br /> <span class="hljs-keyword">return</span> html`<span class="xml"><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${<span class="hljs-keyword">this</span>.isMobile ? <span class="hljs-string">'mobile'</span> : <span class="hljs-string">'desktop'</span>}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span><br /> Content adapts to screen size<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> `</span>;<br /> }<br />}</code></pre>
|
|
57
|
-
|
|
58
|
-
<h4>Multiple Handlers</h4>
|
|
59
|
-
<pre><code class="hljs javascript"><span class="hljs-comment">// Handler for navigation</span><br /><span class="hljs-keyword">const</span> navHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">const</span> nav = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.navigation'</span>);<br /> nav.classList.toggle(<span class="hljs-string">'mobile'</span>, width < <span class="hljs-number">1024</span>);<br />};<br /><br /><span class="hljs-comment">// Handler for sidebar</span><br /><span class="hljs-keyword">const</span> sidebarHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">const</span> sidebar = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.sidebar'</span>);<br /> sidebar.style.display = width < <span class="hljs-number">768</span> ? <span class="hljs-string">'none'</span> : <span class="hljs-string">'block'</span>;<br />};<br /><br /><span class="hljs-comment">// Both handlers will be called on resize</span><br />watchWindowSize(navHandler);<br />watchWindowSize(sidebarHandler);<br /><br /><span class="hljs-comment">// Clean up when needed</span><br />unwatchWindowSize(navHandler);<br />unwatchWindowSize(sidebarHandler);</code></pre>
|
|
60
|
-
|
|
61
|
-
<h4>Breakpoint Detection</h4>
|
|
62
|
-
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> breakpoints = {<br /> <span class="hljs-attr">mobile</span>: <span class="hljs-number">768</span>,<br /> <span class="hljs-attr">tablet</span>: <span class="hljs-number">1024</span>,<br /> <span class="hljs-attr">desktop</span>: <span class="hljs-number">1200</span><br />};<br /><br /><span class="hljs-keyword">const</span> breakpointHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-keyword">let</span> currentBreakpoint = <span class="hljs-string">'mobile'</span>;<br /> <br /> <span class="hljs-keyword">if</span> (width >= breakpoints.desktop) {<br /> currentBreakpoint = <span class="hljs-string">'desktop'</span>;<br /> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (width >= breakpoints.tablet) {<br /> currentBreakpoint = <span class="hljs-string">'tablet'</span>;<br /> }<br /> <br /> <span class="hljs-built_in">document</span>.body.setAttribute(<span class="hljs-string">'data-breakpoint'</span>, currentBreakpoint);<br /> <br /> <span class="hljs-comment">// Dispatch custom event</span><br /> <span class="hljs-built_in">window</span>.dispatchEvent(<span class="hljs-keyword">new</span> CustomEvent(<span class="hljs-string">'breakpointchange'</span>, {<br /> <span class="hljs-attr">detail</span>: { width, <span class="hljs-attr">breakpoint</span>: currentBreakpoint }<br /> }));<br />};<br /><br />watchWindowSize(breakpointHandler);</code></pre>
|
|
63
|
-
|
|
64
|
-
<h4>Performance Benefits</h4>
|
|
65
|
-
<p>The utility automatically debounces resize events, so you don't need to worry about performance:</p>
|
|
66
|
-
<pre><code class="hljs javascript"><span class="hljs-comment">// This handler will only be called after resize events stop</span><br /><span class="hljs-keyword">const</span> expensiveHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-comment">// Expensive DOM calculations or API calls</span><br /> recalculateLayout();<br /> updateCharts();<br /> reflow();<br />};<br /><br />watchWindowSize(expensiveHandler); <span class="hljs-comment">// Automatically debounced</span></code></pre>
|
|
57
|
+
<a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
|
|
67
58
|
|
|
59
|
+
<p>The sorting feature allows users to sort the records displayed in the table by clicking on the column headers. This is enabled by setting the <code>enable-sorting="true"</code> attribute.</p>
|
|
60
|
+
<p>Once enabled the user can sort the records by clicking on the fields.</p>
|
|
61
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sortingExample"</span> <span class="hljs-attr">enable-sorting</span>=<span class="hljs-string">"true"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-table</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sortingExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
62
|
+
<k-table id="sortingExample" enable-sorting="true"></k-table>
|
|
63
|
+
<script type="module">
|
|
64
|
+
document.getElementById('sortingExample').setRecords(contacts);
|
|
65
|
+
</script>
|
|
68
66
|
</main>
|
|
69
|
-
<div style="height:
|
|
67
|
+
<div style="height: 33.333vh"></div>
|
|
68
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
70
69
|
</body>
|
|
71
70
|
</html>
|
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo.min.css" />
|
|
6
|
+
<title>Tabs - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
9
8
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
10
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -13,59 +12,164 @@
|
|
|
13
12
|
</head>
|
|
14
13
|
<body>
|
|
15
14
|
<k-import src="../nav.inc.html"></k-import>
|
|
15
|
+
<h1 class="ta-center">Tabs</h1>
|
|
16
16
|
<main>
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
<details
|
|
20
|
-
class="b r mb"
|
|
21
|
-
>
|
|
17
|
+
<details class="b r mb">
|
|
22
18
|
<summary class="p">Table of Contents</summary>
|
|
23
19
|
<div class="m mt0 pl">
|
|
24
|
-
<h6>
|
|
20
|
+
<h6>Examples</h6>
|
|
25
21
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#
|
|
27
|
-
<a href="#
|
|
22
|
+
<a href="#tabSpacers">Tab Spacers</a><br />
|
|
23
|
+
<a href="#scrollingTabs">Scrolling Tabs</a><br />
|
|
24
|
+
<a href="#fixedHeight">Fixed Height</a><br />
|
|
25
|
+
|
|
26
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
27
|
+
<a href="#constructor">Constructor</a><br />
|
|
28
|
+
<a href="#requirements">Requirements</a><br />
|
|
29
|
+
<a href="#properties">Properties</a><br />
|
|
30
|
+
<a href="#methods">Methods</a><br />
|
|
31
|
+
<a href="#events">Events</a><br />
|
|
28
32
|
</div>
|
|
29
33
|
</details>
|
|
30
34
|
|
|
31
|
-
<h3>Description</h3>
|
|
32
|
-
<p>The <code>watchWindowSize</code> utility provides a debounced way to monitor window resize events. It manages multiple handlers efficiently and automatically debounces resize events to improve performance.</p>
|
|
33
|
-
|
|
34
35
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>
|
|
36
|
-
<pre><code class="hljs
|
|
36
|
+
<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>
|
|
37
|
+
<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>
|
|
38
|
+
<k-tabs>
|
|
39
|
+
<k-tab for="html">HTML</k-tab>
|
|
40
|
+
<k-tab for="js">JavaScript</k-tab>
|
|
41
|
+
<k-tab-content name="html">
|
|
42
|
+
<p>HTML Content</p>
|
|
43
|
+
</k-tab-content>
|
|
44
|
+
<k-tab-content name="js">
|
|
45
|
+
<p>JavaScript Content</p>
|
|
46
|
+
</k-tab-content>
|
|
47
|
+
</k-tabs>
|
|
37
48
|
|
|
38
|
-
<h3 id="
|
|
39
|
-
|
|
40
|
-
<
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
<
|
|
44
|
-
<
|
|
45
|
-
|
|
49
|
+
<h3 id="tabSpacers"><a href="#tabSpacers" class="no-link">Tab Spacers</a></h3>
|
|
50
|
+
<p>Use the <code>k-tab-spacer</code> component to add a flexible space between tabs.</p>
|
|
51
|
+
<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>
|
|
52
|
+
<k-tabs>
|
|
53
|
+
<k-tab for="html">HTML</k-tab>
|
|
54
|
+
<k-tab-spacer></k-tab-spacer>
|
|
55
|
+
<k-tab for="js">JavaScript</k-tab>
|
|
56
|
+
<k-tab-content name="html">
|
|
57
|
+
<p>HTML Content</p>
|
|
58
|
+
</k-tab-content>
|
|
59
|
+
<k-tab-content name="js">
|
|
60
|
+
<p>JavaScript Content</p>
|
|
61
|
+
</k-tab-content>
|
|
62
|
+
</k-tabs>
|
|
63
|
+
|
|
64
|
+
<h3 id="scrollingTabs"><a href="#scrollingTabs" class="no-link">Scrolling Tabs</a></h3>
|
|
65
|
+
<p>When there are many tabs, they will scroll horizontally with gradient indicators showing when more tabs are available.</p>
|
|
66
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tabs</span>></span>
|
|
67
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab1"</span>></span>Tab 1<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
68
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab2"</span>></span>Tab 2<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
69
|
+
<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>
|
|
70
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab4"</span>></span>Tab 4<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
71
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab5"</span>></span>Tab 5<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
72
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab6"</span>></span>Tab 6<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
73
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab7"</span>></span>Tab 7<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
74
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab8"</span>></span>Tab 8<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
75
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab9"</span>></span>Tab 9<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
76
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab10"</span>></span>Tab 10<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
77
|
+
<span class="hljs-comment"><!-- Tab Contents --></span>
|
|
78
|
+
<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>Content 1<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
79
|
+
<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>Content 2<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
80
|
+
<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>Content 3<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
81
|
+
<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>Content 4<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
82
|
+
<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>Content 5<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
83
|
+
<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>Content 6<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
84
|
+
<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>Content 7<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
85
|
+
<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>Content 8<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
86
|
+
<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>Content 9<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
87
|
+
<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>Content 10<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
88
|
+
<span class="hljs-tag"></<span class="hljs-name">k-tabs</span>></span></code></pre>
|
|
89
|
+
<k-tabs>
|
|
90
|
+
<k-tab for="tab1">Long Tab Name 1</k-tab>
|
|
91
|
+
<k-tab for="tab2">Long Tab Name 2</k-tab>
|
|
92
|
+
<k-tab for="tab3">Long Tab Name 3</k-tab>
|
|
93
|
+
<k-tab for="tab4">Long Tab Name 4</k-tab>
|
|
94
|
+
<k-tab for="tab5">Long Tab Name 5</k-tab>
|
|
95
|
+
<k-tab for="tab6">Long Tab Name 6</k-tab>
|
|
96
|
+
<k-tab for="tab7">Long Tab Name 7</k-tab>
|
|
97
|
+
<k-tab for="tab8">Long Tab Name 8</k-tab>
|
|
98
|
+
<k-tab for="tab9">Long Tab Name 9</k-tab>
|
|
99
|
+
<k-tab for="tab10">Long Tab Name 10</k-tab>
|
|
100
|
+
<k-tab-content name="tab1"><p>Content 1</p></k-tab-content>
|
|
101
|
+
<k-tab-content name="tab2"><p>Content 2</p></k-tab-content>
|
|
102
|
+
<k-tab-content name="tab3"><p>Content 3</p></k-tab-content>
|
|
103
|
+
<k-tab-content name="tab4"><p>Content 4</p></k-tab-content>
|
|
104
|
+
<k-tab-content name="tab5"><p>Content 5</p></k-tab-content>
|
|
105
|
+
<k-tab-content name="tab6"><p>Content 6</p></k-tab-content>
|
|
106
|
+
<k-tab-content name="tab7"><p>Content 7</p></k-tab-content>
|
|
107
|
+
<k-tab-content name="tab8"><p>Content 8</p></k-tab-content>
|
|
108
|
+
<k-tab-content name="tab9"><p>Content 9</p></k-tab-content>
|
|
109
|
+
<k-tab-content name="tab10"><p>Content 10</p></k-tab-content>
|
|
110
|
+
</k-tabs>
|
|
46
111
|
|
|
47
|
-
<
|
|
48
|
-
<p>
|
|
112
|
+
<h3 id="fixedHeight"><a href="#fixedHeight" class="no-link">Fixed Height</a></h3>
|
|
113
|
+
<p>Use the <code>fixed-height</code> attribute to make the tabs component fill its container height and enable content scrolling.</p>
|
|
114
|
+
<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>
|
|
115
|
+
<k-tabs fixed-height="true" style="height: 200px">
|
|
116
|
+
<k-tab for="fixed1">Tab 1</k-tab>
|
|
117
|
+
<k-tab for="fixed2">Tab 2</k-tab>
|
|
118
|
+
<k-tab-content name="fixed1">
|
|
119
|
+
<p>This content will scroll if it's too long.</p>
|
|
120
|
+
<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>
|
|
121
|
+
<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>
|
|
122
|
+
<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>
|
|
123
|
+
<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>
|
|
124
|
+
<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>
|
|
125
|
+
<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>
|
|
126
|
+
</k-tab-content>
|
|
127
|
+
<k-tab-content name="fixed2">
|
|
128
|
+
<p>Another tab that is not tall enough.</p>
|
|
129
|
+
<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>
|
|
130
|
+
</k-tab-content>
|
|
131
|
+
</k-tabs>
|
|
132
|
+
|
|
133
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
134
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
135
|
+
<h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
|
|
136
|
+
<h5><code>new Tabs()</code></h5>
|
|
137
|
+
|
|
138
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
49
139
|
<ul>
|
|
50
|
-
<li><
|
|
140
|
+
<li><a href="./shadow-component.html">ShadowComponent</a></li>
|
|
51
141
|
</ul>
|
|
52
|
-
|
|
53
|
-
<h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
|
|
54
142
|
|
|
55
|
-
<
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
<
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
<
|
|
62
|
-
<
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<
|
|
66
|
-
<
|
|
67
|
-
|
|
143
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
144
|
+
<h5><code>active<i>: string</i></code></h5>
|
|
145
|
+
<p>The name of the active tab. Syncs to <code>active</code> attribute.</p>
|
|
146
|
+
<h5><code>fixedHeight<i>: boolean</i></code></h5>
|
|
147
|
+
<p>Whether the tabs component uses fixed height mode. Syncs to <code>fixed-height</code> attribute.</p>
|
|
148
|
+
<h5><code>contents<i>: TabContent[]</i></code></h5>
|
|
149
|
+
<p>Returns an array of all tab content elements.</p>
|
|
150
|
+
<h5><code>tabs<i>: Tab[]</i></code></h5>
|
|
151
|
+
<p>Returns an array of all tab elements.</p>
|
|
152
|
+
|
|
153
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
154
|
+
<h5><code>getActiveTab()<i>: Tab</i></code></h5>
|
|
155
|
+
<p>Returns the currently active tab.</p>
|
|
156
|
+
<h5><code>getTab(id)<i>: Tab</i></code></h5>
|
|
157
|
+
<p>Returns the tab with the specified id.</p>
|
|
158
|
+
<h5><code>getActiveContent()<i>: TabContent</i></code></h5>
|
|
159
|
+
<p>Returns the currently active tab content.</p>
|
|
160
|
+
<h5><code>getContent(id)<i>: TabContent</i></code></h5>
|
|
161
|
+
<p>Returns the tab content with the specified id.</p>
|
|
162
|
+
<h5><code>updateActiveElements()<i>: void</i></code></h5>
|
|
163
|
+
<p>Updates the active state of tabs and content based on the current active property.</p>
|
|
164
|
+
<h5><code>updateScrollIndicators()<i>: void</i></code></h5>
|
|
165
|
+
<p>Updates the visibility of scroll indicators based on tab overflow.</p>
|
|
166
|
+
|
|
167
|
+
<h3 id="events"><a href="#events" class="no-link">Events</a></h3>
|
|
168
|
+
<h5><code>tab</code></h5>
|
|
169
|
+
<p>Fired when the active tab changes. Detail contains <code>{ tab }</code> with the name of the new active tab.</p>
|
|
68
170
|
</main>
|
|
69
171
|
<div style="height:33vh"></div>
|
|
172
|
+
<script type="module" src="../src/components/Tabs.js"></script>
|
|
173
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
70
174
|
</body>
|
|
71
|
-
</html>
|
|
175
|
+
</html>
|