element-plus/docs/examples/descriptions/vertical-list.vue
kooriookami 10e231168a
style: update descriptions style (#5025)
* style: update descriptions style

* style: update

* style: update demo

* style: update

* style: update

* style: update

* style: update

* style: update

* feat: update
2021-12-30 17:46:33 +08:00

66 lines
1.8 KiB
Vue

<template>
<el-radio-group v-model="size">
<el-radio label="large">Large</el-radio>
<el-radio>Default</el-radio>
<el-radio label="small">Small</el-radio>
</el-radio-group>
<el-descriptions
title="Vertical list with border"
direction="vertical"
:column="4"
:size="size"
border
>
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
<el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
<el-descriptions-item label="Remarks">
<el-tag size="small">School</el-tag>
</el-descriptions-item>
<el-descriptions-item label="Address"
>No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
</el-descriptions-item>
</el-descriptions>
<el-descriptions
title="Vertical list without border"
:column="4"
:size="size"
direction="vertical"
:style="blockMargin"
>
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
<el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
<el-descriptions-item label="Remarks">
<el-tag size="small">School</el-tag>
</el-descriptions-item>
<el-descriptions-item label="Address"
>No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
</el-descriptions-item>
</el-descriptions>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
const size = ref('')
const blockMargin = computed(() => {
const marginMap = {
large: '32px',
default: '28px',
small: '24px',
}
return {
marginTop: marginMap[size.value] || marginMap.default,
}
})
</script>
<style scoped>
.el-descriptions {
margin-top: 20px;
}
</style>