Skip to content

Space 间距

设置组件之间的间距。

基础用法

vue
<ASpace>
  <AButton>按钮 1</AButton>
  <AButton type="primary">按钮 2</AButton>
  <AButton type="success">按钮 3</AButton>
</ASpace>

间距大小

vue
<ASpace size="tiny"> ... </ASpace>
<ASpace size="small"> ... </ASpace>
<ASpace size="medium"> ... </ASpace>
<ASpace size="large"> ... </ASpace>
<ASpace :size="24"> ... </ASpace>

竖向排列

vue
<ASpace vertical>
  <AButton>第一行</AButton>
  <AButton type="primary">第二行</AButton>
</ASpace>

对齐方式

vue
<ASpace align="center"> ... </ASpace>
<ASpace justify="space-between"> ... </ASpace>

API

属性类型默认值说明
size'tiny' | 'small' | 'medium' | 'large' | number'medium'间距大小
verticalbooleanfalse竖向排列
align'start' | 'end' | 'center' | 'baseline'交叉轴对齐
justify'start' | 'end' | 'center' | 'space-between' | 'space-around'主轴对齐
inlinebooleanfalseinline-flex 模式
wrapbooleantrue是否换行

Released under the MIT License.