Skip to content

Space - Vant 4

Space

Intro

Set the spacing between elements.

Install

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

js
import { createApp } from'vue'; import { Space } from'vant'; const app = createApp(); app.use(Space);

Usage

Basic Usage

html

Vertical

html

Custom Size

html

Alignment

html
js
import { ref } from'vue'; exportdefault { setup() { const align = ref('center'); return { align }; }, };

Auto Wrap

html

API

Props

AttributeDescriptionTypeDefault
directionSpacing direction*verticalhorizontal*
sizeSpacing size, such as 20px``2em. The default unit is px, supports using array to set horizontal and vertical spacing*numberstring
alignSpacing alignment*startend
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:

ts
importtype { SpaceProps, SpaceSize, SpaceAlign } from'vant';

Enterprise-level mobile solution based on Vant