kempo-ui 0.0.39 → 0.0.41
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/components/Dropdown.js +123 -0
- package/dist/components/ShadowComponent.js +1 -1
- package/dist/components/Spinner.js +113 -0
- package/docs/components/accordion.html +1 -1
- package/docs/components/card.html +1 -1
- package/docs/components/color-picker.html +1 -1
- package/docs/components/content-slider.html +1 -1
- package/docs/components/dialog.html +1 -1
- package/docs/components/dropdown.html +282 -0
- package/docs/components/focus-capture.html +1 -1
- package/docs/components/hybrid-component.html +1 -1
- package/docs/components/icon.html +1 -1
- package/docs/components/import.html +1 -1
- package/docs/components/light-component.html +1 -1
- package/docs/components/photo-viewer.html +1 -1
- package/docs/components/resize.html +1 -1
- package/docs/components/shadow-component.html +1 -1
- package/docs/components/show-more.html +1 -1
- package/docs/components/side-menu.html +1 -1
- package/docs/components/sortable.html +1 -1
- package/docs/components/spinner.html +214 -0
- package/docs/components/split.html +1 -1
- package/docs/components/table.html +1 -1
- package/docs/components/tableControls.html +1 -1
- package/docs/components/tableCustomFields.html +1 -1
- package/docs/components/tableFetchRecords.html +1 -1
- package/docs/components/tableFieldSortHide.html +1 -1
- package/docs/components/tablePagination.html +1 -1
- package/docs/components/tableRecordEditing.html +1 -1
- package/docs/components/tableRecordFiltering.html +1 -1
- package/docs/components/tableRecordHiding.html +1 -1
- package/docs/components/tableRecordSearching.html +1 -1
- package/docs/components/tableRecordSelection.html +1 -1
- package/docs/components/tableRowControls.html +1 -1
- package/docs/components/tableSorting.html +1 -1
- package/docs/components/tabs.html +1 -1
- package/docs/components/tags.html +1 -1
- package/docs/components/theme-switcher.html +1 -1
- package/docs/components/timestamp.html +1 -1
- package/docs/components/toast.html +1 -1
- package/docs/components/toggle.html +1 -1
- package/docs/components/tree.html +1 -1
- package/docs/index.html +13 -1
- package/docs/nav-1.inc.html +2 -0
- package/docs/src/components/Dropdown.js +123 -0
- package/docs/src/components/ShadowComponent.js +1 -1
- package/docs/src/components/Spinner.js +113 -0
- package/docs/utils/context.html +1 -1
- package/docs/utils/cookie.html +1 -1
- package/docs/utils/debounce.html +1 -1
- package/docs/utils/drag.html +1 -1
- package/docs/utils/formatTimestamp.html +1 -1
- package/docs/utils/object.html +1 -1
- package/docs/utils/propConverters.html +1 -1
- package/docs/utils/string.html +1 -1
- package/docs/utils/theme.html +1 -1
- package/docs/utils/toTitleCase.html +1 -1
- package/docs/utils/type.html +1 -1
- package/docs/utils/wait.html +1 -1
- package/package.json +1 -1
- package/src/components/Dropdown.js +358 -0
- package/src/components/ShadowComponent.js +1 -1
- package/src/components/Spinner.js +152 -0
- package/tests/components/Dropdown.browser-test.js +557 -0
- package/tests/components/HybridComponent.browser-test.js +8 -2
- package/tests/components/ShadowComponent.browser-test.js +6 -6
- package/tests/components/Spinner.browser-test.js +335 -0
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Spinner - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
|
+
<link rel="manifest" href="../manifest.json" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
13
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
+
<script src="../init-1.js" type="module"></script>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
18
|
+
<main>
|
|
19
|
+
<h1 class="ta-center">Spinner</h1>
|
|
20
|
+
|
|
21
|
+
<k-accordion persistent-id="toc" class="b r mb">
|
|
22
|
+
<k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
|
|
23
|
+
<k-accordion-panel name="toc-panel">
|
|
24
|
+
<div class="m">
|
|
25
|
+
<h6>Examples</h6>
|
|
26
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
27
|
+
<a href="#sizes">Sizes</a><br />
|
|
28
|
+
<a href="#variants">Variants</a><br />
|
|
29
|
+
<a href="#customColors">Custom Colors</a><br />
|
|
30
|
+
<a href="#withText">With Text</a><br />
|
|
31
|
+
<a href="#buttonLoading">Button Loading State</a><br />
|
|
32
|
+
|
|
33
|
+
<h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
|
|
34
|
+
<a href="#constructor">Constructor</a><br />
|
|
35
|
+
<a href="#requirements">Requirements</a><br />
|
|
36
|
+
<a href="#attributes">Attributes</a><br />
|
|
37
|
+
<a href="#cssVariables">CSS Variables</a><br />
|
|
38
|
+
</div>
|
|
39
|
+
</k-accordion-panel>
|
|
40
|
+
</k-accordion>
|
|
41
|
+
|
|
42
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
43
|
+
<p>Create loading spinners using the <code>k-spinner</code> component.</p>
|
|
44
|
+
<div class="row -mx">
|
|
45
|
+
<div class="col m-span-12 px">
|
|
46
|
+
<k-card label="HTML">
|
|
47
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-spinner</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span></code></pre>
|
|
48
|
+
</k-card>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="col m-span-12 px">
|
|
51
|
+
<k-card label="Output">
|
|
52
|
+
<k-spinner></k-spinner>
|
|
53
|
+
</k-card>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<h3 id="sizes"><a href="#sizes" class="no-link">Sizes</a></h3>
|
|
58
|
+
<p>Control the spinner size using the <code>size</code> attribute. Options are <code>xs</code>, <code>sm</code>, <code>md</code> (default), <code>lg</code>, and <code>xl</code>.</p>
|
|
59
|
+
<div class="row -mx">
|
|
60
|
+
<div class="col m-span-12 px">
|
|
61
|
+
<k-card label="HTML">
|
|
62
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"xs"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"md"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"xl"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span></code></pre>
|
|
63
|
+
</k-card>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="col m-span-12 px">
|
|
66
|
+
<k-card label="Output">
|
|
67
|
+
<div class="d-f ai-c gap">
|
|
68
|
+
<k-spinner size="xs"></k-spinner>
|
|
69
|
+
<k-spinner size="sm"></k-spinner>
|
|
70
|
+
<k-spinner size="md"></k-spinner>
|
|
71
|
+
<k-spinner size="lg"></k-spinner>
|
|
72
|
+
<k-spinner size="xl"></k-spinner>
|
|
73
|
+
</div>
|
|
74
|
+
</k-card>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<h3 id="variants"><a href="#variants" class="no-link">Variants</a></h3>
|
|
79
|
+
<p>Choose from different spinner styles using the <code>variant</code> attribute. Options are <code>spinner</code> (default), <code>dots</code>, <code>bars</code>, <code>pulse</code>, and <code>ring</code>.</p>
|
|
80
|
+
<div class="row -mx">
|
|
81
|
+
<div class="col m-span-12 px">
|
|
82
|
+
<k-card label="HTML">
|
|
83
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"spinner"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"dots"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"bars"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"pulse"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"ring"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span></code></pre>
|
|
84
|
+
</k-card>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="col m-span-12 px">
|
|
87
|
+
<k-card label="Output">
|
|
88
|
+
<div class="d-f ai-c gap-lg">
|
|
89
|
+
<div class="ta-center">
|
|
90
|
+
<k-spinner variant="spinner" size="lg"></k-spinner>
|
|
91
|
+
<p class="mt-sm mb0">spinner</p>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="ta-center">
|
|
94
|
+
<k-spinner variant="dots" size="lg"></k-spinner>
|
|
95
|
+
<p class="mt-sm mb0">dots</p>
|
|
96
|
+
</div>
|
|
97
|
+
<div class="ta-center">
|
|
98
|
+
<k-spinner variant="bars" size="lg"></k-spinner>
|
|
99
|
+
<p class="mt-sm mb0">bars</p>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="ta-center">
|
|
102
|
+
<k-spinner variant="pulse" size="lg"></k-spinner>
|
|
103
|
+
<p class="mt-sm mb0">pulse</p>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="ta-center">
|
|
106
|
+
<k-spinner variant="ring" size="lg"></k-spinner>
|
|
107
|
+
<p class="mt-sm mb0">ring</p>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
</k-card>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<h3 id="customColors"><a href="#customColors" class="no-link">Custom Colors</a></h3>
|
|
115
|
+
<p>Customize spinner colors using CSS variables.</p>
|
|
116
|
+
<div class="row -mx">
|
|
117
|
+
<div class="col m-span-12 px">
|
|
118
|
+
<k-card label="HTML">
|
|
119
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: var(--c_success)"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: var(--c_danger)"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: var(--c_warning)"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: #9c27b0"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span></code></pre>
|
|
120
|
+
</k-card>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="col m-span-12 px">
|
|
123
|
+
<k-card label="Output">
|
|
124
|
+
<div class="d-f ai-c gap">
|
|
125
|
+
<k-spinner style="--spinner-color: var(--c_success)"></k-spinner>
|
|
126
|
+
<k-spinner style="--spinner-color: var(--c_danger)"></k-spinner>
|
|
127
|
+
<k-spinner style="--spinner-color: var(--c_warning)"></k-spinner>
|
|
128
|
+
<k-spinner style="--spinner-color: #9c27b0"></k-spinner>
|
|
129
|
+
</div>
|
|
130
|
+
</k-card>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<h3 id="withText"><a href="#withText" class="no-link">With Text</a></h3>
|
|
135
|
+
<p>Combine spinners with text for loading messages.</p>
|
|
136
|
+
<div class="row -mx">
|
|
137
|
+
<div class="col m-span-12 px">
|
|
138
|
+
<k-card label="HTML">
|
|
139
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f ai-c gap"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>Loading...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
140
|
+
</k-card>
|
|
141
|
+
</div>
|
|
142
|
+
<div class="col m-span-12 px">
|
|
143
|
+
<k-card label="Output">
|
|
144
|
+
<div class="d-f ai-c gap">
|
|
145
|
+
<k-spinner size="sm"></k-spinner>
|
|
146
|
+
<span>Loading...</span>
|
|
147
|
+
</div>
|
|
148
|
+
</k-card>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<h3 id="buttonLoading"><a href="#buttonLoading" class="no-link">Button Loading State</a></h3>
|
|
153
|
+
<p>Use spinners inside buttons to indicate loading states.</p>
|
|
154
|
+
<div class="row -mx">
|
|
155
|
+
<div class="col m-span-12 px">
|
|
156
|
+
<k-card label="HTML">
|
|
157
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">disabled</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-spinner</span><br /> <span class="hljs-attr">size</span>=<span class="hljs-string">"xs"</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: currentColor"</span><br /> ></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /> Saving...<br /><span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">disabled</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-spinner</span><br /> <span class="hljs-attr">size</span>=<span class="hljs-string">"xs"</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: currentColor"</span><br /> ></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /> Loading...<br /><span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
158
|
+
</k-card>
|
|
159
|
+
</div>
|
|
160
|
+
<div class="col m-span-12 px">
|
|
161
|
+
<k-card label="Output">
|
|
162
|
+
<div class="d-f gap">
|
|
163
|
+
<button disabled>
|
|
164
|
+
<k-spinner size="xs" style="--spinner-color: currentColor"></k-spinner>
|
|
165
|
+
Saving...
|
|
166
|
+
</button>
|
|
167
|
+
<button class="primary" disabled>
|
|
168
|
+
<k-spinner size="xs" style="--spinner-color: currentColor"></k-spinner>
|
|
169
|
+
Loading...
|
|
170
|
+
</button>
|
|
171
|
+
</div>
|
|
172
|
+
</k-card>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
<h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
|
|
177
|
+
|
|
178
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
179
|
+
<h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
|
|
180
|
+
<h5><code>new Spinner()</code></h5>
|
|
181
|
+
|
|
182
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
183
|
+
<ul>
|
|
184
|
+
<li><a href="./shadow-component.html">ShadowComponent</a></li>
|
|
185
|
+
</ul>
|
|
186
|
+
|
|
187
|
+
<h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
|
|
188
|
+
<h5><code>size<i>: string</i></code></h5>
|
|
189
|
+
<p>The size of the spinner. Options: <code>xs</code>, <code>sm</code>, <code>md</code> (default), <code>lg</code>, <code>xl</code>.</p>
|
|
190
|
+
|
|
191
|
+
<h5><code>variant<i>: string</i></code></h5>
|
|
192
|
+
<p>The style variant of the spinner. Options: <code>spinner</code> (default), <code>dots</code>, <code>bars</code>, <code>pulse</code>, <code>ring</code>.</p>
|
|
193
|
+
|
|
194
|
+
<h3 id="cssVariables"><a href="#cssVariables" class="no-link">CSS Variables</a></h3>
|
|
195
|
+
<h5><code>--spinner-size</code></h5>
|
|
196
|
+
<p>The width and height of the spinner. Set automatically based on <code>size</code> attribute.</p>
|
|
197
|
+
|
|
198
|
+
<h5><code>--spinner-border-width</code></h5>
|
|
199
|
+
<p>The border thickness for spinner and ring variants. Set automatically based on <code>size</code> attribute.</p>
|
|
200
|
+
|
|
201
|
+
<h5><code>--spinner-color</code></h5>
|
|
202
|
+
<p>The primary color of the spinner. Default is <code>var(--c_primary)</code>.</p>
|
|
203
|
+
|
|
204
|
+
<h5><code>--spinner-track-color</code></h5>
|
|
205
|
+
<p>The background track color for the spinner variant. Default is <code>var(--c_border)</code>.</p>
|
|
206
|
+
|
|
207
|
+
</main>
|
|
208
|
+
<div style="height:33vh"></div>
|
|
209
|
+
<script type="module" src="../src/components/Spinner.js"></script>
|
|
210
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
211
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
212
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
213
|
+
</body>
|
|
214
|
+
</html>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script type="module" src="../src/components/Table.js"></script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script type="module" src="../src/components/Table.js"></script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script type="module" src="../src/components/Table.js"></script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script type="module" src="../src/components/Table.js"></script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script type="module" src="../src/components/Table.js"></script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
9
9
|
<link rel="manifest" href="../manifest.json" />
|
|
10
10
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
11
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
11
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
12
12
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
13
13
|
<link rel="stylesheet" href="../styles.css" />
|
|
14
14
|
<script>window.litDisableBundleWarning = true;</script>
|
package/docs/index.html
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<title>Kempo UI Documentation</title>
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="./media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="./manifest.json" />
|
|
9
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
9
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css">
|
|
10
10
|
<link rel="stylesheet" href="./kempo-hljs.css">
|
|
11
11
|
<link rel="stylesheet" href="./kempo-vars.css">
|
|
12
12
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -78,6 +78,12 @@
|
|
|
78
78
|
<p class="tc-muted">Modal dialogs with focus trapping and customizable buttons.</p>
|
|
79
79
|
</a>
|
|
80
80
|
</div>
|
|
81
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
82
|
+
<a href="./components/dropdown.html" class="card mb no-link d-b">
|
|
83
|
+
<h3 class="tc-primary">Dropdown</h3>
|
|
84
|
+
<p class="tc-muted">Action menus with keyboard navigation and customizable positioning.</p>
|
|
85
|
+
</a>
|
|
86
|
+
</div>
|
|
81
87
|
<div class="span-12 t-span-6 d-span-4 px">
|
|
82
88
|
<a href="./components/focus-capture.html" class="card mb no-link d-b">
|
|
83
89
|
<h3 class="tc-primary">FocusCapture</h3>
|
|
@@ -126,6 +132,12 @@
|
|
|
126
132
|
<p class="tc-muted">Drag-and-drop lists with reordering and sort events.</p>
|
|
127
133
|
</a>
|
|
128
134
|
</div>
|
|
135
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
136
|
+
<a href="./components/spinner.html" class="card mb no-link d-b">
|
|
137
|
+
<h3 class="tc-primary">Spinner</h3>
|
|
138
|
+
<p class="tc-muted">Loading indicators with multiple styles and sizes.</p>
|
|
139
|
+
</a>
|
|
140
|
+
</div>
|
|
129
141
|
<div class="span-12 t-span-6 d-span-4 px">
|
|
130
142
|
<a href="./components/split.html" class="card mb no-link d-b">
|
|
131
143
|
<h3 class="tc-primary">Split</h3>
|
package/docs/nav-1.inc.html
CHANGED
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
<a href="../components/color-picker.html">ColorPicker</a>
|
|
37
37
|
<a href="../components/content-slider.html">Content Slider</a>
|
|
38
38
|
<a href="../components/dialog.html">Dialog</a>
|
|
39
|
+
<a href="../components/dropdown.html">Dropdown</a>
|
|
39
40
|
<a href="../components/focus-capture.html">FocusCapture</a>
|
|
40
41
|
<a href="../components/icon.html">Icon</a>
|
|
41
42
|
<a href="../components/import.html">Import</a>
|
|
@@ -44,6 +45,7 @@
|
|
|
44
45
|
<a href="../components/show-more.html">Show More</a>
|
|
45
46
|
<a href="../components/side-menu.html">Side Menu</a>
|
|
46
47
|
<a href="../components/sortable.html">Sortable</a>
|
|
48
|
+
<a href="../components/spinner.html">Spinner</a>
|
|
47
49
|
<a href="../components/split.html">Split</a>
|
|
48
50
|
<a href="../components/table.html">Table</a>
|
|
49
51
|
<a href="../components/tabs.html">Tabs</a>
|