Vant4 Space 間距

介紹

設置元素之間的間距，從 ?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>

自定義間距

通過調(diào)整 ?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>

對齊方式

通過調(diào)整 ?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

Slots

類型定義

組件導出以下類型定義：

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