Skip to content

Commit b7bf919

Browse files
TechQueryTechQuery
committed
[add] Jumbotron & Progress components
1 parent 6199d0e commit b7bf919

3 files changed

Lines changed: 252 additions & 2 deletions

File tree

‎document/source/components/Jumbotron.mdx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
layout: docs
3+
title: Jumbotron
4+
description: Lightweight, flexible component for showcasing hero unit style content.
5+
group: Components
6+
---
7+
8+
import { Jumbotron } from 'boot-cell/source/Content/Jumbotron';
9+
import { Button } from 'boot-cell/source/Form/Button';
10+
11+
import { Example } from '../../../source/component/Example';
12+
13+
A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
14+
15+
<Example>
16+
<Jumbotron
17+
title="Hello, world!"
18+
description="This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information."
19+
>
20+
<p>
21+
It uses utility classes for typography and spacing to space content
22+
out within the larger container.
23+
</p>
24+
<Button size="lg" href=".">
25+
Learn more
26+
</Button>
27+
</Jumbotron>
28+
</Example>
29+
30+
```TSX
31+
import { render, createCell } from 'web-cell';
32+
import { Jumbotron } from 'boot-cell/source/Content/Jumbotron';
33+
import { Button } from 'boot-cell/source/Form/Button';
34+
35+
render(
36+
<Jumbotron
37+
title="Hello, world!"
38+
description="This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information."
39+
>
40+
<p>
41+
It uses utility classes for typography and spacing to space content
42+
out within the larger container.
43+
</p>
44+
<Button size="lg" href=".">
45+
Learn more
46+
</Button>
47+
</Jumbotron>
48+
);
49+
```
50+
51+
To make the jumbotron full width, and without rounded corners, just add the `fluid` property.
52+
53+
<Example>
54+
<Jumbotron
55+
fluid
56+
title="Fluid jumbotron"
57+
description="This is a modified jumbotron that occupies the entire horizontal space of its parent."
58+
/>
59+
</Example>
60+
61+
```TSX
62+
import { render, createCell } from 'web-cell';
63+
import { Jumbotron } from 'boot-cell/source/Content/Jumbotron';
64+
65+
render(
66+
<Jumbotron
67+
fluid
68+
title="Fluid jumbotron"
69+
description="This is a modified jumbotron that occupies the entire horizontal space of its parent."
70+
/>
71+
);
72+
```

