Space 间距

设置组件之间的间距，底层为 display: flex 容器。

水平间距

默认水平排列，通过 gap 控制间距。

水平方向，gap=12

vue

<template>
  <ASpace :gap="12">
    <AButton>Button 1</AButton>
    <AButton variant="outline">Button 2</AButton>
    <AButton variant="ghost">Button 3</AButton>
  </ASpace>
</template>

<script setup lang="ts">
import { AButton, ASpace } from '@lite-code/aui-vue'
</script>

垂直间距

设置 direction="vertical" 改为垂直排列。

垂直方向，gap=12

vue

<template>
  <ASpace direction="vertical" :gap="12">
    <AButton style="width: 120px">Button 1</AButton>
    <AButton variant="outline" style="width: 120px">Button 2</AButton>
    <AButton variant="ghost" style="width: 120px">Button 3</AButton>
  </ASpace>
</template>

<script setup lang="ts">
import { AButton, ASpace } from '@lite-code/aui-vue'
</script>

自动换行

设置 wrap 属性，超出宽度自动换行。

wrap 模式，超出自动换行

vue

<template>
  <ASpace :gap="8" wrap style="max-width: 360px">
    <AButton v-for="i in 10" :key="i" size="sm" variant="outline">Tag {{ i }}</AButton>
  </ASpace>
</template>

<script setup lang="ts">
import { AButton, ASpace } from '@lite-code/aui-vue'
</script>

API

Props

属性	类型	默认值	说明
direction	'horizontal' | 'vertical'	'horizontal'	排列方向
gap	number | string	8	子元素间距
align	'start' | 'center' | 'end' | 'baseline'	—	交叉轴对齐方式
wrap	boolean	false	是否自动换行
style	CSSProperties	—	自定义样式
class	string	—	自定义类名