Skip to content

Commit 0bd1aef

Browse files
rstoenescurstoenescu
committed
feat(docs): QCircularProgress page update
1 parent cafc705 commit 0bd1aef

File tree

22 files changed

+372
-965
lines changed

22 files changed

+372
-965
lines changed

‎docs/src/examples/QBadge/Basic.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<q-item clickable v-ripple class="bg-grey-2">
2626
<q-item-section avatar>
2727
<q-avatar rounded>
28-
<img src="https://cdn.quasar-framework.org/img/chaosmonkey.png" />
28+
<img src="https://cdn.quasar-framework.org/img/chaosmonkey.png">
2929
</q-avatar>
3030
</q-item-section>
3131

‎docs/src/examples/QCircularProgress/Angle.vue‎

Lines changed: 48 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,62 @@
11
<template>
2-
<div class="q-pa-md">
3-
<div class="q-gutter-sm">
4-
<q-circular-progress
5-
class="q-ma-sm text-white"
6-
:value="count"
7-
size="25px"
8-
:show-value="true"
9-
:thickness="1"
10-
color="grey-8"
11-
center-color="white"
12-
track-color="orange"
13-
:angle="45"
14-
/>
2+
<div class="q-pa-md flex flex-center">
3+
<q-circular-progress
4+
:value="value"
5+
size="50px"
6+
:thickness="0.22"
7+
color="purple"
8+
track-color="grey-3"
9+
class="q-ma-md"
10+
/>
1511

16-
<q-circular-progress
17-
class="q-ma-sm text-white"
18-
:value="count"
19-
size="50px"
20-
:show-value="true"
21-
:thickness="1"
22-
color="grey-8"
23-
center-color="blue"
24-
track-color="orange"
25-
:angle="90"
26-
/>
12+
<q-circular-progress
13+
:angle="90"
14+
:value="value"
15+
size="50px"
16+
:thickness="0.22"
17+
color="purple"
18+
track-color="grey-3"
19+
class="q-ma-md"
20+
/>
2721

28-
<q-circular-progress
29-
class="q-ma-sm text-white"
30-
:value="count"
31-
size="100px"
32-
:show-value="true"
33-
:thickness="1"
34-
color="grey-8"
35-
center-color="red"
36-
track-color="orange"
37-
:angle="270"
38-
/>
39-
</div>
22+
<q-circular-progress
23+
:angle="180"
24+
:value="value"
25+
size="50px"
26+
:thickness="0.22"
27+
color="purple"
28+
track-color="grey-3"
29+
class="q-ma-md"
30+
/>
31+
32+
<q-circular-progress
33+
:angle="270"
34+
:value="value"
35+
size="50px"
36+
:thickness="0.22"
37+
color="purple"
38+
track-color="grey-3"
39+
class="q-ma-md"
40+
/>
41+
42+
<q-circular-progress
43+
:angle="52"
44+
:value="value"
45+
size="50px"
46+
:thickness="0.22"
47+
color="purple"
48+
track-color="grey-3"
49+
class="q-ma-md"
50+
/>
4051
</div>
4152
</template>
4253

4354
<script>
4455
export default {
4556
data () {
4657
return {
47-
count: 0,
48-
interval: null
58+
value: 61
4959
}
50-
},
51-
52-
mounted () {
53-
this.interval = setInterval(() => {
54-
this.count += 1
55-
if (this.count > 100) {
56-
this.count = 0
57-
}
58-
}, 100)
59-
},
60-
61-
beforeDestroy () {
62-
clearInterval(this.interval)
6360
}
6461
}
6562
</script>

‎docs/src/examples/QCircularProgress/CenterColor.vue‎

Lines changed: 0 additions & 56 deletions
This file was deleted.

‎docs/src/examples/QCircularProgress/Color.vue‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎docs/src/examples/QCircularProgress/CustomMinMax.vue‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<template>
2+
<div class="q-pa-md flex flex-center">
3+
<q-circular-progress
4+
:min="40"
5+
:max="70"
6+
:value="value"
7+
size="50px"
8+
:thickness="0.22"
9+
color="teal"
10+
track-color="grey-3"
11+
class="q-ma-md"
12+
/>
13+
14+
<q-circular-progress
15+
:min="55"
16+
:max="90"
17+
:value="value"
18+
size="50px"
19+
:thickness="0.22"
20+
color="teal"
21+
track-color="grey-3"
22+
class="q-ma-md"
23+
/>
24+
25+
<q-circular-progress
26+
:min="40"
27+
:max="110"
28+
:value="value"
29+
size="50px"
30+
:thickness="0.22"
31+
color="teal"
32+
track-color="grey-3"
33+
class="q-ma-md"
34+
/>
35+
36+
<q-circular-progress
37+
:min="20"
38+
:max="70"
39+
:value="value"
40+
size="50px"
41+
:thickness="0.22"
42+
color="teal"
43+
track-color="grey-3"
44+
class="q-ma-md"
45+
/>
46+
47+
<q-circular-progress
48+
:value="value"
49+
size="50px"
50+
:thickness="0.22"
51+
color="teal"
52+
track-color="grey-3"
53+
class="q-ma-md"
54+
/>
55+
</div>
56+
</template>
57+
58+
<script>
59+
export default {
60+
data () {
61+
return {
62+
value: 61
63+
}
64+
}
65+
}
66+
</script>

‎docs/src/examples/QCircularProgress/Determined.vue‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div class="q-pa-md flex flex-center">
3+
<q-circular-progress
4+
:value="value"
5+
size="50px"
6+
color="orange"
7+
class="q-ma-md"
8+
/>
9+
10+
<q-circular-progress
11+
:value="value"
12+
size="90px"
13+
:thickness="0.2"
14+
color="orange"
15+
center-color="grey-8"
16+
track-color="transparent"
17+
class="q-ma-md"
18+
/>
19+
20+
<q-circular-progress
21+
:value="value"
22+
size="45px"
23+
:thickness="1"
24+
color="grey-8"
25+
track-color="orange"
26+
class="q-ma-md"
27+
/>
28+
29+
<q-circular-progress
30+
:value="value"
31+
size="50px"
32+
:thickness="0.22"
33+
color="orange"
34+
track-color="grey-3"
35+
class="q-ma-md"
36+
/>
37+
38+
<q-circular-progress
39+
:value="value"
40+
size="75px"
41+
:thickness="0.6"
42+
color="orange"
43+
center-color="grey-8"
44+
class="q-ma-md"
45+
/>
46+
47+
<q-circular-progress
48+
:value="value"
49+
size="40px"
50+
:thickness="0.4"
51+
color="orange"
52+
track-color="grey-3"
53+
center-color="grey-8"
54+
class="q-ma-md"
55+
/>
56+
</div>
57+
</template>
58+
59+
<script>
60+
export default {
61+
data () {
62+
return {
63+
value: 71
64+
}
65+
}
66+
}
67+
</script>

0 commit comments

Comments
 (0)