kempo-ui 0.0.21 → 0.0.23
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/tabs.html +115 -24
- package/docs/index.html +5 -5
- package/package.json +1 -1
|
@@ -15,15 +15,16 @@
|
|
|
15
15
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
16
16
|
<h1 class="ta-center">Tabs</h1>
|
|
17
17
|
<main>
|
|
18
|
-
<k-accordion class="mb">
|
|
19
|
-
<k-accordion-panel
|
|
20
|
-
|
|
18
|
+
<k-accordion persistent-id="toc" class="b r mb">
|
|
19
|
+
<k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
|
|
20
|
+
<k-accordion-panel name="toc-panel">
|
|
21
|
+
<div class="m">
|
|
21
22
|
<h6>Examples</h6>
|
|
22
23
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
23
24
|
<a href="#tabSpacers">Tab Spacers</a><br />
|
|
24
25
|
<a href="#scrollingTabs">Scrolling Tabs</a><br />
|
|
25
26
|
<a href="#fixedHeight">Fixed Height</a><br />
|
|
26
|
-
<h6 class="mt">JavaScript Reference</h6>
|
|
27
|
+
<h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
|
|
27
28
|
<a href="#constructor">Constructor</a><br />
|
|
28
29
|
<a href="#requirements">Requirements</a><br />
|
|
29
30
|
<a href="#properties">Properties</a><br />
|
|
@@ -56,30 +57,120 @@
|
|
|
56
57
|
</k-card>
|
|
57
58
|
</div>
|
|
58
59
|
</div>
|
|
59
|
-
|
|
60
|
+
|
|
61
|
+
<h3 id="tabSpacers"><a href="#tabSpacers" class="no-link">Tab Spacers</a></h3>
|
|
62
|
+
<p>Use the <code>k-tab-spacer</code> component to create flexible spacing between tabs. This is useful for creating layouts where some tabs are grouped on the left and others on the right.</p>
|
|
63
|
+
<div class="row -mx mb">
|
|
64
|
+
<div class="col d-span-6 m-span-12 px">
|
|
65
|
+
<k-card label="HTML">
|
|
66
|
+
<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">"left1"</span>></span>Home<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">"left2"</span>></span>About<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">"right1"</span>></span>Settings<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">"right2"</span>></span>Profile<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">"left1"</span>></span><br /> Home 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">"left2"</span>></span><br /> About 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">"right1"</span>></span><br /> Settings 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">"right2"</span>></span><br /> Profile 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>
|
|
67
|
+
</k-card>
|
|
68
|
+
</div>
|
|
69
|
+
<div class="col d-span-6 m-span-12 px">
|
|
70
|
+
<k-card label="Results">
|
|
71
|
+
<k-tabs>
|
|
72
|
+
<k-tab for="left1">Home</k-tab>
|
|
73
|
+
<k-tab for="left2">About</k-tab>
|
|
74
|
+
<k-tab-spacer></k-tab-spacer>
|
|
75
|
+
<k-tab for="right1">Settings</k-tab>
|
|
76
|
+
<k-tab for="right2">Profile</k-tab>
|
|
77
|
+
<k-tab-content name="left1">
|
|
78
|
+
<p>Home Content</p>
|
|
79
|
+
</k-tab-content>
|
|
80
|
+
<k-tab-content name="left2">
|
|
81
|
+
<p>About Content</p>
|
|
82
|
+
</k-tab-content>
|
|
83
|
+
<k-tab-content name="right1">
|
|
84
|
+
<p>Settings Content</p>
|
|
85
|
+
</k-tab-content>
|
|
86
|
+
<k-tab-content name="right2">
|
|
87
|
+
<p>Profile Content</p>
|
|
88
|
+
</k-tab-content>
|
|
89
|
+
</k-tabs>
|
|
90
|
+
</k-card>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<h3 id="scrollingTabs"><a href="#scrollingTabs" class="no-link">Scrolling Tabs</a></h3>
|
|
95
|
+
<p>When there are many tabs that don't fit in the available space, the tabs will automatically become scrollable with left/right scroll indicators.</p>
|
|
96
|
+
<div class="row -mx mb">
|
|
97
|
+
<div class="col d-span-6 m-span-12 px">
|
|
98
|
+
<k-card label="HTML">
|
|
99
|
+
<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>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">"tab2"</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</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><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>Tab 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>Tab 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>Tab 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>Tab 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>Tab 8<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><br /> Content for Tab 1<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">"tab2"</span>></span><br /> Content for Tab 2<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">"tab3"</span>></span><br /> Content for Tab 3<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">"tab4"</span>></span><br /> Content for Tab 4<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">"tab5"</span>></span><br /> Content for Tab 5<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">"tab6"</span>></span><br /> Content for Tab 6<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">"tab7"</span>></span><br /> Content for Tab 7<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">"tab8"</span>></span><br /> Content for Tab 8<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>
|
|
100
|
+
</k-card>
|
|
101
|
+
</div>
|
|
102
|
+
<div class="col d-span-6 m-span-12 px">
|
|
103
|
+
<k-card label="Results" style="max-width: 400px;">
|
|
104
|
+
<k-tabs>
|
|
105
|
+
<k-tab for="tab1">Tab 1</k-tab>
|
|
106
|
+
<k-tab for="tab2">Tab 2</k-tab>
|
|
107
|
+
<k-tab for="tab3">Tab 3</k-tab>
|
|
108
|
+
<k-tab for="tab4">Tab 4</k-tab>
|
|
109
|
+
<k-tab for="tab5">Tab 5</k-tab>
|
|
110
|
+
<k-tab for="tab6">Tab 6</k-tab>
|
|
111
|
+
<k-tab for="tab7">Tab 7</k-tab>
|
|
112
|
+
<k-tab for="tab8">Tab 8</k-tab>
|
|
113
|
+
<k-tab-content name="tab1">
|
|
114
|
+
<p>Content for Tab 1</p>
|
|
115
|
+
</k-tab-content>
|
|
116
|
+
<k-tab-content name="tab2">
|
|
117
|
+
<p>Content for Tab 2</p>
|
|
118
|
+
</k-tab-content>
|
|
119
|
+
<k-tab-content name="tab3">
|
|
120
|
+
<p>Content for Tab 3</p>
|
|
121
|
+
</k-tab-content>
|
|
122
|
+
<k-tab-content name="tab4">
|
|
123
|
+
<p>Content for Tab 4</p>
|
|
124
|
+
</k-tab-content>
|
|
125
|
+
<k-tab-content name="tab5">
|
|
126
|
+
<p>Content for Tab 5</p>
|
|
127
|
+
</k-tab-content>
|
|
128
|
+
<k-tab-content name="tab6">
|
|
129
|
+
<p>Content for Tab 6</p>
|
|
130
|
+
</k-tab-content>
|
|
131
|
+
<k-tab-content name="tab7">
|
|
132
|
+
<p>Content for Tab 7</p>
|
|
133
|
+
</k-tab-content>
|
|
134
|
+
<k-tab-content name="tab8">
|
|
135
|
+
<p>Content for Tab 8</p>
|
|
136
|
+
</k-tab-content>
|
|
137
|
+
</k-tabs>
|
|
138
|
+
</k-card>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
60
141
|
|
|
61
142
|
<h3 id="fixedHeight"><a href="#fixedHeight" class="no-link">Fixed Height</a></h3>
|
|
62
143
|
<p>Use the <code>fixed-height</code> attribute to make the tabs component fill its container height and enable content scrolling.</p>
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
<
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
144
|
+
<div class="row -mx mb">
|
|
145
|
+
<div class="col d-span-6 m-span-12 px">
|
|
146
|
+
<k-card label="HTML">
|
|
147
|
+
<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>
|
|
148
|
+
</k-card>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="col d-span-6 m-span-12 px">
|
|
151
|
+
<k-card label="Results">
|
|
152
|
+
<k-tabs fixed-height="true" style="height: 200px">
|
|
153
|
+
<k-tab for="fixed1">Tab 1</k-tab>
|
|
154
|
+
<k-tab for="fixed2">Tab 2</k-tab>
|
|
155
|
+
<k-tab-content name="fixed1">
|
|
156
|
+
<p>This content will scroll if it's too long.</p>
|
|
157
|
+
<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>
|
|
158
|
+
<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>
|
|
159
|
+
<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>
|
|
160
|
+
<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>
|
|
161
|
+
<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>
|
|
162
|
+
<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>
|
|
163
|
+
</k-tab-content>
|
|
164
|
+
<k-tab-content name="fixed2">
|
|
165
|
+
<p>Another tab that is not tall enough.</p>
|
|
166
|
+
<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>
|
|
167
|
+
</k-tab-content>
|
|
168
|
+
</k-tabs>
|
|
169
|
+
</k-card>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
81
172
|
|
|
82
|
-
<h2 id="jsRef">JavaScript Reference</h2>
|
|
173
|
+
<h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
|
|
83
174
|
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
84
175
|
<h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
|
|
85
176
|
<h5><code>new Tabs()</code></h5>
|
package/docs/index.html
CHANGED
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Kempo UI Documentation</title>
|
|
7
|
-
<link rel="stylesheet" href="kempo.min.css">
|
|
8
|
-
<link rel="stylesheet" href="kempo-vars.css">
|
|
9
|
-
<link rel="stylesheet" href="styles.css">
|
|
7
|
+
<link rel="stylesheet" href="./kempo.min.css">
|
|
8
|
+
<link rel="stylesheet" href="./kempo-vars.css">
|
|
9
|
+
<link rel="stylesheet" href="./styles.css">
|
|
10
10
|
<script>window.litDisableBundleWarning = true;</script>
|
|
11
|
-
<script src="
|
|
11
|
+
<script src="./init.js" type="module"></script>
|
|
12
12
|
</head>
|
|
13
13
|
<body>
|
|
14
14
|
<k-import src="nav.inc.html"></k-import>
|
|
@@ -203,6 +203,6 @@
|
|
|
203
203
|
</div>
|
|
204
204
|
<div style="height:33vh"></div>
|
|
205
205
|
</main>
|
|
206
|
-
<script type="module" src="src/components/Import.js"></script>
|
|
206
|
+
<script type="module" src="./src/components/Import.js"></script>
|
|
207
207
|
</body>
|
|
208
208
|
</html>
|