Skip to content

Commit 3bedc1f

Browse files
KareemDaKareemDa
authored
docs(border-radius): switch examples to plain markup (#14549)
1 parent 0243af8 commit 3bedc1f

File tree

5 files changed

+121
-67
lines changed

5 files changed

+121
-67
lines changed

‎packages/docs/src/examples/border-radius/misc-pill-and-circle.vue

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,11 @@
11
<template>
22
<v-row class="text-center" justify="center">
3-
<v-col
4-
cols="12"
5-
md="3"
6-
>
7-
<div
8-
class="pa-4 secondary text-no-wrap rounded-pill"
9-
>
10-
.rounded-pill
11-
</div>
3+
<v-col cols="12" md="3">
4+
<div class="pa-4 secondary text-no-wrap rounded-pill">.rounded-pill</div>
125
</v-col>
136

14-
<v-col
15-
cols="12"
16-
md="3"
17-
>
18-
<div
19-
class="pa-7 secondary rounded-circle d-inline-block"
20-
></div>
21-
7+
<v-col cols="12" md="3">
8+
<div class="pa-7 secondary rounded-circle d-inline-block"></div>
229
<div>.rounded-circle</div>
2310
</v-col>
2411
</v-row>

‎packages/docs/src/examples/border-radius/misc-removing-border-radius.vue

Lines changed: 51 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,57 @@
1-
21
<template>
32
<v-row justify="center">
43
<v-col cols="12">
5-
<div
6-
class="pa-4 text-center secondary rounded-0"
7-
v-text="`.rounded-0`"
8-
></div>
9-
</v-col>
10-
<v-col
11-
v-for="value in ['t', 'r', 'b', 'l', 'tl', 'tr', 'br', 'bl']"
12-
:key="value"
13-
cols="12"
14-
md="3"
15-
>
16-
<div
17-
:class="`pa-4 text-center secondary rounded-lg rounded-${value}-0`"
18-
v-text="`rounded-${value}-0`"
19-
></div>
4+
<div class="pa-4 text-center secondary rounded-0">
5+
.rounded-0
6+
</div>
7+
</v-col>
8+
9+
<v-col cols="12" md="3">
10+
<div class="pa-4 text-center secondary rounded-lg rounded-t-0">
11+
.rounded-t-0
12+
</div>
13+
</v-col>
14+
15+
<v-col cols="12" md="3">
16+
<div class="pa-4 text-center secondary rounded-lg rounded-r-0">
17+
.rounded-r-0
18+
</div>
19+
</v-col>
20+
21+
<v-col cols="12" md="3">
22+
<div class="pa-4 text-center secondary rounded-lg rounded-b-0">
23+
.rounded-b-0
24+
</div>
25+
</v-col>
26+
27+
<v-col cols="12" md="3">
28+
<div class="pa-4 text-center secondary rounded-lg rounded-l-0">
29+
.rounded-l-0
30+
</div>
31+
</v-col>
32+
33+
<v-col cols="12" md="3">
34+
<div class="pa-4 text-center secondary rounded-lg rounded-tl-0">
35+
.rounded-tl-0
36+
</div>
37+
</v-col>
38+
39+
<v-col cols="12" md="3">
40+
<div class="pa-4 text-center secondary rounded-lg rounded-tr-0">
41+
.rounded-tr-0
42+
</div>
43+
</v-col>
44+
45+
<v-col cols="12" md="3">
46+
<div class="pa-4 text-center secondary rounded-lg rounded-br-0">
47+
.rounded-br-0
48+
</div>
49+
</v-col>
50+
51+
<v-col cols="12" md="3">
52+
<div class="pa-4 text-center secondary rounded-lg rounded-bl-0">
53+
.rounded-bl-0
54+
</div>
2055
</v-col>
2156
</v-row>
2257
</template>

‎packages/docs/src/examples/border-radius/misc-rounding-all-corners.vue

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,27 @@
11
<template>
22
<v-row>
3-
<v-col
4-
v-for="value in ['-sm', '', '-lg', '-xl']"
5-
:key="value"
6-
cols="12"
7-
md="3"
8-
>
9-
<div
10-
:class="`rounded${value}`"
11-
class="pa-4 text-center secondary text-no-wrap"
12-
v-text="`.rounded${value}`"
13-
></div>
3+
<v-col cols="12" md="3">
4+
<div class="pa-4 text-center secondary text-no-wrap rounded-sm">
5+
rounded-sm
6+
</div>
7+
</v-col>
8+
9+
<v-col cols="12" md="3">
10+
<div class="pa-4 text-center secondary text-no-wrap rounded">
11+
rounded
12+
</div>
13+
</v-col>
14+
15+
<v-col cols="12" md="3">
16+
<div class="pa-4 text-center secondary text-no-wrap rounded-lg">
17+
rounded-lg
18+
</div>
19+
</v-col>
20+
21+
<v-col cols="12" md="3">
22+
<div class="pa-4 text-center secondary text-no-wrap rounded-xl">
23+
rounded-xl
24+
</div>
1425
</v-col>
1526
</v-row>
1627
</template>

‎packages/docs/src/examples/border-radius/misc-rounding-by-corner.vue

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
1-
21
<template>
32
<v-row>
4-
<v-col
5-
v-for="value in ['tl', 'tr', 'br', 'bl']"
6-
:key="value"
7-
cols="12"
8-
md="3"
9-
>
10-
<div
11-
:class="`rounded-${value}-xl`"
12-
class="pa-4 text-center secondary text-no-wrap"
13-
v-text="`.rounded-${value}-xl`"
14-
></div>
3+
<v-col cols="12" md="3">
4+
<div class="pa-4 text-center secondary text-no-wrap rounded-tl-xl">
5+
.rounded-tl-xl
6+
</div>
7+
</v-col>
8+
9+
<v-col cols="12" md="3">
10+
<div class="pa-4 text-center secondary text-no-wrap rounded-tr-xl">
11+
.rounded-tr-xl
12+
</div>
13+
</v-col>
14+
15+
<v-col cols="12" md="3">
16+
<div class="pa-4 text-center secondary text-no-wrap rounded-br-xl">
17+
.rounded-br-xl
18+
</div>
19+
</v-col>
20+
21+
<v-col cols="12" md="3">
22+
<div class="pa-4 text-center secondary text-no-wrap rounded-bl-xl">
23+
.rounded-bl-xl
24+
</div>
1525
</v-col>
1626
</v-row>
1727
</template>

‎packages/docs/src/examples/border-radius/misc-rounding-by-side.vue

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,27 @@
11
<template>
22
<v-row>
3-
<v-col
4-
v-for="value in ['t', 'r', 'b', 'l']"
5-
:key="value"
6-
cols="12"
7-
md="3"
8-
>
9-
<div
10-
:class="`rounded-${value}-xl`"
11-
class="pa-4 text-center secondary text-no-wrap"
12-
v-text="`.rounded-${value}-xl`"
13-
></div>
3+
<v-col cols="12" md="3">
4+
<div class="pa-4 text-center secondary text-no-wrap rounded-t-xl">
5+
.rounded-t-xl
6+
</div>
7+
</v-col>
8+
9+
<v-col cols="12" md="3">
10+
<div class="pa-4 text-center secondary text-no-wrap rounded-r-xl">
11+
.rounded-r-xl
12+
</div>
13+
</v-col>
14+
15+
<v-col cols="12" md="3">
16+
<div class="pa-4 text-center secondary text-no-wrap rounded-b-xl">
17+
.rounded-b-xl
18+
</div>
19+
</v-col>
20+
21+
<v-col cols="12" md="3">
22+
<div class="pa-4 text-center secondary text-no-wrap rounded-l-xl">
23+
.rounded-l-xl
24+
</div>
1425
</v-col>
1526
</v-row>
1627
</template>

0 commit comments

Comments
 (0)