Files
workspace/code/g3soft-libs/docs/examples/space/size.vue
T
2026-10-08 22:38:34 +08:00

30 lines
964 B
Vue

<script setup lang="ts">
// size 支持预设名、数字(px)、[水平, 垂直] 数组
import { G3Button, G3Space } from '@g3soft/ui'
</script>
<template>
<G3Space direction="vertical" :size="16" style="display: flex">
<G3Space size="small">
<G3Button size="small" type="outline">small 8px</G3Button>
<G3Button size="small" type="outline">small 8px</G3Button>
</G3Space>
<G3Space size="middle">
<G3Button size="small" type="outline">middle 16px</G3Button>
<G3Button size="small" type="outline">middle 16px</G3Button>
</G3Space>
<G3Space size="large">
<G3Button size="small" type="outline">large 24px</G3Button>
<G3Button size="small" type="outline">large 24px</G3Button>
</G3Space>
<!-- 数字即 px -->
<G3Space :size="32">
<G3Button size="small" type="outline">32px</G3Button>
<G3Button size="small" type="outline">32px</G3Button>
</G3Space>
</G3Space>
</template>