Skip to content

Commit 20a7e17

Browse files
TechQueryTechQuery
committed
[add] Step Tab component
1 parent ca6fad3 commit 20a7e17

File tree

4 files changed

+337
-6
lines changed

4 files changed

+337
-6
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
package-lock.json
22
node_modules/
33
dist/
4-
.cache/
4+
.cache/
5+
.vscode/

‎document/source/components/StepTab.mdx‎

Lines changed: 326 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,326 @@
1+
---
2+
layout: docs
3+
title: Step tab
4+
description: A tab-like component for Step Wizard
5+
group: Components
6+
---
7+
8+
import { StepTab } from 'boot-cell/source/Content/StepTab';
9+
import { FormField } from 'boot-cell/source/Form/FormField';
10+
import { Button } from 'boot-cell/source/Form/Button';
11+
import { Icon } from 'boot-cell/source/Reminder/Icon';
12+
13+
import { Example } from '../../../source/component/Example';
14+
15+
## Linear stepper
16+
17+
<Example>
18+
<StepTab
19+
linear
20+
path={[
21+
{
22+
title: 'Email',
23+
content: (
24+
<form onSubmit={event => event.preventDefault()}>
25+
<FormField
26+
label="Email address"
27+
placeholder="Enter email"
28+
/>
29+
<Button type="submit">Next</Button>
30+
</form>
31+
)
32+
},
33+
{
34+
title: 'Password',
35+
content: (
36+
<form onSubmit={event => event.preventDefault()}>
37+
<FormField
38+
type="password"
39+
label="Password"
40+
placeholder="Password"
41+
/>
42+
<Button type="reset" kind="danger" className="mr-3">
43+
Previous
44+
</Button>
45+
<Button type="submit">Next</Button>
46+
</form>
47+
)
48+
},
49+
{
50+
title: 'Validate',
51+
content: (
52+
<form
53+
className="text-center"
54+
onSubmit={event => event.preventDefault()}
55+
>
56+
<Button type="reset" kind="danger" className="mr-3">
57+
Previous
58+
</Button>
59+
<Button type="submit">Submit</Button>
60+
</form>
61+
)
62+
}
63+
]}
64+
/>
65+
</Example>
66+
67+
```TSX
68+
import { render, createCell } from 'web-cell';
69+
import { StepTab } from 'boot-cell/source/Content/StepTab';
70+
import { FormField } from 'boot-cell/source/Form/FormField';
71+
import { Button } from 'boot-cell/source/Form/Button';
72+
73+
render(
74+
<StepTab
75+
linear
76+
path={[
77+
{
78+
title: 'Email',
79+
content: (
80+
<form onSubmit={event => event.preventDefault()}>
81+
<FormField
82+
label="Email address"
83+
placeholder="Enter email"
84+
/>
85+
<Button type="submit">Next</Button>
86+
</form>
87+
)
88+
},
89+
{
90+
title: 'Password',
91+
content: (
92+
<form onSubmit={event => event.preventDefault()}>
93+
<FormField
94+
type="password"
95+
label="Password"
96+
placeholder="Password"
97+
/>
98+
<Button type="reset" kind="danger" className="mr-3">
99+
Previous
100+
</Button>
101+
<Button type="submit">Next</Button>
102+
</form>
103+
)
104+
},
105+
{
106+
title: 'Validate',
107+
content: (
108+
<form
109+
className="text-center"
110+
onSubmit={event => event.preventDefault()}
111+
>
112+
<Button type="reset" kind="danger" className="mr-3">
113+
Previous
114+
</Button>
115+
<Button type="submit">Submit</Button>
116+
</form>
117+
)
118+
}
119+
]}
120+
/>
121+
);
122+
```
123+
124+
## Non linear stepper
125+
126+
<Example>
127+
<StepTab
128+
path={[
129+
{
130+
title: 'Name',
131+
icon: <Icon name="user" />,
132+
content: (
133+
<form onSubmit={event => event.preventDefault()}>
134+
<FormField label="Name" placeholder="Enter your name" />
135+
<Button type="submit">Next</Button>
136+
</form>
137+
)
138+
},
139+
{
140+
title: 'Address',
141+
icon: <Icon name="map-marked-alt" />,
142+
content: (
143+
<form onSubmit={event => event.preventDefault()}>
144+
<FormField
145+
label="Address"
146+
placeholder="Enter your address"
147+
/>
148+
<Button type="submit">Next</Button>
149+
</form>
150+
)
151+
},
152+
{
153+
title: 'Submit',
154+
icon: <Icon name="save" />,
155+
content: (
156+
<form
157+
className="text-center"
158+
onSubmit={event => event.preventDefault()}
159+
>
160+
<Button type="submit">Submit</Button>
161+
</form>
162+
)
163+
}
164+
]}
165+
/>
166+
</Example>
167+
168+
```TSX
169+
import { render, createCell } from 'web-cell';
170+
import { StepTab } from 'boot-cell/source/Content/StepTab';
171+
import { FormField } from 'boot-cell/source/Form/FormField';
172+
import { Button } from 'boot-cell/source/Form/Button';
173+
174+
render(
175+
<StepTab
176+
path={[
177+
{
178+
title: 'Name',
179+
icon: <Icon name="user" />,
180+
content: (
181+
<form onSubmit={event => event.preventDefault()}>
182+
<FormField label="Name" placeholder="Enter your name" />
183+
<Button type="submit">Next</Button>
184+
</form>
185+
)
186+
},
187+
{
188+
title: 'Address',
189+
icon: <Icon name="map-marked-alt" />,
190+
content: (
191+
<form onSubmit={event => event.preventDefault()}>
192+
<FormField
193+
label="Address"
194+
placeholder="Enter your address"
195+
/>
196+
<Button type="submit">Next</Button>
197+
</form>
198+
)
199+
},
200+
{
201+
title: 'Submit',
202+
icon: <Icon name="save" />,
203+
content: (
204+
<form
205+
className="text-center"
206+
onSubmit={event => event.preventDefault()}
207+
>
208+
<Button type="submit">Submit</Button>
209+
</form>
210+
)
211+
}
212+
]}
213+
/>
214+
);
215+
```
216+
217+
## Vertical linear stepper
218+
219+
<Example>
220+
<StepTab
221+
direction="vertical"
222+
linear
223+
path={[
224+
{
225+
title: 'Email',
226+
content: (
227+
<form onSubmit={event => event.preventDefault()}>
228+
<FormField
229+
label="Email address"
230+
placeholder="Enter email"
231+
/>
232+
<Button type="submit">Next</Button>
233+
</form>
234+
)
235+
},
236+
{
237+
title: 'Password',
238+
content: (
239+
<form onSubmit={event => event.preventDefault()}>
240+
<FormField
241+
type="password"
242+
label="Password"
243+
placeholder="Password"
244+
/>
245+
<Button type="reset" kind="danger" className="mr-3">
246+
Previous
247+
</Button>
248+
<Button type="submit">Next</Button>
249+
</form>
250+
)
251+
},
252+
{
253+
title: 'Validate',
254+
content: (
255+
<form
256+
className="text-center"
257+
onSubmit={event => event.preventDefault()}
258+
>
259+
<Button type="reset" kind="danger" className="mr-3">
260+
Previous
261+
</Button>
262+
<Button type="submit">Submit</Button>
263+
</form>
264+
)
265+
}
266+
]}
267+
/>
268+
</Example>
269+
270+
```TSX
271+
import { render, createCell } from 'web-cell';
272+
import { StepTab } from 'boot-cell/source/Content/StepTab';
273+
import { FormField } from 'boot-cell/source/Form/FormField';
274+
import { Button } from 'boot-cell/source/Form/Button';
275+
276+
render(
277+
<StepTab
278+
direction="vertical"
279+
linear
280+
path={[
281+
{
282+
title: 'Email',
283+
content: (
284+
<form onSubmit={event => event.preventDefault()}>
285+
<FormField
286+
label="Email address"
287+
placeholder="Enter email"
288+
/>
289+
<Button type="submit">Next</Button>
290+
</form>
291+
)
292+
},
293+
{
294+
title: 'Password',
295+
content: (
296+
<form onSubmit={event => event.preventDefault()}>
297+
<FormField
298+
type="password"
299+
label="Password"
300+
placeholder="Password"
301+
/>
302+
<Button type="reset" kind="danger" className="mr-3">
303+
Previous
304+
</Button>
305+
<Button type="submit">Next</Button>
306+
</form>
307+
)
308+
},
309+
{
310+
title: 'Validate',
311+
content: (
312+
<form
313+
className="text-center"
314+
onSubmit={event => event.preventDefault()}
315+
>
316+
<Button type="reset" kind="danger" className="mr-3">
317+
Previous
318+
</Button>
319+
<Button type="submit">Submit</Button>
320+
</form>
321+
)
322+
}
323+
]}
324+
/>
325+
);
326+
```

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "Re-implemented Official Document site of BootStrap & FontAwesome based on WebCell, BootCell & MarkCell",
55
"dependencies": {
66
"@nuintun/qrcode": "^2.1.1",
7-
"boot-cell": "^1.0.0-rc.34",
7+
"boot-cell": "^1.0.0-rc.35",
88
"cell-router": "^2.0.0-rc.8",
99
"classnames": "^2.2.6",
1010
"github-web-widget": "^3.0.0-beta.5",
@@ -14,12 +14,12 @@
1414
"markdown-ime": "^1.0.3",
1515
"marked": "^1.1.0",
1616
"mobx": "^5.15.4",
17-
"mobx-web-cell": "^0.3.0",
17+
"mobx-web-cell": "^0.3.1",
1818
"snabbdom-looks-like": "^1.0.5",
1919
"turndown": "^6.0.0",
2020
"turndown-plugin-gfm": "^1.0.2",
21-
"web-cell": "^2.0.1",
22-
"web-utility": "^1.5.2"
21+
"web-cell": "^2.1.1",
22+
"web-utility": "^1.6.1"
2323
},
2424
"devDependencies": {
2525
"@octokit/types": "^5.0.1",
@@ -32,7 +32,7 @@
3232
"parcel": "^1.12.4",
3333
"postcss-modules": "^2.0.0",
3434
"prettier": "^2.0.5",
35-
"typescript": "^3.9.5"
35+
"typescript": "^3.9.6"
3636
},
3737
"prettier": {
3838
"singleQuote": true,

‎source/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@
1717
rel="stylesheet"
1818
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
1919
/>
20+
<link
21+
rel="stylesheet"
22+
href="https://cdn.jsdelivr.net/npm/bs-stepper@1.7.0/dist/css/bs-stepper.min.css"
23+
/>
2024
<link
2125
rel="stylesheet"
2226
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"

0 commit comments

Comments
 (0)