Space 间距

基本用法

间距组件的基本用法。

<template>
  <l-space>
    <l-button>Button 1</l-button>
    <l-button>Button 2</l-button>
    <l-button>Button 3</l-button>
  </l-space>
</template>

垂直间距

可以设置竖直方向排列的间距。

<template>
  <l-space direction="vertical">
    <l-button>Button 1</l-button>
    <l-button>Button 2</l-button>
    <l-button>Button 3</l-button>
  </l-space>
</template>

尺寸

内置 4 个尺寸, 可以通过 size 属性设置, mini - 4px 、 small - 8px(默认) 、 medium - 16px 、 large - 24px 。

<template>
  <div>
    <div>
      <l-space size="mini">
        <l-button>Button 1</l-button>
        <l-button>Button 2</l-button>
        <l-button>Button 3</l-button>
      </l-space>
    </div>
    <div>
      <l-space size="small">
        <l-button>Button 1</l-button>
        <l-button>Button 2</l-button>
        <l-button>Button 3</l-button>
      </l-space>
    </div>
    <div>
      <l-space size="medium">
        <l-button>Button 1</l-button>
        <l-button>Button 2</l-button>
        <l-button>Button 3</l-button>
      </l-space>
    </div>
    <div>
      <l-space size="large">
        <l-button>Button 1</l-button>
        <l-button>Button 2</l-button>
        <l-button>Button 3</l-button>
      </l-space>
    </div>
  </div>
</template>

<style scoped>
div {
  margin-bottom: 6px;
}
</style>

对齐

可以设置水平方向的对齐方式, 分别为 start 、 end 、 center 、 baseline , 水平模式下默认为 center 。

<script setup>
import { ref } from "vue";
const align = ref("start");
</script>

<template>
  <div>
    <div style="margin-bottom: 10px;">
      <l-button-group>
        <l-button @click="align = 'start'">start</l-button>
        <l-button @click="align = 'center'">center</l-button>
        <l-button @click="align = 'end'">end</l-button>
        <l-button @click="align = 'baseline'">baseline</l-button>
      </l-button-group>
    </div>
    <l-space :align="align">
      <l-button>Button 1</l-button>
      <div style="height: 100px; background-color: gray">Space</div>
    </l-space>
  </div>
</template>

环绕间距

一般用于换行的场景。

<template>
  <l-space wrap>
    <l-button>Button 1</l-button>
    <l-button>Button 2</l-button>
    <l-button>Button 3</l-button>
    <l-button>Button 4</l-button>
    <l-button>Button 5</l-button>
    <l-button>Button 6</l-button>
    <l-button>Button 7</l-button>
    <l-button>Button 8</l-button>
    <l-button>Button 9</l-button>
    <l-button>Button 10</l-button>
  </l-space>
</template>

Space API

Props

参数	说明	类型	默认值
size	间距大小, 可选值为 mini 、 small 、 medium 、 large	string	small
align	间距对齐方式, 可选值为 start 、 end 、 center 、 baseline	string	center
wrap	是否换行	boolean	false
direction	排列方向, 可选值为 horizontal 、 vertical	string	horizontal