Skip to content

Commit 16511ea

Browse files
mrholekmrholek
committed
docs: add Loading Buttons
1 parent ca909b2 commit 16511ea

File tree

3 files changed

+214
-0
lines changed

3 files changed

+214
-0
lines changed

‎docs/assets/js/application.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,15 @@
102102
})
103103
}
104104

105+
document.querySelectorAll('.btn-loading')
106+
.forEach(function (button) {
107+
new coreui.LoadingButton(button)
108+
button.addEventListener('click', function (event) {
109+
var myBtn = coreui.LoadingButton.getInstance(event.target)
110+
myBtn.start()
111+
})
112+
})
113+
105114
// Insert copy to clipboard button before .highlight
106115
var btnHtml = '<div class="docs-clipboard"><button type="button" class="btn-clipboard btn-ghost-primary" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><polygon fill="var(--ci-primary-color, currentColor)" points="408 432 376 432 376 464 112 464 112 136 144 136 144 104 80 104 80 496 408 496 408 432" class="ci-primary"/><path fill="var(--ci-primary-color, currentColor)" d="M176,16V400H496V153.373L358.627,16ZM464,368H208V48H312V200H464Zm0-200H344V48h1.372L464,166.627Z" class="ci-primary"/></svg></button></div>'
107116
document.querySelectorAll('div.highlight')