‎document/source/components/Progress.mdx‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
---
2+
layout: docs
3+
title: Progress
4+
description: Documentation and examples for using BootCell custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
5+
group: Components
6+
---
7+
8+
import { Progress } from 'boot-cell/source/Reminder/Progress';
9+
10+
import { Example } from '../../../source/component/Example';
11+
12+
## How it works
13+
14+
Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.
15+
We don’t use the HTML5 `<progress>` element, ensuring you can stack progress bars, animate them, and place text labels over them.
16+
17+
<Example>
18+
<Progress />
19+
<Progress percent={25} />
20+
<Progress percent={50} />
21+
<Progress percent={75} />
22+
<Progress percent={100} />
23+
</Example>
24+
25+
```TSX
26+
import { render, createCell, Fragment } from 'web-cell';
27+
import { Progress } from 'boot-cell/source/Reminder/Progress';
28+
29+
render(
30+
<Fragment>
31+
<Progress />
32+
<Progress percent={25} />
33+
<Progress percent={50} />
34+
<Progress percent={75} />
35+
<Progress percent={100} />
36+
</Fragment>
37+
);
38+
```
39+
40+
## Labels
41+
42+
Add labels to your progress bars by setting `label` property.
43+
44+
<Example>
45+
<Progress label percent={25} />
46+
<Progress label={percent => percent + ' percent'} percent={25} />
47+
</Example>
48+
49+
```TSX
50+
import { render, createCell, Fragment } from 'web-cell';
51+
import { Progress } from 'boot-cell/source/Reminder/Progress';
52+
53+
render(
54+
<Fragment>
55+
<Progress label percent={25} />
56+
<Progress label={percent => percent + ' percent'} percent={25} />
57+
</Fragment>
58+
);
59+
```
60+
61+
## Height
62+
63+
We only set a `height` style value on the `<Progress />`,
64+
so if you change that value the inner `.progress-bar` will automatically resize accordingly.
65+
66+
<Example>
67+
<Progress style={{ height: '1px' }} percent={25} />
68+
<Progress style={{ height: '20px' }} percent={25} />
69+
</Example>
70+
71+
```TSX
72+
import { render, createCell, Fragment } from 'web-cell';
73+
import { Progress } from 'boot-cell/source/Reminder/Progress';
74+
75+
render(
76+
<Fragment>
77+
<Progress style={{ height: '1px' }} percent={25} />
78+
<Progress style={{ height: '20px' }} percent={25} />
79+
</Fragment>
80+
);
81+
```
82+
83+
## Backgrounds
84+
85+
Use `status` property values to change the appearance of individual progress bars.
86+
87+
<Example>
88+
<Progress status="success" percent={25} />
89+
<Progress status="info" percent={50} />
90+
<Progress status="warning" percent={75} />
91+
<Progress status="danger" percent={100} />
92+
</Example>
93+
94+
```TSX
95+
import { render, createCell, Fragment } from 'web-cell';
96+
import { Progress } from 'boot-cell/source/Reminder/Progress';
97+
98+
render(
99+
<Fragment>
100+
<Progress status="success" percent={25} />
101+
<Progress status="info" percent={50} />
102+
<Progress status="warning" percent={75} />
103+
<Progress status="danger" percent={100} />
104+
</Fragment>
105+
);
106+
```
107+
108+
## Multiple bars
109+
110+
Include multiple progress bars in a progress component if you need.
111+
112+
<Example>
113+
<Progress
114+
bars={[
115+
{ percent: 15 },
116+
{ status: 'success', percent: 30 },
117+
{ status: 'info', percent: 20 }
118+
]}
119+
/>
120+
</Example>
121+
122+
```TSX
123+
import { render, createCell } from 'web-cell';
124+
import { Progress } from 'boot-cell/source/Reminder/Progress';
125+
126+
render(
127+
<Progress
128+
bars={[
129+
{ percent: 15 },
130+
{ status: 'success', percent: 30 },
131+
{ status: 'info', percent: 20 }
132+
]}
133+
/>
134+
);
135+
```
136+
137+
## Striped
138+
139+
Add `striped` property to any `<Progress />` to apply a stripe via CSS gradient over the progress bar’s background color.
140+
141+
<Example>
142+
<Progress striped percent={10} />
143+
<Progress striped status="success" percent={25} />
144+
<Progress striped status="info" percent={50} />
145+
<Progress striped status="warning" percent={75} />
146+
<Progress striped status="danger" percent={100} />
147+
</Example>
148+
149+
```TSX
150+
import { render, createCell, Fragment } from 'web-cell';
151+
import { Progress } from 'boot-cell/source/Reminder/Progress';
152+
153+
render(
154+
<Fragment>
155+
<Progress striped percent={10} />
156+
<Progress striped status="success" percent={25} />
157+
<Progress striped status="info" percent={50} />
158+
<Progress striped status="warning" percent={75} />
159+
<Progress striped status="danger" percent={100} />
160+
</Fragment>
161+
);
162+
```
163+
164+
## Animated stripes
165+
166+
The striped gradient can also be animated.
167+
Add `animated` property to `<Progress striped />` to animate the stripes right to left via CSS3 animations.
168+
169+
<Example>
170+
<Progress striped animated percent={75} />
171+
</Example>
172+
173+
```TSX
174+
import { render, createCell } from 'web-cell';
175+
import { Progress } from 'boot-cell/source/Reminder/Progress';
176+
177+
render(<Progress striped animated percent={75} />);
178+
```

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"name": "bootcell-document",
3-
"version": "0.24.0",
3+
"version": "0.26.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.23",
6+
"boot-cell": "^1.0.0-rc.24",
77
"cell-router": "^2.0.0-rc.8",
88
"classnames": "^2.2.6",
99
"github-web-widget": "^3.0.0-beta.5",

0 commit comments

Comments
 (0)