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
| Attribute | Description | Type | Default |
|---|---|---|---|
| direction | Spacing direction | *vertical | horizontal* |
| size | Spacing size, such as 20px``2em. The default unit is px, supports using array to set horizontal and vertical spacing | *number | string |
| align | Spacing alignment | *start | end |
| wrap | Whether to wrap automatically, only for horizontal alignment | boolean | false |
| fill | Whether to render Space as a block element and fill the parent element | boolean | false |
Slots
| Name | Description |
|---|---|
| default | Default slot |
Types
The component exports the following type definitions:
ts
importtype { SpaceProps, SpaceSize, SpaceAlign } from'vant';