/*! For license information please see 692.8ac53ad0.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["692"],{31722:function(s,a,n){"use strict";n.r(a);var t=n("80681");let l=["innerHTML"];a.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Space

\n

Intro

\n

Set the spacing between elements.

\n

Install

\n

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

\n
import { createApp } from 'vue';\nimport { Space } from 'vant';\n\nconst app = createApp();\napp.use(Space);\n
\n

Usage

\n

Basic Usage

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

Vertical

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

Custom Size

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

Alignment

\n
<van-radio-group\n  v-model="align"\n  direction="horizontal"\n  style="margin-bottom: 16px"\n>\n  <van-radio name="start">start</van-radio>\n  <van-radio name="center">center</van-radio>\n  <van-radio name="end">end</van-radio>\n  <van-radio name="baseline">baseline</van-radio>\n</van-radio-group>\n\n<van-space :align="align" style="padding: 16px; background: #f3f2f5">\n  <van-button type="primary">{{ align }}</van-button>\n  <div style="padding: 40px 20px; background: #fff">Block</div>\n</van-space>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const align = ref('center');\n    return { align };\n  },\n};\n
\n

Auto Wrap

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

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
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
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
defaultDefault slot
\n

Types

\n

The component exports the following type definitions:

\n
import type { SpaceProps, SpaceSize, SpaceAlign } from 'vant';\n
\n
'},null,8,l))}}}]);