Skip to content

间距 Space

控制元素之间的距离和排版方式

基础用法

通过设定 size 属性,控制元素之间的间距,支持传入设定的尺寸,或者自定义大小。

<template>
  <bp-space :size="10">
    <bp-button>Button 1</bp-button>
    <bp-button>Button 2</bp-button>
  </bp-space>
</template>

分隔符

通过 split 插槽设置分割内容

<template>
  <bp-space size="small">
    <template #split>
      <span style="color:#8c8c8c">-</span>
    </template>
    <bp-link>Item</bp-link>
    <bp-link>Item</bp-link>
    <bp-link>Item</bp-link>
  </bp-space>
</template>

Space 属性

size
间距大小
EnumNumber
normal
type
布局类型
Enum
horizontal
justify
水平对其方式
String
flex-start
align
垂直对其方式
String
flex-start

Space 插槽

split
分割内容
-