Skip to content

Commit 055382e

Browse files
TechQueryTechQuery
committed
[add] Spinner component
1 parent 29e0cac commit 055382e

4 files changed

Lines changed: 442 additions & 111 deletions

File tree

‎document/source/components/MediaObject.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ and then add `listItem` property to your `<MediaObject />`.
206206
As always, use spacing utilities wherever needed to fine tune.
207207

208208
<Example>
209-
<ul class="list-unstyled">
209+
<ul className="list-unstyled">
210210
<MediaObject
211211
listItem
212212
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
@@ -235,7 +235,7 @@ import { render, createCell } from 'web-cell';
235235
import { MediaObject } from 'boot-cell/source/Content/MediaObject';
236236

237237
render(
238-
<ul class="list-unstyled">
238+
<ul className="list-unstyled">
239239
<MediaObject
240240
listItem
241241
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"

‎document/source/components/Spinner.mdx‎

Lines changed: 331 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,331 @@
1+
---
2+
layout: docs
3+
title: Spinner
4+
description: Indicate the loading state of a component or page with BootCell spinners, built entirely with HTML, CSS, and no JavaScript.
5+
group: Components
6+
---
7+
8+
import { Spinner } from 'boot-cell/source/Prompt/Spinner';
9+
import { Button } from 'boot-cell/source/Form/Button';
10+
11+
import { Example } from '../../../source/component/Example';
12+
13+
## About
14+
15+
BootCell “spinners” can be used to show the loading state in your projects.
16+
They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them.
17+
You will, however, need some custom JavaScript to toggle their visibility.
18+
Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.
19+
20+
## Border spinner
21+
22+
Use the border spinners for a lightweight loading indicator.
23+
24+
<Example>
25+
<Spinner />
26+
</Example>
27+
28+
```TSX
29+
import { render, createCell } from 'web-cell';
30+
import { Spinner } from 'boot-cell/source/Prompt/Spinner';
31+
32+
render(<Spinner />);
33+
```
34+
35+
### Colors
36+
37+
The border spinner uses `currentColor` for its `border-color`,
38+
meaning you can customize the color with [text color utilities][1].
39+
You can use any of our text color utilities on the standard spinner.
40+
41+
<Example>
42+
<Spinner color="primary" />
43+
<Spinner color="secondary" />
44+
<Spinner color="success" />
45+
<Spinner color="danger" />
46+
<Spinner color="warning" />
47+
<Spinner color="info" />
48+
<Spinner color="light" />
49+
<Spinner color="dark" />
50+
</Example>
51+
52+
```TSX
53+
import { render, createCell, Fragment } from 'web-cell';
54+
import { Spinner } from 'boot-cell/source/Prompt/Spinner';
55+
56+
render(
57+
<Fragment>
58+
<Spinner color="primary" />
59+
<Spinner color="secondary" />
60+
<Spinner color="success" />
61+
<Spinner color="danger" />
62+
<Spinner color="warning" />
63+
<Spinner color="info" />
64+
<Spinner color="light" />
65+
<Spinner color="dark" />
66+
</Fragment>
67+
);
68+
```
69+
70+
> **Why not use `border-color` utilities?** Each border spinner specifies a `transparent` border for at least one side,
71+
> so `.border-{color}` utilities would override that.
72+
73+
## Growing spinner
74+
75+
If you don’t fancy a border spinner, switch to the grow spinner.
76+
While it doesn’t technically spin, it does repeatedly grow!
77+
78+
<Example>
79+
<Spinner type="grow" />
80+
</Example>
81+
82+
```TSX
83+
import { render, createCell } from 'web-cell';
84+
import { Spinner } from 'boot-cell/source/Prompt/Spinner';
85+
86+
render(<Spinner type="grow" />);
87+
```
88+
89+
Once again, this spinner is built with `currentColor`, so you can easily change its appearance with [text color utilities][1].
90+
Here it is in blue, along with the supported variants.
91+
92+
<Example>
93+
<Spinner type="grow" color="primary" />
94+
<Spinner type="grow" color="secondary" />
95+
<Spinner type="grow" color="success" />
96+
<Spinner type="grow" color="danger" />
97+
<Spinner type="grow" color="warning" />
98+
<Spinner type="grow" color="info" />
99+
<Spinner type="grow" color="light" />
100+
<Spinner type="grow" color="dark" />
101+
</Example>
102+
103+
```TSX
104+
import { render, createCell, Fragment } from 'web-cell';
105+
import { Spinner } from 'boot-cell/source/Prompt/Spinner';
106+
107+
render(
108+
<Fragment>
109+
<Spinner type="grow" color="primary" />
110+
<Spinner type="grow" color="secondary" />
111+
<Spinner type="grow" color="success" />
112+
<Spinner type="grow" color="danger" />
113+
<Spinner type="grow" color="warning" />
114+
<Spinner type="grow" color="info" />
115+
<Spinner type="grow" color="light" />
116+
<Spinner type="grow" color="dark" />
117+
</Fragment>
118+
);
119+
```
120+
121+
## Alignment
122+
123+
Spinners in BootCell are built with `rem`s, `currentColor`, and `display: inline-flex`.
124+
This means they can easily be resized, recolored, and quickly aligned.
125+
126+
### Margin
127+
128+
Use [margin utilities][2] like `.m-5` for easy spacing.
129+
130+
<Example>
131+
<Spinner className="m-5" />
132+
</Example>
133+
134+
```TSX
135+
import { render, createCell } from 'web-cell';
136+
import { Spinner } from 'boot-cell/source/Prompt/Spinner';
137+
138+
render(<Spinner className="m-5" />);
139+
```
140+
141+
### Placement
142+
143+
Use [flexbox utilities][3], [float utilities][4], or [text alignment][5] utilities to place spinners exactly
144+
where you need them in any situation.
145+
146+
#### Flex
147+
148+
<Example>
149+
<div className="d-flex justify-content-center">
150+
<Spinner />
151+
</div>
152+
</Example>
153+
154+
```TSX
155+
import { render, createCell } from 'web-cell';
156+
import { Spinner } from 'boot-cell/source/Prompt/Spinner';
157+
158+
render(
159+
<div className="d-flex justify-content-center">
160+
<Spinner />
161+
</div>
162+
);
163+
```
164+
165+
<Example>
166+
<div className="d-flex align-items-center">
167+
<strong>Loading...</strong>
168+
<Spinner className="ml-auto" aria-hidden="true" />
169+
</div>
170+
</Example>
171+
172+
```TSX
173+
import { render, createCell } from 'web-cell';
174+
import { Spinner } from 'boot-cell/source/Prompt/Spinner';
175+
176+
render(
177+
<div className="d-flex align-items-center">
178+
<strong>Loading...</strong>
179+
<Spinner className="ml-auto" aria-hidden="true" />
180+
</div>
181+
);
182+
```
183+
184+
#### Floats
185+
186+
<Example>
187+
<div className="clearfix">
188+
<Spinner className="float-right" />
189+
</div>
190+
</Example>
191+
192+
```TSX
193+
import { render, createCell } from 'web-cell';
194+
import { Spinner } from 'boot-cell/source/Prompt/Spinner';
195+
196+
render(
197+
<div className="clearfix">
198+
<Spinner className="float-right" />
199+
</div>
200+
);
201+
```
202+
203+
#### Text align
204+
205+
<Example>
206+
<div className="text-center">
207+
<Spinner />
208+
</div>
209+
</Example>
210+
211+
```TSX
212+
import { render, createCell } from 'web-cell';
213+
import { Spinner } from 'boot-cell/source/Prompt/Spinner';
214+
215+
render(
216+
<div className="text-center">
217+
<Spinner />
218+
</div>
219+
);
220+
```
221+
222+
## Size
223+
224+
Add `small` property to make a smaller spinner that can quickly be used within other components.
225+
226+
<Example>
227+
<Spinner small />
228+
<Spinner type="grow" small />
229+
</Example>
230+
231+
```TSX
232+
import { render, createCell, Fragment } from 'web-cell';
233+
import { Spinner } from 'boot-cell/source/Prompt/Spinner';
234+
235+
render(
236+
<Fragment>
237+
<Spinner small />
238+
<Spinner type="grow" small />
239+
</Fragment>
240+
);
241+
```
242+
243+
Or, use custom CSS or inline styles to change the dimensions as needed.
244+
245+
<Example>
246+
<Spinner style={{ width: '3rem', height: '3rem' }} />
247+
<Spinner type="grow" style={{ width: '3rem', height: '3rem' }} />
248+
</Example>
249+
250+
```TSX
251+
import { render, createCell, Fragment } from 'web-cell';
252+
import { Spinner } from 'boot-cell/source/Prompt/Spinner';
253+
254+
render(
255+
<Fragment>
256+
<Spinner style={{ width: '3rem', height: '3rem' }} />
257+
<Spinner type="grow" style={{ width: '3rem', height: '3rem' }} />
258+
</Fragment>
259+
);
260+
```
261+
262+
## Buttons
263+
264+
Use spinners within buttons to indicate an action is currently processing or taking place.
265+
You may also swap the text out of the spinner element and utilize button text as needed.
266+
267+
<Example>
268+
<Button disabled>
269+
<Spinner small aria-hidden="true" />
270+
<span className="sr-only">Loading...</span>
271+
</Button>
272+
<Button disabled>
273+
<Spinner small aria-hidden="true" />
274+
Loading...
275+
</Button>
276+
</Example>
277+
278+
```TSX
279+
import { render, createCell, Fragment } from 'web-cell';
280+
import { Spinner } from 'boot-cell/source/Prompt/Spinner';
281+
import { Button } from 'boot-cell/source/Form/Button';
282+
283+
render(
284+
<Fragment>
285+
<Button disabled>
286+
<Spinner small aria-hidden="true" />
287+
<span className="sr-only">Loading...</span>
288+
</Button>
289+
<Button disabled>
290+
<Spinner small aria-hidden="true" />
291+
Loading...
292+
</Button>
293+
</Fragment>
294+
);
295+
```
296+
297+
<Example>
298+
<Button disabled>
299+
<Spinner type="grow" small aria-hidden="true" />
300+
<span className="sr-only">Loading...</span>
301+
</Button>
302+
<Button disabled>
303+
<Spinner type="grow" small aria-hidden="true" />
304+
Loading...
305+
</Button>
306+
</Example>
307+
308+
```TSX
309+
import { render, createCell, Fragment } from 'web-cell';
310+
import { Spinner } from 'boot-cell/source/Prompt/Spinner';
311+
import { Button } from 'boot-cell/source/Form/Button';
312+
313+
render(
314+
<Fragment>
315+
<Button disabled>
316+
<Spinner type="grow" small aria-hidden="true" />
317+
<span className="sr-only">Loading...</span>
318+
</Button>
319+
<Button disabled>
320+
<Spinner type="grow" small aria-hidden="true" />
321+
Loading...
322+
</Button>
323+
</Fragment>
324+
);
325+
```
326+
327+
[1]: https://getbootstrap.com/docs/4.4/utilities/colors/
328+
[2]: https://getbootstrap.com/docs/4.4/utilities/spacing/
329+
[3]: https://getbootstrap.com/docs/4.4/utilities/flex/
330+
[4]: https://getbootstrap.com/docs/4.4/utilities/float/
331+
[5]: https://getbootstrap.com/docs/4.4/content/typography/

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,25 @@
33
"version": "0.20.0",
44
"description": "Re-implemented Official Document site of BootStrap & FontAwesome based on WebCell, BootCell & MarkCell",
55
"dependencies": {
6-
"boot-cell": "^1.0.0-rc.12",
7-
"cell-router": "^2.0.0-rc.7",
6+
"boot-cell": "^1.0.0-rc.19",
7+
"cell-router": "^2.0.0-rc.8",
88
"classnames": "^2.2.6",
99
"github-web-widget": "^3.0.0-beta.4",
1010
"lodash.groupby": "^4.6.0",
1111
"mobx": "^5.15.4",
12-
"mobx-web-cell": "^0.2.5",
12+
"mobx-web-cell": "^0.3.0",
1313
"web-cell": "^2.0.0",
14-
"web-utility": "^1.5.0"
14+
"web-utility": "^1.5.2"
1515
},
1616
"devDependencies": {
1717
"@types/classnames": "^2.2.10",
1818
"@types/lodash.groupby": "^4.6.6",
1919
"husky": "^4.2.5",
2020
"less": "^3.11.1",
21-
"lint-staged": "^10.1.6",
21+
"lint-staged": "^10.2.2",
2222
"mark-cell": "^0.4.1",
2323
"parcel": "^1.12.4",
24-
"prettier": "^2.0.4",
24+
"prettier": "^2.0.5",
2525
"typescript": "^3.8.3"
2626
},
2727
"prettier": {

0 commit comments

Comments
 (0)