-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
132 lines (97 loc) · 6.45 KB
/
index.html
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>Brick-Progressbar Demo</title>
<!-- Importing Polyfill -->
<script src="bower_components/platform/platform.js"></script>
<!-- Importing Custom Elemenent -->
<link rel="import" href="dist/brick-progressbar.html">
</head>
<body>
<!-- Using Custom Element -->
<h2>Simple Progressbar with Value</h2>
<pre lang="js">
<brick-progressbar value="60"></brick-progressbar>
</pre>
<brick-progressbar value="60"></brick-progressbar>
<h2>Simple Progressbar without Value - Intermediate</h2>
<pre lang="js">
<brick-progressbar <b>intermediate</b>></brick-progressbar>
</pre>
<brick-progressbar intermediate></brick-progressbar>
<h2>Progressbar with Status</h2>
<pre lang="js">
<brick-progressbar class="inter" <b>showStatus</b> value="20"></brick-progressbar>
</pre>
<brick-progressbar showStatus value="20"></brick-progressbar>
<h2>Striped</h2>
<pre lang="js">
<brick-progressbar showStatus value="15" <b>striped</b>></brick-progressbar>
</pre>
<brick-progressbar showStatus value="15" striped></brick-progressbar>
<h2>Striped and Active</h2>
<pre lang="js">
<brick-progressbar showStatus value="20" <b>striped active</b>></brick-progressbar>
</pre>
<brick-progressbar showStatus value="20" striped active></brick-progressbar>
<h2>Types of Progressbar</h2>
<pre lang="js">
<brick-progressbar showStatus value="20" striped active <b>type="success"</b>></brick-progressbar>
<brick-progressbar showStatus value="20" striped active <b>type="info"</b>></brick-progressbar>
<brick-progressbar showStatus value="20" striped active <b>type="danger"</b>></brick-progressbar>
<brick-progressbar showStatus value="20" striped active <b>type="warning"</b>></brick-progressbar>
</pre>
<brick-progressbar showStatus value="20" striped active type="success"></brick-progressbar>
<brick-progressbar showStatus value="20" striped active type="info"></brick-progressbar>
<brick-progressbar showStatus value="20" striped active type="danger"></brick-progressbar>
<brick-progressbar showStatus value="20" striped active type="warning"></brick-progressbar>
<h2>Set Progress from JavaScript</h2>
<pre lang="js">
<brick-progressbar showStatus <b>id="p1"</b> value="20" striped active></brick-progressbar>
<button <b>onclick="document.getElementById('p1').value=40;"</b>>Click to Set 40%</button>
</pre>
<brick-progressbar showStatus id="p1" value="20" striped active></brick-progressbar>
<button onclick="document.getElementById('p1').value=40;"><b>Click to Set 40%</b></button>
<h2>Min/Max</h2>
<pre lang="js">
<brick-progressbar showStatus <b>min="100" max="900" id="p2"</b> value="300" striped active></brick-progressbar>
<button <b>onclick="document.getElementById('p2').value=800;"</b>>Click to Set 800</button>
</pre>
<brick-progressbar showStatus min="100" max="900" id="p2" value="300" striped active></brick-progressbar>
<button onclick="document.getElementById('p2').value=800;"><b>Click to Set 800</b></button>
<h2>Min/Max with Showing Actual Values</h2>
<pre lang="js">
<brick-progressbar showStatus <b>min="100" max="900" showActualValue</b> id="p3" value="300" striped active></brick-progressbar>
<button <b>onclick="document.getElementById('p3').value=800;"</b>>Click to Set 800</button>
</pre>
<brick-progressbar showStatus min="100" max="900" showActualValue id="p3" value="300" striped active></brick-progressbar>
<button onclick="document.getElementById('p3').value=800;"><b>Click to Set 800</b></button>
<h2>Play with various boolean options</h2>
<pre lang="js">
<brick-progressbar showStatus <b>min="100" max="900" </b> id="p4" value="300" striped active></brick-progressbar>
<button onclick="document.getElementById('p4').showStatus=!document.getElementById('p4').showStatus;"><b>Toggle - showStatus</b></button>
<button onclick="document.getElementById('p4').striped=!document.getElementById('p4').striped;"><b>Toggle - striped</b></button>
<button onclick="document.getElementById('p4').active=!document.getElementById('p4').active;"><b>Toggle - active</b></button>
<button onclick="document.getElementById('p4').showActualValue=!document.getElementById('p4').showActualValue;"><b>Toggle - showActualValue</b></button>
<button onclick="document.getElementById('p4').intermediate=!document.getElementById('p4').intermediate;"><b>Toggle - intermediate</b></button>
<button <b>onclick="document.getElementById('p4').type='default';"</b>>Default</button>
<button <b>onclick="document.getElementById('p4').type='success';"</b>>Success</button>
<button <b>onclick="document.getElementById('p4').type='warning';"</b>>Warning</button>
<button <b>onclick="document.getElementById('p4').type='info';"</b>>Info</button>
<button <b>onclick="document.getElementById('p4').type='danger';"</b>>Danger</button>
</pre>
<brick-progressbar showStatus min="100" max="900" id="p4" value="300" striped active></brick-progressbar>
<button onclick="document.getElementById('p4').showStatus=!document.getElementById('p4').showStatus;">Toggle - showStatus</button>
<button onclick="document.getElementById('p4').striped=!document.getElementById('p4').striped;">Toggle - striped</button>
<button onclick="document.getElementById('p4').active=!document.getElementById('p4').active;">Toggle - active</button>
<button onclick="document.getElementById('p4').showActualValue=!document.getElementById('p4').showActualValue;">Toggle - showActualValue</button>
<button onclick="document.getElementById('p4').intermediate=!document.getElementById('p4').intermediate;">Toggle - intermediate</button>
<button onclick="document.getElementById('p4').type='default';">Default</button>
<button onclick="document.getElementById('p4').type='success';">Success</button>
<button onclick="document.getElementById('p4').type='warning';">Warning</button>
<button onclick="document.getElementById('p4').type='info';">Info</button>
<button onclick="document.getElementById('p4').type='danger';">Danger</button>
</body>
</html>