import{o as a,a as n,y as t}from"./vue-libs.b44bc779.js";const l={class:"van-doc-markdown-body"},p=t(`

Space

Intro

Set the spacing between elements, requires vant >= v3.6.0.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

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

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

Usage

Basic Usage

<van-space>
  <van-button type="primary">Button</van-button>
  <van-button type="primary">Button</van-button>
  <van-button type="primary">Button</van-button>
  <van-button type="primary">Button</van-button>
</van-space>

Vertical

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

Custom Size

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

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

Alignment

<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 };
  },
};

Auto Wrap

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

API

Props

AttributeDescriptionTypeDefault
directionSpacing directionvertical | horizontalhorizontal
sizeSpacing size, such as 20px 2em. The default unit is px, supports using array to set horizontal and vertical spacingnumber | string | number[] | string[]8px
alignSpacing alignmentstart | end | center | baseline-
wrapWhether to wrap automatically, only for horizontal alignmentbooleanfalse
fillWhether to render Space as a block element and fill the parent elementbooleanfalse

Slots

NameDescription
defaultDefault slot

Types

The component exports the following type definitions:

import type { SpaceProps, SpaceSize, SpaceAlign } from 'vant';
`,13),c=[p],g={__name:"README",setup(e,{expose:s}){return s({frontmatter:{}}),(h,r)=>(a(),n("div",l,c))}};export{g as default};