github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

doc: update demo

pull/6222/head
tangjinzhou 2023-01-31 22:49:08 +08:00
parent 31776a2cf8
commit 4ef70b1503
3 changed files with 59 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
components/grid/demo/flex-align.vue
View File

@ -17,51 +17,59 @@ Child elements vertically aligned.
</docs>
<template>
<p>Align Top</p>
<a-row type="flex" justify="center" align="top">
<a-col :span="4">
<p class="height-100">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-50">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-120">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-80">col-4</p>
</a-col>
</a-row>
<div id="components-grid-demo-flex-align">
<a-divider orientation="left">Align Top</a-divider>
<a-row type="flex" justify="center" align="top">
<a-col :span="4">
<p class="height-100">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-50">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-120">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-80">col-4</p>
</a-col>
</a-row>
<p>Align Center</p>
<a-row type="flex" justify="space-around" align="middle">
<a-col :span="4">
<p class="height-100">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-50">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-120">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-80">col-4</p>
</a-col>
</a-row>
<a-divider orientation="left">Align Middle</a-divider>
<a-row type="flex" justify="space-around" align="middle">
<a-col :span="4">
<p class="height-100">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-50">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-120">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-80">col-4</p>
</a-col>
</a-row>
<p>Align Bottom</p>
<a-row type="flex" justify="space-between" align="bottom">
<a-col :span="4">
<p class="height-100">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-50">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-120">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-80">col-4</p>
</a-col>
</a-row>
<a-divider orientation="left">Align Bottom</a-divider>
<a-row type="flex" justify="space-between" align="bottom">
<a-col :span="4">
<p class="height-100">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-50">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-120">col-4</p>
</a-col>
<a-col :span="4">
<p class="height-80">col-4</p>
</a-col>
</a-row>
</div>
</template>
<style lang="less" scoped>
:deep(#components-grid-demo-flex-align) [class~='ant-row'] {
background: rgba(128, 128, 128, 0.08);
}
</style>

2
components/grid/demo/flex.vue
View File

@ -71,7 +71,7 @@ Child elements depending on the value of the `start`,`center`, `end`,`space-betw
</template>
<style lang="less" scoped>
#components-grid-demo-flex :deep(.ant-row) {
:deep(#components-grid-demo-flex) [class~='ant-row'] {
background: rgba(128, 128, 128, 0.08);
}
</style>

10
components/grid/demo/playfround.vue
View File

@ -128,27 +128,27 @@ export default defineComponent({
});
</script>
<style scoped>
#components-grid-demo-playground [class~='ant-col'] {
:deep(#components-grid-demo-playground) [class~='ant-col'] {
background: transparent;
border: 0;
}
#components-grid-demo-playground [class~='ant-col'] > div {
:deep(#components-grid-demo-playground) [class~='ant-col'] > div {
height: 120px;
font-size: 14px;
line-height: 120px;
background: #0092ff;
border-radius: 4px;
}
#components-grid-demo-playground pre {
:deep(#components-grid-demo-playground) pre {
padding: 8px 16px;
font-size: 13px;
background: #f9f9f9;
border-radius: 6px;
}
#components-grid-demo-playground pre.demo-code {
:deep(#components-grid-demo-playground) pre.demo-code {
direction: ltr;
}
#components-grid-demo-playground .ant-col {
:deep(#components-grid-demo-playground) .ant-col {
padding: 0;
}
</style>