34 lines
1.0 KiB
Vue
34 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
// gutter 数字=水平垂直同值；数组=[水平, 垂直]
|
|
import { G3Col, G3Row, G3Space } from '@g3soft/ui'
|
|
</script>
|
|
|
|
<template>
|
|
<G3Space direction="vertical" :size="20" style="display: flex">
|
|
<G3Row :gutter="16">
|
|
<G3Col :span="8"><div class="cell">gutter 16</div></G3Col>
|
|
<G3Col :span="8"><div class="cell">gutter 16</div></G3Col>
|
|
<G3Col :span="8"><div class="cell">gutter 16</div></G3Col>
|
|
</G3Row>
|
|
|
|
<G3Row :gutter="[32, 12]">
|
|
<G3Col :span="8"><div class="cell">水平 32</div></G3Col>
|
|
<G3Col :span="8"><div class="cell">水平 32</div></G3Col>
|
|
<G3Col :span="8"><div class="cell">水平 32</div></G3Col>
|
|
<G3Col :span="8"><div class="cell">垂直 12</div></G3Col>
|
|
<G3Col :span="8"><div class="cell">垂直 12</div></G3Col>
|
|
<G3Col :span="8"><div class="cell">垂直 12</div></G3Col>
|
|
</G3Row>
|
|
</G3Space>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.cell {
|
|
padding: 12px 0;
|
|
border-radius: 6px;
|
|
background: rgba(24, 24, 27, 0.04);
|
|
font-size: 13px;
|
|
text-align: center;
|
|
}
|
|
</style>
|