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> </docs>
<template> <template>
<p>Align Top</p> <div id="components-grid-demo-flex-align">
<a-row type="flex" justify="center" align="top"> <a-divider orientation="left">Align Top</a-divider>
<a-col :span="4"> <a-row type="flex" justify="center" align="top">
<p class="height-100">col-4</p> <a-col :span="4">
</a-col> <p class="height-100">col-4</p>
<a-col :span="4"> </a-col>
<p class="height-50">col-4</p> <a-col :span="4">
</a-col> <p class="height-50">col-4</p>
<a-col :span="4"> </a-col>
<p class="height-120">col-4</p> <a-col :span="4">
</a-col> <p class="height-120">col-4</p>
<a-col :span="4"> </a-col>
<p class="height-80">col-4</p> <a-col :span="4">
</a-col> <p class="height-80">col-4</p>
</a-row> </a-col>
</a-row>
<p>Align Center</p> <a-divider orientation="left">Align Middle</a-divider>
<a-row type="flex" justify="space-around" align="middle"> <a-row type="flex" justify="space-around" align="middle">
<a-col :span="4"> <a-col :span="4">
<p class="height-100">col-4</p> <p class="height-100">col-4</p>
</a-col> </a-col>
<a-col :span="4"> <a-col :span="4">
<p class="height-50">col-4</p> <p class="height-50">col-4</p>
</a-col> </a-col>
<a-col :span="4"> <a-col :span="4">
<p class="height-120">col-4</p> <p class="height-120">col-4</p>
</a-col> </a-col>
<a-col :span="4"> <a-col :span="4">
<p class="height-80">col-4</p> <p class="height-80">col-4</p>
</a-col> </a-col>
</a-row> </a-row>
<p>Align Bottom</p> <a-divider orientation="left">Align Bottom</a-divider>
<a-row type="flex" justify="space-between" align="bottom"> <a-row type="flex" justify="space-between" align="bottom">
<a-col :span="4"> <a-col :span="4">
<p class="height-100">col-4</p> <p class="height-100">col-4</p>
</a-col> </a-col>
<a-col :span="4"> <a-col :span="4">
<p class="height-50">col-4</p> <p class="height-50">col-4</p>
</a-col> </a-col>
<a-col :span="4"> <a-col :span="4">
<p class="height-120">col-4</p> <p class="height-120">col-4</p>
</a-col> </a-col>
<a-col :span="4"> <a-col :span="4">
<p class="height-80">col-4</p> <p class="height-80">col-4</p>
</a-col> </a-col>
</a-row> </a-row>
</div>
</template> </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> </template>
<style lang="less" scoped> <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); background: rgba(128, 128, 128, 0.08);
} }
</style> </style>

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

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