Space

Set consistent spacing between inline or block children.

Basic Usage

Type

HorizontalVertical

BP

Tag 1

Link 1

<template>
  <p class="font-size-13px m-2px! opacity60">Type</p>
  <bp-radio-group v-model="type" class="mb-10" type="button">
    <bp-radio value="horizontal">Horizontal</bp-radio>
    <bp-radio value="vertical">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">Tag 1</bp-tag>
    <bp-switch></bp-switch>
    <bp-link>Link 1</bp-link>
  </bp-space>
</template>

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

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

Flex Layout

Align children with Flex align and justify.

Justify

flex-startflex-endcenterspace-betweenspace-evenlyspace-around

Align

flex-startflex-endcenterbaseline

BP

Tag 1

Link 1

<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">Tag 1</bp-tag>
    <bp-switch></bp-switch>
    <bp-link>Link 1</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 Props

size	Gutter	StringNumber	normal	-
type	Type	SpaceType	horizontal	-
justify	Horizontal alignment	String	flex-start	-
align	Vertical alignment	String	flex-start	-

Space Slots

default	Content	-	-
split	Separator content	-	-