Skip to content

Commit c14d1fd

Browse files
rstoenescurstoenescu
committed
feat(docs): QSeparator and QSpinner review
1 parent 8678b5d commit c14d1fd

37 files changed

+368
-963
lines changed

‎docs/src/examples/QSeparator/Colored.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<q-list class="bg-grey-10 text-white shadow-2 generic-border-radius" style="max-width: 250px; width: 100%;">
4+
<q-item>
5+
<q-item-section avatar>
6+
<q-avatar>
7+
<img src="https://cdn.quasar-framework.org/img/avatar6.jpg">
8+
</q-avatar>
9+
</q-item-section>
10+
<q-item-section>Jane</q-item-section>
11+
</q-item>
12+
13+
<q-separator color="orange" inset />
14+
15+
<q-item>
16+
<q-item-section avatar>
17+
<q-avatar>
18+
<img src="https://cdn.quasar-framework.org/img/avatar3.jpg">
19+
</q-avatar>
20+
</q-item-section>
21+
<q-item-section>Lily</q-item-section>
22+
</q-item>
23+
24+
<q-item>
25+
<q-item-section avatar>
26+
<q-avatar>
27+
<img src="https://cdn.quasar-framework.org/img/avatar5.jpg">
28+
</q-avatar>
29+
</q-item-section>
30+
<q-item-section>Mary</q-item-section>
31+
</q-item>
32+
</q-list>
33+
</div>
34+
</template>

‎docs/src/examples/QSeparator/Horizontal.vue‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-md row items-start">
4+
<q-card style="max-width: 250px">
5+
<q-card-section>
6+
<div class="text-h6">Our Changing Planet</div>
7+
<div class="text-subtitle2">by John Doe</div>
8+
</q-card-section>
9+
10+
<q-separator />
11+
12+
<q-card-actions>
13+
<q-btn label="Share" color="primary" flat />
14+
<q-btn label="Comment" color="secondary" flat />
15+
</q-card-actions>
16+
</q-card>
17+
18+
<q-list class="bg-grey-10 text-white shadow-2 generic-border-radius" style="max-width: 250px; width: 100%;">
19+
<q-item>
20+
<q-item-section avatar>
21+
<q-avatar>
22+
<img src="https://cdn.quasar-framework.org/img/avatar6.jpg">
23+
</q-avatar>
24+
</q-item-section>
25+
<q-item-section>Jane</q-item-section>
26+
</q-item>
27+
28+
<q-separator dark />
29+
30+
<q-item>
31+
<q-item-section avatar>
32+
<q-avatar>
33+
<img src="https://cdn.quasar-framework.org/img/avatar3.jpg">
34+
</q-avatar>
35+
</q-item-section>
36+
<q-item-section>Lily</q-item-section>
37+
</q-item>
38+
39+
<q-item>
40+
<q-item-section avatar>
41+
<q-avatar>
42+
<img src="https://cdn.quasar-framework.org/img/avatar5.jpg">
43+
</q-avatar>
44+
</q-item-section>
45+
<q-item-section>Mary</q-item-section>
46+
</q-item>
47+
</q-list>
48+
</div>
49+
</div>
50+
</template>

