Skip to content

Commit 898abc6

Browse files
rstoenescurstoenescu
committed
refactor: Lists and Items
1 parent e0e4b70 commit 898abc6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1878
-2001
lines changed

‎dev/components/components/ajax-bar.vue‎

Lines changed: 14 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,58 +4,42 @@
44
<div class="layout-padding" style="max-width: 600px;">
55
<p class="caption">Ajax Bar component captures Ajax calls automatically. This page here triggers events manually for demonstrating purposes only.</p>
66

7-
<div class="card" style="margin-top: 25px">
8-
<div class="card-title bg-primary text-center">
7+
<q-card style="margin-top: 25px">
8+
<q-card-title class="bg-primary text-center">
99
<q-btn push color="orange" @click="trigger()">Trigger Event</q-btn>
10-
</div>
10+
</q-card-title>
1111

1212
<p class="caption text-center">Try out some combinations for Ajax Bar.</p>
13-
<div class="card-content group column">
13+
<q-card-main class="group column">
1414
<div class="auto column items-center">
1515
<div class="flex">
1616
<div class="column group">
17-
<label>
18-
<q-radio v-model="position" val="top"></q-radio>
19-
Top
20-
</label>
21-
<label>
22-
<q-radio v-model="position" val="bottom"></q-radio>
23-
Bottom
24-
</label>
17+
<q-radio v-model="position" val="top" label="Top" />
18+
<q-radio v-model="position" val="bottom" label="Bottom" />
2519
</div>
2620

2721
<div class="column group">
28-
<label>
29-
<q-radio v-model="position" val="right"></q-radio>
30-
Right
31-
</label>
32-
<label>
33-
<q-radio v-model="position" val="left"></q-radio>
34-
Left
35-
</label>
22+
<q-radio v-model="position" val="right" label="Right" />
23+
<q-radio v-model="position" val="left" label="Left" />
3624
</div>
3725
</div>
3826
</div>
3927

4028
<div class="row justify-center" style="margin-top: 15px;">
41-
<label style="white-space: nowrap;">
42-
<q-checkbox v-model="reverse"></q-checkbox>
43-
Reverse Direction
44-
</label>
29+
<q-checkbox v-model="reverse" label="Reverse Direction" />
4530
</div>
4631

47-
<div>
48-
<span>Size (<em>{{size}}px</em>)</span>
49-
<q-range v-model="size" :min="2" :max="20" label-always style="margin-top: 25px;"></q-range>
50-
</div>
32+
<q-field :label="`Size (<em>${size}px</em>)`">
33+
<q-range v-model="size" :min="2" :max="20" label-always />
34+
</q-field>
5135

5236
<div class="auto column items-center">
5337
<div class="flex">
5438
<q-input float-label="Color" v-model="color" />
5539
</div>
5640
</div>
57-
</div>
58-
</div>
41+
</q-card-main>
42+
</q-card>
5943
</div>
6044
</div>
6145
</template>

‎dev/components/components/card.vue‎

Lines changed: 49 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -64,17 +64,17 @@
6464
<span slot="subtitle">Subtitle</span>
6565
<q-icon slot="right" name="more_vert">
6666
<q-popover ref="popover">
67-
<div class="list link no-border">
68-
<div class="item" @click="$refs.popover.close()">
69-
<div class="item-content">Remove Card</div>
70-
</div>
71-
<div class="item" @click="$refs.popover.close()">
72-
<div class="item-content">Send Feedback</div>
73-
</div>
74-
<div class="item" @click="$refs.popover.close()">
75-
<div class="item-content">Share</div>
76-
</div>
77-
</div>
67+
<q-list link class="no-border">
68+
<q-item @click="$refs.popover.close()">
69+
<q-item-main label="Remove Card" />
70+
</q-item>
71+
<q-item @click="$refs.popover.close()">
72+
<q-item-main label="Send Feedback" />
73+
</q-item>
74+
<q-item @click="$refs.popover.close()">
75+
<q-item-main label="Share" />
76+
</q-item>
77+
</q-list>
7878
</q-popover>
7979
</q-icon>
8080
</q-card-title>
@@ -213,15 +213,13 @@
213213
</q-card>
214214

215215
<q-card inline>
216-
<div class="item">
217-
<div class="item-primary">
218-
<img src="~assets/boy-avatar.png">
219-
</div>
220-
<div class="item-content text">
221-
<div>Title</div>
222-
<div>Subhead</div>
223-
</div>
224-
</div>
216+
<q-item>
217+
<q-item-side avatar="/statics/boy-avatar.png" />
218+
<q-item-main>
219+
<q-item-tile label>Title</q-item-tile>
220+
<q-item-tile sublabel>Subhead</q-item-tile>
221+
</q-item-main>
222+
</q-item>
225223
<q-card-media>
226224
<img src="~assets/parallax2.jpg">
227225
</q-card-media>
@@ -239,43 +237,42 @@
239237
<q-card-media>
240238
<img src="~assets/parallax2.jpg">
241239
</q-card-media>
242-
<q-card-list>
243-
<div class="item">
244-
<div class="item-primary">
245-
<q-icon class="text-primary" name="local bar" />
246-
</div>
247-
<div class="item-content text">
248-
<div>Bar XYZ</div>
249-
<div>Have a drink.</div>
250-
</div>
251-
</div>
252-
<div class="item">
253-
<div class="item-primary">
254-
<q-icon class="text-red" name="local gas station" />
255-
</div>
256-
<div class="item-content text">
257-
<div>Gas Station</div>
258-
<div>Fill your gas tank.</div>
259-
</div>
260-
</div>
261-
<div class="item">
262-
<div class="item-primary">
263-
<q-icon class="text-amber" name="local movies" />
264-
</div>
265-
<div class="item-content text">
266-
<div>Cinema XYZ</div>
267-
<div>Watch a movie.</div>
268-
</div>
269-
</div>
270-
</q-card-list>
240+
<q-list>
241+
<q-item>
242+
<q-item-side>
243+
<q-item-tile color="primary" icon="local bar" />
244+
</q-item-side>
245+
<q-item-main>
246+
<q-item-tile label>Bar XYZ</q-item-tile>
247+
<q-item-tile sublabel>Have a drink.</q-item-tile>
248+
</q-item-main>
249+
</q-item>
250+
<q-item>
251+
<q-item-side>
252+
<q-item-tile color="red" icon="local gas station" />
253+
</q-item-side>
254+
<q-item-main>
255+
<q-item-tile label>Gas Station</q-item-tile>
256+
<q-item-tile sublabel>Fill your gas tank.</q-item-tile>
257+
</q-item-main>
258+
</q-item>
259+
<q-item>
260+
<q-item-side>
261+
<q-item-tile color="amber" icon="local movies" />
262+
</q-item-side>
263+
<q-item-main>
264+
<q-item-tile label>Cinema XYZ</q-item-tile>
265+
<q-item-tile sublabel>Watch a movie.</q-item-tile>
266+
</q-item-main>
267+
</q-item>
268+
</q-list>
271269
</q-card>
272270

273271
<q-card inline>
274272
<q-card-title>
275273
Title
276274
</q-card-title>
277-
<q-card-separator />
278-
<q-card-list>
275+
<q-list delimiter>
279276
<q-collapsible icon="explore" label="First">
280277
<div>
281278
Lorem ipsum dolor sit amet...
@@ -293,7 +290,7 @@
293290
Lorem ipsum dolor sit amet...
294291
</div>
295292
</q-collapsible>
296-
</q-card-list>
293+
</q-list>
297294
</q-card>
298295

299296
<q-card inline>

0 commit comments

Comments
 (0)