Skip to content

Commit 4ef70b1

Browse files
tangjinzhoutangjinzhou
committed
doc: update demo
1 parent 31776a2 commit 4ef70b1

File tree

3 files changed

+59
-51
lines changed

3 files changed

+59
-51
lines changed

‎components/grid/demo/flex-align.vue

+53-45
Original file line numberDiff line numberDiff line change
@@ -17,51 +17,59 @@ Child elements vertically aligned.
1717
</docs>
1818

1919
<template>
20-
<p>Align Top</p>
21-
<a-row type="flex" justify="center" align="top">
22-
<a-col :span="4">
23-
<p class="height-100">col-4</p>
24-
</a-col>
25-
<a-col :span="4">
26-
<p class="height-50">col-4</p>
27-
</a-col>
28-
<a-col :span="4">
29-
<p class="height-120">col-4</p>
30-
</a-col>
31-
<a-col :span="4">
32-
<p class="height-80">col-4</p>
33-
</a-col>
34-
</a-row>
20+
<div id="components-grid-demo-flex-align">
21+
<a-divider orientation="left">Align Top</a-divider>
22+
<a-row type="flex" justify="center" align="top">
23+
<a-col :span="4">
24+
<p class="height-100">col-4</p>
25+
</a-col>
26+
<a-col :span="4">
27+
<p class="height-50">col-4</p>
28+
</a-col>
29+
<a-col :span="4">
30+
<p class="height-120">col-4</p>
31+
</a-col>
32+
<a-col :span="4">
33+
<p class="height-80">col-4</p>
34+
</a-col>
35+
</a-row>
3536

36-
<p>Align Center</p>
37-
<a-row type="flex" justify="space-around" align="middle">
38-
<a-col :span="4">
39-
<p class="height-100">col-4</p>
40-
</a-col>
41-
<a-col :span="4">
42-
<p class="height-50">col-4</p>
43-
</a-col>
44-
<a-col :span="4">
45-
<p class="height-120">col-4</p>
46-
</a-col>
47-
<a-col :span="4">
48-
<p class="height-80">col-4</p>
49-
</a-col>
50-
</a-row>
37+
<a-divider orientation="left">Align Middle</a-divider>
38+
<a-row type="flex" justify="space-around" align="middle">
39+
<a-col :span="4">
40+
<p class="height-100">col-4</p>
41+
</a-col>
42+
<a-col :span="4">
43+
<p class="height-50">col-4</p>
44+
</a-col>
45+
<a-col :span="4">
46+
<p class="height-120">col-4</p>
47+
</a-col>
48+
<a-col :span="4">
49+
<p class="height-80">col-4</p>
50+
</a-col>
51+
</a-row>
5152

52-
<p>Align Bottom</p>
53-
<a-row type="flex" justify="space-between" align="bottom">
54-
<a-col :span="4">
55-
<p class="height-100">col-4</p>
56-
</a-col>
57-
<a-col :span="4">
58-
<p class="height-50">col-4</p>
59-
</a-col>
60-
<a-col :span="4">
61-
<p class="height-120">col-4</p>
62-
</a-col>
63-
<a-col :span="4">
64-
<p class="height-80">col-4</p>
65-
</a-col>
66-
</a-row>
53+
<a-divider orientation="left">Align Bottom</a-divider>
54+
<a-row type="flex" justify="space-between" align="bottom">
55+
<a-col :span="4">
56+
<p class="height-100">col-4</p>
57+
</a-col>
58+
<a-col :span="4">
59+
<p class="height-50">col-4</p>
60+
</a-col>
61+
<a-col :span="4">
62+
<p class="height-120">col-4</p>
63+
</a-col>
64+
<a-col :span="4">
65+
<p class="height-80">col-4</p>
66+
</a-col>
67+
</a-row>
68+
</div>
6769
</template>
70+
71+
<style lang="less" scoped>
72+
:deep(#components-grid-demo-flex-align) [class~='ant-row'] {
73+
background: rgba(128, 128, 128, 0.08);
74+
}
75+
</style>

‎components/grid/demo/flex.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ Child elements depending on the value of the `start`,`center`, `end`,`space-betw
7171
</template>
7272

7373
<style lang="less" scoped>
74-
#components-grid-demo-flex :deep(.ant-row) {
74+
:deep(#components-grid-demo-flex) [class~='ant-row'] {
7575
background: rgba(128, 128, 128, 0.08);
7676
}
7777
</style>

‎components/grid/demo/playfround.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -128,27 +128,27 @@ export default defineComponent({
128128
});
129129
</script>
130130
<style scoped>
131-
#components-grid-demo-playground [class~='ant-col'] {
131+
:deep(#components-grid-demo-playground) [class~='ant-col'] {
132132
background: transparent;
133133
border: 0;
134134
}
135-
#components-grid-demo-playground [class~='ant-col'] > div {
135+
:deep(#components-grid-demo-playground) [class~='ant-col'] > div {
136136
height: 120px;
137137
font-size: 14px;
138138
line-height: 120px;
139139
background: #0092ff;
140140
border-radius: 4px;
141141
}
142-
#components-grid-demo-playground pre {
142+
:deep(#components-grid-demo-playground) pre {
143143
padding: 8px 16px;
144144
font-size: 13px;
145145
background: #f9f9f9;
146146
border-radius: 6px;
147147
}
148-
#components-grid-demo-playground pre.demo-code {
148+
:deep(#components-grid-demo-playground) pre.demo-code {
149149
direction: ltr;
150150
}
151-
#components-grid-demo-playground .ant-col {
151+
:deep(#components-grid-demo-playground) .ant-col {
152152
padding: 0;
153153
}
154154
</style>

0 commit comments

Comments
 (0)