141 lines
3.8 KiB
Markdown
141 lines
3.8 KiB
Markdown
# Space 间距
|
|
|
|
### 介绍
|
|
|
|
设置元素之间的间距。
|
|
|
|
### 引入
|
|
|
|
通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。
|
|
|
|
```js
|
|
import { createApp } from 'vue';
|
|
import { Space } from 'vant';
|
|
|
|
const app = createApp();
|
|
app.use(Space);
|
|
```
|
|
|
|
## 代码演示
|
|
|
|
### 基础用法
|
|
|
|
Space 组件会在各个子组件之间设置一定的间距，默认间距为 `8px`。
|
|
|
|
```html
|
|
<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`，可以设置垂直方向排列的间距。
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
### 自定义间距
|
|
|
|
通过调整 `size` 的值来控制间距的大小。传入 `number` 类型时，会默认使用 `px` 单位；也可以传入 `string` 类型，比如 `2rem` 或 `5vw` 等带有单位的值。
|
|
|
|
```html
|
|
<!-- 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>
|
|
```
|
|
|
|
### 对齐方式
|
|
|
|
通过调整 `align` 的值来设置子元素的对齐方式, 可选值为 `start`, `center` ,`end` ,`baseline`，在水平模式下的默认值为 `center`。
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
```js
|
|
import { ref } from 'vue';
|
|
|
|
export default {
|
|
setup() {
|
|
const align = ref('center');
|
|
return { align };
|
|
},
|
|
};
|
|
```
|
|
|
|
### 自动换行
|
|
|
|
在水平模式下, 通过 `wrap` 属性来控制子元素是否自动换行。
|
|
|
|
```html
|
|
<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
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
| --- | --- | --- | --- |
|
|
| direction | 间距方向 | _vertical \| horizontal_ | `horizontal` |
|
|
| size | 间距大小，如 `20px` `2em`，默认单位为 `px`，支持数组形式来分别设置横向和纵向间距 | _number \| string \| number[] \| string[]_ | `8px` |
|
|
| align | 设置子元素的对齐方式 | _start \| end \| center \| baseline_ | - |
|
|
| wrap | 是否自动换行，仅适用于水平方向排列 | _boolean_ | `false` |
|
|
| fill | 是否让 Space 变为一个块级元素，填充整个父元素 | _boolean_ | `false` |
|
|
|
|
### Slots
|
|
|
|
| 名称 | 说明 |
|
|
| ------- | ------------ |
|
|
| default | 间距组件内容 |
|
|
|
|
### 类型定义
|
|
|
|
组件导出以下类型定义：
|
|
|
|
```ts
|
|
import type { SpaceProps, SpaceSize, SpaceAlign } from 'vant';
|
|
```
|