Skip to content

Commit e60e5a9

Browse files
KareemDaKareemDa
authored
docs(flex): switch examples to plain markup (#14559)
1 parent 8b4e0e7 commit e60e5a9

File tree

4 files changed

+112
-125
lines changed

4 files changed

+112
-125
lines changed

‎packages/docs/src/examples/flex/flex-align-self.vue

Lines changed: 81 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,87 @@
11
<template>
22
<div>
3-
<v-card
4-
v-for="j in justify"
5-
:key="j"
6-
class="d-flex mb-6"
7-
color="grey lighten-2"
8-
flat
9-
height="100"
10-
tile
11-
>
12-
<v-card
13-
v-for="n in 3"
14-
:key="n"
15-
class="pa-2"
16-
:class="[n === 2 && `align-self-${j}`]"
17-
outlined
18-
tile
19-
>
20-
{{ n === 2 ? 'Aligned flex item' : 'Flex item' }}
3+
<v-card class="d-flex mb-6" color="grey lighten-2" flat height="100" tile>
4+
<v-card class="pa-2" outlined tile>
5+
flex item
6+
</v-card>
7+
8+
<v-card class="pa-2 align-self-start" outlined tile>
9+
Aligned start
10+
</v-card>
11+
12+
<v-card class="pa-2" outlined tile>
13+
flex item
14+
</v-card>
15+
</v-card>
16+
17+
<v-card class="d-flex mb-6" color="grey lighten-2" flat height="100" tile>
18+
<v-card class="pa-2" outlined tile>
19+
flex item
20+
</v-card>
21+
22+
<v-card class="pa-2 align-self-center" outlined tile>
23+
Aligned center
24+
</v-card>
25+
26+
<v-card class="pa-2" outlined tile>
27+
flex item
28+
</v-card>
29+
</v-card>
30+
31+
<v-card class="d-flex mb-6" color="grey lighten-2" flat height="100" tile>
32+
<v-card class="pa-2" outlined tile>
33+
flex item
34+
</v-card>
35+
36+
<v-card class="pa-2 align-self-end" outlined tile>
37+
Aligned end
38+
</v-card>
39+
40+
<v-card class="pa-2" outlined tile>
41+
flex item
42+
</v-card>
43+
</v-card>
44+
45+
<v-card class="d-flex mb-6" color="grey lighten-2" flat height="100" tile>
46+
<v-card class="pa-2" outlined tile>
47+
flex item
48+
</v-card>
49+
50+
<v-card class="pa-2 align-self-baseline" outlined tile>
51+
Aligned baseline
52+
</v-card>
53+
54+
<v-card class="pa-2" outlined tile>
55+
flex item
56+
</v-card>
57+
</v-card>
58+
59+
<v-card class="d-flex mb-6" color="grey lighten-2" flat height="100" tile>
60+
<v-card class="pa-2" outlined tile>
61+
flex item
62+
</v-card>
63+
64+
<v-card class="pa-2 align-self-auto" outlined tile>
65+
Aligned auto
66+
</v-card>
67+
68+
<v-card class="pa-2" outlined tile>
69+
flex item
70+
</v-card>
71+
</v-card>
72+
73+
<v-card class="d-flex mb-6" color="grey lighten-2" flat height="100" tile>
74+
<v-card class="pa-2" outlined tile>
75+
flex item
76+
</v-card>
77+
78+
<v-card class="pa-2 align-self-stretch" outlined tile>
79+
Aligned stretch
80+
</v-card>
81+
82+
<v-card class="pa-2" outlined tile>
83+
flex item
2184
</v-card>
2285
</v-card>
2386
</div>
2487
</template>
25-
26-
<script>
27-
export default {
28-
data: () => ({
29-
justify: [
30-
'start',
31-
'end',
32-
'center',
33-
'baseline',
34-
'auto',
35-
'stretch',
36-
],
37-
}),
38-
}
39-
</script>

‎packages/docs/src/examples/flex/flex-order.vue

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,11 @@
11
<template>
22
<div>
3-
<v-card
4-
class="d-flex flex-wrap-reverse"
5-
color="grey lighten-2"
6-
flat
7-
tile
8-
>
9-
<v-card
10-
class="order-3 pa-2"
11-
outlined
12-
tile
13-
>
14-
First flex item
15-
</v-card>
16-
<v-card
17-
class="order-2 pa-2"
18-
outlined
19-
tile
20-
>
21-
Second flex item
22-
</v-card>
23-
<v-card
24-
class="order-1 pa-2"
25-
outlined
26-
tile
27-
>
28-
Third flex item
29-
</v-card>
3+
<v-card class="d-flex flex-wrap-reverse" color="grey lighten-2" flat tile>
4+
<v-card class="order-3 pa-2" outlined tile> First flex item </v-card>
5+
6+
<v-card class="order-2 pa-2" outlined tile> Second flex item </v-card>
7+
8+
<v-card class="order-1 pa-2" outlined tile> Third flex item </v-card>
309
</v-card>
3110
</div>
3211
</template>

‎packages/docs/src/examples/flex/margins-align-items.vue

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,34 +7,25 @@
77
tile
88
height="200"
99
>
10-
<v-card
11-
v-for="n in 3"
12-
:key="n"
13-
:class="n === 1 && 'mb-auto'"
14-
class="pa-2"
15-
outlined
16-
tile
17-
>
18-
Flex item
19-
</v-card>
10+
<v-card class="pa-2 mb-auto" outlined tile> Flex item </v-card>
11+
12+
<v-card class="pa-2" outlined tile> Flex item </v-card>
13+
14+
<v-card class="pa-2" outlined tile> Flex item </v-card>
2015
</v-card>
16+
2117
<v-card
2218
class="d-flex align-end flex-column"
2319
color="grey lighten-2"
2420
flat
2521
tile
2622
height="200"
2723
>
28-
<v-card
29-
v-for="n in 3"
30-
:key="n"
31-
:class="n === 3 && 'mt-auto'"
32-
class="pa-2"
33-
outlined
34-
tile
35-
>
36-
Flex item
37-
</v-card>
24+
<v-card class="pa-2" outlined tile> Flex item </v-card>
25+
26+
<v-card class="pa-2" outlined tile> Flex item </v-card>
27+
28+
<v-card class="pa-2 mt-auto" outlined tile> Flex item </v-card>
3829
</v-card>
3930
</div>
4031
</template>

‎packages/docs/src/examples/flex/margins.vue

Lines changed: 14 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,25 @@
11
<template>
22
<div>
3-
<v-card
4-
class="d-flex mb-6"
5-
color="grey lighten-2"
6-
flat
7-
tile
8-
>
9-
<v-card
10-
v-for="n in 3"
11-
:key="n"
12-
class="pa-2"
13-
outlined
14-
tile
15-
>
3+
<v-card class="d-flex mb-6" color="grey lighten-2" flat tile>
4+
<v-card v-for="n in 3" :key="n" class="pa-2" outlined tile>
165
Flex item
176
</v-card>
187
</v-card>
198

20-
<v-card
21-
class="d-flex mb-6"
22-
color="grey lighten-2"
23-
flat
24-
tile
25-
>
26-
<v-card
27-
v-for="n in 3"
28-
:key="n"
29-
:class="n === 1 && 'mr-auto'"
30-
class="pa-2"
31-
outlined
32-
tile
33-
>
34-
Flex item
35-
</v-card>
9+
<v-card class="d-flex mb-6" color="grey lighten-2" flat tile>
10+
<v-card class="pa-2 mr-auto" outlined tile> Flex item </v-card>
11+
12+
<v-card class="pa-2" outlined tile> Flex item </v-card>
13+
14+
<v-card class="pa-2" outlined tile> Flex item </v-card>
3615
</v-card>
3716

38-
<v-card
39-
class="d-flex mb-6"
40-
color="grey lighten-2"
41-
flat
42-
tile
43-
>
44-
<v-card
45-
v-for="n in 3"
46-
:key="n"
47-
:class="n === 3 && 'ml-auto'"
48-
class="pa-2"
49-
outlined
50-
tile
51-
>
52-
Flex item
53-
</v-card>
17+
<v-card class="d-flex" color="grey lighten-2" flat tile>
18+
<v-card class="pa-2" outlined tile> Flex item </v-card>
19+
20+
<v-card class="pa-2" outlined tile> Flex item </v-card>
21+
22+
<v-card class="pa-2 ml-auto" outlined tile> Flex item </v-card>
5423
</v-card>
5524
</div>
5625
</template>

0 commit comments

Comments
 (0)