BIN-UI-DESIGN

Appearance

On this page

间距 Space ​

可以设置组件和不同dom之间的间距，用于设置相同间隔，方便使用

基础用法 ​

space 
<template>
  <b-space>
    space
    <b-button type="primary">Button</b-button>
    <b-button icon="upload">Button</b-button>
    <b-button type="danger">Delete</b-button>
  </b-space>
</template>
<template>
  <b-space>
    space
    <b-button type="primary">Button</b-button>
    <b-button icon="upload">Button</b-button>
    <b-button type="danger">Delete</b-button>
  </b-space>
</template>

垂直间距 ​

Card

card content

card content

Card

card content

card content

<template>
  <b-space direction="vertical">
    <b-card width="480px" head-tip header="Card">
      <p>card content</p>
      <p>card content</p>
    </b-card>
    <b-card width="480px" head-tip header="Card">
      <p>card content</p>
      <p>card content</p>
    </b-card>
  </b-space>
</template>
<template>
  <b-space direction="vertical">
    <b-card width="480px" head-tip header="Card">
      <p>card content</p>
      <p>card content</p>
    </b-card>
    <b-card width="480px" head-tip header="Card">
      <p>card content</p>
      <p>card content</p>
    </b-card>
  </b-space>
</template>

间距大小 ​

space 
<template>
  <b-space direction="vertical" alignment="start" :size="30">
    <b-radio-group v-model="size" type="capsule">
      <b-radio :label="'mini'">迷你</b-radio>
      <b-radio :label="'small'">小</b-radio>
      <b-radio :label="'default'">默认</b-radio>
      <b-radio :label="'large'">大号</b-radio>
    </b-radio-group>

    <b-space :size="size">
      space
      <b-button type="primary">Button</b-button>
      <b-button icon="upload">Button</b-button>
      <b-button type="danger">Delete</b-button>
    </b-space>
  </b-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const size = ref('default')
</script>
<template>
  <b-space direction="vertical" alignment="start" :size="30">
    <b-radio-group v-model="size" type="capsule">
      <b-radio :label="'mini'">迷你</b-radio>
      <b-radio :label="'small'">小</b-radio>
      <b-radio :label="'default'">默认</b-radio>
      <b-radio :label="'large'">大号</b-radio>
    </b-radio-group>

    <b-space :size="size">
      space
      <b-button type="primary">Button</b-button>
      <b-button icon="upload">Button</b-button>
      <b-button type="danger">Delete</b-button>
    </b-space>
  </b-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const size = ref('default')
</script>

任意数字大小 ​

Card name
List item 1
List item 2
List item 3
List item 4
Card name
List item 1
List item 2
List item 3
List item 4
Card name
List item 1
List item 2
List item 3
List item 4
<template>
  <b-space direction="vertical" alignment="start" :size="30">
    <b-radio-group v-model="size" type="capsule">
      <b-radio :label="8">8</b-radio>
      <b-radio :label="16">16</b-radio>
      <b-radio :label="24">24</b-radio>
      <b-radio :label="32">32</b-radio>
      <b-radio :label="40">40</b-radio>
    </b-radio-group>

    <b-space wrap :size="size">
      <b-card v-for="i in 3" :key="i" class="box-card" style="width: 250px">
        <template #header>
          <div class="card-header">
            <span>Card name</span>
            <b-button type="text">Operation button</b-button>
          </div>
        </template>
        <div v-for="o in 4" :key="o" class="text item">
          {{ 'List item ' + o }}
        </div>
      </b-card>
    </b-space>
  </b-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const size = ref(16)
</script>
<template>
  <b-space direction="vertical" alignment="start" :size="30">
    <b-radio-group v-model="size" type="capsule">
      <b-radio :label="8">8</b-radio>
      <b-radio :label="16">16</b-radio>
      <b-radio :label="24">24</b-radio>
      <b-radio :label="32">32</b-radio>
      <b-radio :label="40">40</b-radio>
    </b-radio-group>

    <b-space wrap :size="size">
      <b-card v-for="i in 3" :key="i" class="box-card" style="width: 250px">
        <template #header>
          <div class="card-header">
            <span>Card name</span>
            <b-button type="text">Operation button</b-button>
          </div>
        </template>
        <div v-for="o in 4" :key="o" class="text item">
          {{ 'List item ' + o }}
        </div>
      </b-card>
    </b-space>
  </b-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const size = ref(16)