‎docs/src/examples/QSeparator/HorizontalWithInset.vue‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-md row items-start">
4+
<q-card style="max-width: 250px">
5+
<q-card-section>
6+
<div class="text-h6">Our Changing Planet</div>
7+
<div class="text-subtitle2">by John Doe</div>
8+
</q-card-section>
9+
10+
<q-separator inset />
11+
12+
<q-card-section>
13+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
14+
</q-card-section>
15+
</q-card>
16+
17+
<q-list class="shadow-2 generic-border-radius" style="max-width: 250px; width: 100%;">
18+
<q-item>
19+
<q-item-section avatar>
20+
<q-avatar>
21+
<img src="https://cdn.quasar-framework.org/img/avatar6.jpg">
22+
</q-avatar>
23+
</q-item-section>
24+
<q-item-section>Jane</q-item-section>
25+
</q-item>
26+
27+
<q-separator inset="item" />
28+
29+
<q-item>
30+
<q-item-section avatar>
31+
<q-avatar>
32+
<img src="https://cdn.quasar-framework.org/img/avatar3.jpg">
33+
</q-avatar>
34+
</q-item-section>
35+
<q-item-section>Lily</q-item-section>
36+
</q-item>
37+
38+
<q-item>
39+
<q-item-section avatar>
40+
<q-avatar>
41+
<img src="https://cdn.quasar-framework.org/img/avatar5.jpg">
42+
</q-avatar>
43+
</q-item-section>
44+
<q-item-section>Mary</q-item-section>
45+
</q-item>
46+
</q-list>
47+
48+
<q-list class="shadow-2 generic-border-radius" style="max-width: 250px; width: 100%;">
49+
<q-item>
50+
<q-item-section thumbnail>
51+
<img src="https://cdn.quasar-framework.org/img/mountains.jpg">
52+
</q-item-section>
53+
<q-item-section>Mountains</q-item-section>
54+
</q-item>
55+
56+
<q-separator inset="item-thumbnail" />
57+
58+
<q-item>
59+
<q-item-section thumbnail>
60+
<img src="https://cdn.quasar-framework.org/img/parallax1.jpg">
61+
</q-item-section>
62+
<q-item-section>Venice</q-item-section>
63+
</q-item>
64+
65+
<q-item>
66+
<q-item-section thumbnail>
67+
<img src="https://cdn.quasar-framework.org/img/parallax2.jpg">
68+
</q-item-section>
69+
<q-item-section>The Bridge</q-item-section>
70+
</q-item>
71+
</q-list>
72+
73+
<q-list class="bg-grey-10 text-white shadow-2 generic-border-radius" style="max-width: 250px; width: 100%;">
74+
<q-item>
75+
<q-item-section avatar>
76+
<q-avatar>
77+
<img src="https://cdn.quasar-framework.org/img/avatar6.jpg">
78+
</q-avatar>
79+
</q-item-section>
80+
<q-item-section>Jane</q-item-section>
81+
</q-item>
82+
83+
<q-separator inset dark />
84+
85+
<q-item>
86+
<q-item-section avatar>
87+
<q-avatar>
88+
<img src="https://cdn.quasar-framework.org/img/avatar3.jpg">
89+
</q-avatar>
90+
</q-item-section>
91+
<q-item-section>Lily</q-item-section>
92+
</q-item>
93+
94+
<q-item>
95+
<q-item-section avatar>
96+
<q-avatar>
97+
<img src="https://cdn.quasar-framework.org/img/avatar5.jpg">
98+
</q-avatar>
99+
</q-item-section>
100+
<q-item-section>Mary</q-item-section>
101+
</q-item>
102+
</q-list>
103+
</div>
104+
</div>
105+
</template>

‎docs/src/examples/QSeparator/Inset.vue‎

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

‎docs/src/examples/QSeparator/Standard.vue‎

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

‎docs/src/examples/QSeparator/Vertical.vue‎

