Vant4 Space 间距

2023-02-16 17:54 更新

介绍

设置元素之间的间距,从 ​v3.6.0​ 版本开始支持。

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册

import { createApp } from 'vue';
import { Space } from 'vant';

const app = createApp();
app.use(Space);

代码演示

基础用法

Space 组件会在各个子组件之间设置一定的间距,默认间距为 ​8px​。

<van-space>
  <van-button type="primary">按钮</van-button>
  <van-button type="primary">按钮</van-button>
  <van-button type="primary">按钮</van-button>
  <van-button type="primary">按钮</van-button>
</van-space>

垂直排列

将 ​direction​ 属性设置为 ​vertical​,可以设置垂直方向排列的间距。

<van-space direction="vertical" fill>
  <van-button type="primary" block>按钮</van-button>
  <van-button type="primary" block>按钮</van-button>
  <van-button type="primary" block>按钮</van-button>
</van-space>

自定义间距

通过调整 ​size​ 的值来控制间距的大小。传入 ​number​ 类型时,会默认使用 ​px​ 单位;也可以传入 ​string​ 类型,比如 ​2rem​ 或 ​5vw​ 等带有单位的值。

<!-- 20px -->
<van-space :size="20">
  <van-button type="primary">按钮</van-button>
  <van-button type="primary">按钮</van-button>
  <van-button type="primary">按钮</van-button>
</van-space>

<!-- 2rem -->
<van-space size="2rem">
  <van-button type="primary">按钮</van-button>
  <van-button type="primary">按钮</van-button>
  <van-button type="primary">按钮</van-button>
</van-space>

对齐方式

通过调整 ​align​ 的值来设置子元素的对齐方式, 可选值为 ​start​, ​center​ ,​end​ ,​baseline​,在水平模式下的默认值为 ​center​。

<van-radio-group
  v-model="align"
  direction="horizontal"
  style="margin-bottom: 16px"
>
  <van-radio name="start">start</van-radio>
  <van-radio name="center">center</van-radio>
  <van-radio name="end">end</van-radio>
  <van-radio name="baseline">baseline</van-radio>
</van-radio-group>

<van-space :align="align" style="padding: 16px; background: #f3f2f5">
  <van-button type="primary">{{ align }}</van-button>
  <div style="padding: 40px 20px; background: #fff">Block</div>
</van-space>
import { ref } from 'vue';

export default {
  setup() {
    const align = ref('center');
    return { align };
  },
};

自动换行

在水平模式下, 通过 ​wrap​ 属性来控制子元素是否自动换行。

<van-space wrap>
  <van-button type="primary" block>按钮</van-button>
  <van-button type="primary" block>按钮</van-button>
  <van-button type="primary" block>按钮</van-button>
  <van-button type="primary" block>按钮</van-button>
  <van-button type="primary" block>按钮</van-button>
  <van-button type="primary" block>按钮</van-button>
  <van-button type="primary" block>按钮</van-button>
  <van-button type="primary" block>按钮</van-button>
</van-space>

API

Props

参数 说明 类型 默认值
direction 间距方向 vertical | horizontal horizontal
size 间距大小,如 20px 2em,默认单位为 px,支持数组形式来分别设置横向和纵向间距 number | string | number[] | string[] 8px
align 设置子元素的对齐方式 start | end | center | baseline -
wrap 是否自动换行,仅适用于水平方向排列 boolean false
fill 是否让 Space 变为一个块级元素,填充整个父元素 boolean false

Slots

名称 说明
default 间距组件内容

类型定义

组件导出以下类型定义:

import type { SpaceProps, SpaceSize, SpaceAlign } from 'vant';


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号