</script>

换行 ​

<template>
  <b-space wrap>
    <div v-for="i in 20" :key="i">
      <b-button type="text">文字按钮</b-button>
    </div>
  </b-space>
</template>
<template>
  <b-space wrap>
    <div v-for="i in 20" :key="i">
      <b-button type="text">文字按钮</b-button>
    </div>
  </b-space>
</template>

分隔符 ​

|
|


>-<
>-<
<template>
  <b-space :size="size" spacer="|">
    <div v-for="i in 3" :key="i">
      <b-button>button {{ i }}</b-button>
    </div>
  </b-space>
  <br />
  <br />
  <b-space :size="size" :spacer="spacer">
    <div v-for="i in 3" :key="i">
      <b-button>button {{ i }}</b-button>
    </div>
  </b-space>
</template>

<script setup lang="ts">
import { h, ref } from 'vue'

const size = ref(10)
const spacer = h('span', { style: { color: '#999' } }, '>-<')
</script>
<template>
  <b-space :size="size" spacer="|">
    <div v-for="i in 3" :key="i">
      <b-button>button {{ i }}</b-button>
    </div>
  </b-space>
  <br />
  <br />
  <b-space :size="size" :spacer="spacer">
    <div v-for="i in 3" :key="i">
      <b-button>button {{ i }}</b-button>
    </div>
  </b-space>
</template>

<script setup lang="ts">
import { h, ref } from 'vue'

const size = ref(10)
const spacer = h('span', { style: { color: '#999' } }, '>-<')
</script>

对齐方式 ​

设置该值可以调整所有子节点在容器内的对齐方式, 可设置的值与 align-items 一致

string
header
body
string
header
body
string
header
body 
<template>
  <b-space>
    <div style="width: 240px; margin-bottom: 20px; padding: 8px; border: 1px solid #ccc">
      <b-space>
        string
        <b-button>button</b-button>
        <b-card>
          <template #header>header</template>
          body
        </b-card>
      </b-space>
    </div>
    <div style="width: 240px; margin-bottom: 20px; padding: 8px; border: 1px solid #ccc">
      <b-space alignment="flex-start">
        string
        <b-button>button</b-button>
        <b-card>
          <template #header>header</template>
          body
        </b-card>
      </b-space>
    </div>
    <div style="width: 240px; margin-bottom: 20px; padding: 8px; border: 1px solid #ccc">
      <b-space alignment="flex-end">
        string
        <b-button>button</b-button>
        <b-card>
          <template #header>header</template>
          body
        </b-card>
      </b-space>
    </div>
  </b-space>
</template>
<template>
  <b-space>
    <div style="width: 240px; margin-bottom: 20px; padding: 8px; border: 1px solid #ccc">
      <b-space>
        string
        <b-button>button</b-button>
        <b-card>
          <template #header>header</template>
          body
        </b-card>
      </b-space>
    </div>
    <div style="width: 240px; margin-bottom: 20px; padding: 8px; border: 1px solid #ccc">
      <b-space alignment="flex-start">
        string
        <b-button>button</b-button>
        <b-card>
          <template #header>header</template>
          body
        </b-card>
      </b-space>
    </div>
    <div style="width: 240px; margin-bottom: 20px; padding: 8px; border: 1px solid #ccc">
      <b-space alignment="flex-end">
        string
        <b-button>button</b-button>
        <b-card>
          <template #header>header</template>
          body
        </b-card>
      </b-space>
    </div>
  </b-space>
</template>

Space Props ​

参数说明类型可选值默认值
alignment对齐的方式String-'center'
class类名String / Array<Object | String> / Object--
direction排列的方向Stringvertical/horizontalhorizontal
prefixCls给 space-items 的类名前缀Stringbin-space-
style额外样式String / Array<Object | String> / Object--
spacer间隔符String / Number / VNode--
size间隔大小String / Number / [Number, Number]-'small'
wrap设置是否自动折行Booleantrue / falsefalse

Space Slot ​

name说明
default需要添加间隔的元素

MIT Licensed | Copyright © 2023-present bin-ui-design