48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
<docs>
|
||
---
|
||
order: 2
|
||
title:
|
||
zh-CN: 设置间隙
|
||
en-US: gap
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
使用 `gap` 设置元素之间的间距，预设了 `small`、`middle`、`large` 三种尺寸，也可以自定义间距。
|
||
|
||
## en-US
|
||
|
||
Set the `gap` between elements, which has three preset sizes: `small`, `middle`, `large`, You can also customize the gap size.
|
||
|
||
</docs>
|
||
|
||
<template>
|
||
<a-flex gap="middle" vertical>
|
||
<a-radio-group v-model:value="gapSize">
|
||
<a-radio value="small">small</a-radio>
|
||
<a-radio value="middle">middle</a-radio>
|
||
<a-radio value="large">large</a-radio>
|
||
<a-radio value="customize">customize</a-radio>
|
||
</a-radio-group>
|
||
<template v-if="gapSize === 'customize'">
|
||
<a-slider v-model:value="customGapSize" />
|
||
</template>
|
||
<a-flex :gap="gapSize !== 'customize' ? gapSize : customGapSize">
|
||
<a-button type="primary">Primary</a-button>
|
||
<a-button>Default</a-button>
|
||
<a-button type="dashed">Dashed</a-button>
|
||
<a-button type="link">Link</a-button>
|
||
</a-flex>
|
||
</a-flex>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue';
|
||
|
||
type SizeType = 'small' | 'middle' | 'large' | undefined;
|
||
|
||
const gapSize = ref<SizeType | 'customize'>('small');
|
||
|
||
const customGapSize = ref<number>(0);
|
||
</script>
|