Progress.js
4.24 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import React, { Component } from 'react';
import { Row, Col, Breadcrumb, BreadcrumbItem, Progress, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
import classnames from 'classnames';
import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
class Buttons extends Component {
state = {
defaultProgressTabId: '1',
};
changeTab(field, id) {
this.setState({
[field]: id,
})
}
render() {
return (
<Row>
<Col md={10}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Documentation</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem active>Progress</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col lg={9}>
<h2>Progress</h2>
<p className="mb-lg">Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.</p>
<SyntaxHighlighter language='javascript' style={tomorrow}>
{"import { Progress } from 'reactstrap';"}
</SyntaxHighlighter>
<Nav tabs className="bg-transparent mt">
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultProgressTabId === '1' })}
onClick={() => {
this.changeTab('defaultProgressTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultProgressTabId === '2' })}
onClick={() => {
this.changeTab('defaultProgressTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.defaultProgressTabId}>
<TabPane tabId="1">
<div className="text-center">0%</div>
<Progress />
<div className="text-center">25%</div>
<Progress value="25" />
<div className="text-center">50%</div>
<Progress value={50} />
<div className="text-center">75%</div>
<Progress striped value={75} />
<div className="text-center">100%</div>
<Progress animated value="100" />
<div className="text-center">Multiple bars</div>
<Progress multi>
<Progress bar value="15" />
<Progress bar color="success" value="30" />
<Progress bar color="info" value="25" />
<Progress bar color="warning" value="20" />
<Progress bar color="danger" value="5" />
</Progress>
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<div className="text-center">0%</div>\n' +
'<Progress />\n' +
'<div className="text-center">25%</div>\n' +
'<Progress value="25" />\n' +
'<div className="text-center">50%</div>\n' +
'<Progress value={50} />\n' +
'<div className="text-center">75%</div>\n' +
'<Progress striped value={75} />\n' +
'<div className="text-center">100%</div>\n' +
'<Progress animated value="100" />\n' +
'<div className="text-center">Multiple bars</div>\n' +
'<Progress multi>\n' +
' <Progress bar value="15" />\n' +
' <Progress bar color="success" value="30" />\n' +
' <Progress bar color="info" value="25" />\n' +
' <Progress bar color="warning" value="20" />\n' +
' <Progress bar color="danger" value="5" />\n' +
'</Progress>'}</SyntaxHighlighter>
</TabPane>
</TabContent>
For more examples please refer to <a href="https://reactstrap.github.io/components/progress/" target="_blank" rel="noopener noreferrer">Reactstrap Progress</a>
</Col>
</Row>
);
}
}
export default Buttons;