Lines changed: 42 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,45 @@
11
<template>
2-
<div class="row q-gutter-md q-pa-md justify-around">
3-
<q-card style="height:200px" class="col-xs-5 col-sm-3 col-lg-2 q-pa-md">
4-
<div class="q-gutter-sm col">Standard:
5-
<q-separator style="height: 150px" vertical class="q-mt-sm" />
6-
</div>
7-
</q-card>
8-
<q-card style="height:200px" class="col-xs-5 col-sm-3 col-lg-2 q-pa-md">
9-
<div class="q-gutter-sm col">Primary:
10-
<q-separator style="height: 150px" vertical color="primary" class="q-mt-sm" />
11-
</div>
12-
</q-card>
13-
<q-card style="height:200px" class="col-xs-5 col-sm-3 col-lg-2 q-pa-md">
14-
<div class="q-gutter-sm col">Secondary:
15-
<q-separator style="height: 150px" vertical color="secondary" class="q-mt-sm" />
16-
</div>
17-
</q-card>
18-
<q-card style="height:200px" class="col-xs-5 col-sm-3 col-lg-2 q-pa-md">
19-
<div class="q-gutter-sm col">Deep Orange:
20-
<q-separator style="height: 150px" vertical color="deep-orange" class="q-mt-sm" />
21-
</div>
22-
</q-card>
23-
<q-card style="height:200px" class="col-xs-5 col-sm-3 col-lg-2 q-pa-md">
24-
<div class="q-gutter-sm col">Black:
25-
<q-separator style="height: 150px" vertical dark color="black" class="q-mt-sm" />
26-
</div>
27-
</q-card>
28-
<q-card style="height:200px" class="col-xs-5 col-sm-3 col-lg-2 q-pa-md text-white bg-grey-10">
29-
<div class="q-gutter-sm col">Dark:
30-
<q-separator style="height: 150px" vertical dark class="q-mt-sm" />
31-
</div>
32-
</q-card>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-y-md column">
4+
<q-toolbar class="bg-grey-3 shadow-2 generic-border-radius">
5+
<q-btn flat round dense icon="menu" class="q-mr-sm" />
6+
7+
<q-separator vertical inset />
8+
9+
<q-btn stretch flat label="Link" />
10+
11+
<q-space />
12+
13+
<q-btn stretch flat label="Link" />
14+
15+
<q-separator vertical />
16+
17+
<q-btn stretch flat label="Link" />
18+
19+
<q-separator vertical />
20+
21+
<q-btn stretch flat label="Link" />
22+
</q-toolbar>
23+
24+
<q-toolbar class="bg-primary text-white shadow-2 generic-border-radius">
25+
<q-btn flat round dense icon="menu" class="q-mr-sm" />
26+
27+
<q-separator dark vertical inset />
28+
29+
<q-btn stretch flat label="Link" />
30+
31+
<q-space />
32+
33+
<q-btn stretch flat label="Link" />
34+
35+
<q-separator dark vertical />
36+
37+
<q-btn stretch flat label="Link" />
38+
39+
<q-separator dark vertical />
40+
41+
<q-btn stretch flat label="Link" />
42+
</q-toolbar>
43+
</div>
3344
</div>
3445
</template>

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div class="q-pa-md q-gutter-xs">
3+
<div class="q-gutter-md row justify-center" style="font-size: 2em">
4+
<q-spinner-audio color="secondary" />
5+
<q-spinner-ball color="red" />
6+
<q-spinner-bars color="purple" />
7+
<q-spinner-comment color="deep-purple" />
8+
<q-spinner-cube color="indigo" />
9+
<q-spinner-dots color="blue" />
10+
<q-spinner-facebook color="light-blue" />
11+
<q-spinner-gears color="cyan" />
12+
<q-spinner-grid color="teal" />
13+
<q-spinner-hearts color="green" />
14+
<q-spinner-hourglass color="light-green" />
15+
<q-spinner-infinity color="lime" />
16+
<q-spinner-ios color="yellow" />
17+
<q-spinner-oval color="amber" />
18+
<q-spinner-pie color="orange" />
19+
<q-spinner-puff color="deep-orange" />
20+
<q-spinner-radio color="brown" />
21+
<q-spinner-rings color="grey" />
22+
<q-spinner-tail color="blue-grey" />
23+
</div>
24+
</div>
25+
</template>

‎docs/src/examples/QSpinner/Default.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-md row">
4+
<q-spinner
5+
color="primary"
6+
size="3em"
7+
/>
8+
9+
<q-spinner
10+
color="primary"
11+
size="3em"
12+
:thickness="2"
13+
/>
14+
15+
<q-spinner
16+
color="primary"
17+
size="3em"
18+
:thickness="10"
19+
/>
20+
</div>
21+
</div>
22+
</template>

0 commit comments

Comments
 (0)