间距 Space

设置两个相邻元素之间的距离。

基础用法

间距组件的基础用法，支持 vertical 和 horizontal 两种方向。

类型

水平垂直

BP

标签一

链接一

<template>
  <p class="font-size-13px m-2px! opacity60">类型</p>
  <bp-radio-group v-model="type" class="mb-10" type="button">
    <bp-radio value="horizontal">水平</bp-radio>
    <bp-radio value="vertical">垂直</bp-radio>
  </bp-radio-group>

  <bp-space :type align="center">
    <bp-avatar :style="{ background: '#165dff', color: '#fff' }">BP</bp-avatar>
    <bp-tag status="primary">标签一</bp-tag>
    <bp-switch></bp-switch>
    <bp-link>链接一</bp-link>
  </bp-space>
</template>

<script setup lang="ts">
import { ref } from "vue";

const type = ref("horizontal");
</script>

Flex 布局

间距组件支持 Flex 布局，可以设置 align 和 justify 属性。

Justify

flex-startflex-endcenterspace-betweenspace-evenlyspace-around

Align

flex-startflex-endcenterbaseline

BP

标签一

链接一

<template>
  <p class="font-size-13px m-2px! opacity60">Justify</p>
  <bp-radio-group v-model="justify" class="mb-10" type="button">
    <bp-radio v-for="v in justifyList" :value="v">{{ v }}</bp-radio>
  </bp-radio-group>

  <p class="font-size-13px m-2px! opacity60">Align</p>
  <bp-radio-group v-model="align" class="mb-10" type="button">
    <bp-radio v-for="v in alignList" :value="v">{{ v }}</bp-radio>
  </bp-radio-group>

  <bp-space :align :justify>
    <bp-avatar :style="{ background: '#165dff', color: '#fff' }">BP</bp-avatar>
    <bp-tag status="primary">标签一</bp-tag>
    <bp-switch></bp-switch>
    <bp-link>链接一</bp-link>
  </bp-space>
</template>

<script setup lang="ts">
import { ref } from "vue";

const justify = ref("flex-start");
const align = ref("flex-start");

const justifyList = ["flex-start", "flex-end", "center", "space-between", "space-evenly", "space-around"];
const alignList = ["flex-start", "flex-end", "center", "baseline"];
</script>

Space 属性

size	栏位间隔	StringNumber	normal	-
type	类型	SpaceType	horizontal	-
justify	水平对齐方式	Stirng	flex-start	-
align	纵向对齐方式	Stirng	flex-start	-