‎docs/content/4.0/components/loading-buttons.md

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
---
2+
layout: docs
3+
title: Loading Buttons
4+
description: Buttons with built-in loading indicators. Indicate the loading state of the button bridging the gap between action and feedback.
5+
aliases:
6+
- "/components/loading-buttons/"
7+
toc: true
8+
---
9+
10+
## Basic example
11+
12+
{{< example >}}
13+
<button type="button" class="btn btn-primary btn-loading">Submit</button>
14+
<button type="button" class="btn btn-outline-primary btn-loading">Submit</button>
15+
<button type="button" class="btn btn-ghost-primary btn-loading">Submit</button>
16+
{{< /example >}}
17+
18+
## Spinners
19+
20+
### Border
21+
22+
{{< example >}}
23+
<button type="button" class="btn btn-info btn-loading">Submit</button>
24+
<button type="button" class="btn btn-outline-success btn-loading">Submit</button>
25+
<button type="button" class="btn btn-ghost-warning btn-loading">Submit</button>
26+
{{< /example >}}
27+
28+
### Grow
29+
30+
{{< example >}}
31+
<button type="button" class="btn btn-info btn-loading" data-coreui-spinner-type="grow">Submit</button>
32+
<button type="button" class="btn btn-outline-success btn-loading" data-coreui-spinner-type="grow">Submit</button>
33+
<button type="button" class="btn btn-ghost-warning btn-loading" data-coreui-spinner-type="grow">Submit</button>
34+
{{< /example >}}
35+
36+
## Progress Bar
37+
38+
{{< example >}}
39+
<button type="button" class="btn btn-danger btn-loading" data-coreui-progress="true">Submit</button>
40+
<button type="button" class="btn btn-danger btn-loading" data-coreui-progress="true" data-coreui-spinner="false">Submit</button>
41+
{{< /example >}}
42+
43+
## Usage
44+
45+
### Options
46+
47+
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-coreui-`, as in `data-coreui-percent=""`.
48+
49+
<table class="table">
50+
<thead>
51+
<tr>
52+
<th style="width: 100px;">Name</th>
53+
<th style="width: 100px;">Type</th>
54+
<th style="width: 120px;">Default</th>
55+
<th>Description</th>
56+
</tr>
57+
</thead>
58+
<tbody>
59+
<tr>
60+
<td><code>percent</code></td>
61+
<td>number</td>
62+
<td><code>0</code></td>
63+
<td></td>
64+
</tr>
65+
<tr>
66+
<td><code>spinner</code></td>
67+
<td>boolean</td>
68+
<td><code>true</code></td>
69+
<td></td>
70+
</tr>
71+
<tr>
72+
<td><code>spinnerType</code></td>
73+
<td>string</td>
74+
<td><code>'border'</code></td>
75+
<td></td>
76+
</tr>
77+
<tr>
78+
<td><code>timeout</code></td>
79+
<td>number</td>
80+
<td><code>1000</code></td>
81+
<td></td>
82+
</tr>
83+
</tbody>
84+
</table>
85+
86+
### Methods
87+
88+
<table class="table">
89+
<thead>
90+
<tr>
91+
<th>Method</th>
92+
<th>Description</th>
93+
</tr>
94+
</thead>
95+
<tbody>
96+
<tr>
97+
<td><code>start</code></td>
98+
<td>
99+
Starts loading.
100+
Shows the multi select's options.
101+
</td>
102+
</tr>
103+
<tr>
104+
<td><code>stop</code></td>
105+
<td>
106+
Stops loading and reset the percent of loaded to the initial value.
107+
</td>
108+
</tr>
109+
<tr>
110+
<td><code>pause</code></td>
111+
<td>
112+
Pauses loading.
113+
</td>
114+
</tr>
115+
<tr>
116+
<td><code>resume</code></td>
117+
<td>
118+
Resumes loading.
119+
</td>
120+
</tr>
121+
<tr>
122+
<td><code>complete</code></td>
123+
<td>
124+
Sets the percent of loaded to the 100%.
125+
</td>
126+
</tr>
127+
<tr>
128+
<td><code>update</code></td>
129+
<td>
130+
Updates the configuration of loading button.
131+
</td>
132+
</tr>
133+
<tr>
134+
<td><code>updatePercent</code></td>
135+
<td>
136+
Sets the percent of loaded to the provided value.
137+
</td>
138+
</tr>
139+
<tr>
140+
<td><code>dispose</code></td>
141+
<td>
142+
Destroys an element's loading button. (Removes stored data on the DOM element)
143+
</td>
144+
</tr>
145+
<tr>
146+
<td><code>getInstance</code></td>
147+
<td>
148+
Static method which allows you to get the multi select instance associated with a DOM element.
149+
</td>
150+
</tr>
151+
</tbody>
152+
</table>
153+
154+
```js
155+
var myBtnLoading = document.getElementById('btn-loading')
156+
var myBtn = new coreui.LoadingButton(myBtnLoading)
157+
myBtn.start()
158+
```
159+
160+
### Events
161+
162+
Multi Select component exposes a few events for hooking into multi select functionality.
163+
164+
<table class="table">
165+
<thead>
166+
<tr>
167+
<th>Method</th>
168+
<th>Description</th>
169+
</tr>
170+
</thead>
171+
<tbody>
172+
<tr>
173+
<td>
174+
<code>start.coreui.loading-button</code>
175+
</td>
176+
<td>
177+
Fires immediately when the start method is called.
178+
</td>
179+
</tr>
180+
<tr>
181+
<td>
182+
<code>stop.coreui.loading-button</code>
183+
</td>
184+
<td>
185+
Fires immediately when the stop method is called.
186+
</td>
187+
</tr>
188+
<tr>
189+
<td>
190+
<code>complete.coreui.loading-button</code>
191+
</td>
192+
<td>
193+
Fires immediately when the loading process is completed.
194+
</td>
195+
</tr>
196+
</tbody>
197+
</table>
198+
199+
```js
200+
var myBtnLoading = document.getElementById('myBtnLoading')
201+
myBtnLoading.addEventListener('complete.coreui.loading-button', function () {
202+
// do something...
203+
})
204+
```

‎docs/data/sidebar.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@
7777
- title: Footer
7878
- title: Header
7979
- title: List group
80+
- title: Loading buttons
8081
- title: Modal
8182
- title: Navs & tabs
8283
- title: Navbar

0 commit comments

Comments
 (0)