65 lines
2.2 KiB
Markdown
65 lines
2.2 KiB
Markdown
|
---
|
|||
|
|
name: arco-vue-space
|
|||
|
|
description: "Arco Design Vue 间距 Space 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-space>`、属性、事件、插槽、示例和实现细节。"
|
|||
|
|
user-invocable: false
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 间距 Space
|
|||
|
|
|
|||
|
|
## 简介
|
|||
|
|
|
|||
|
|
间距组件的基本用法。
|
|||
|
|
|
|||
|
|
## 基本用法
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<template>
|
|||
|
|
<a-space>
|
|||
|
|
<a-typography-text>Space:</a-typography-text>
|
|||
|
|
<a-tag v-if="false" color='arcoblue'>Tag</a-tag>
|
|||
|
|
<a-button type="primary">Item1</a-button>
|
|||
|
|
<a-button type="primary">Item2</a-button>
|
|||
|
|
<a-switch defaultChecked />
|
|||
|
|
</a-space>
|
|||
|
|
</template>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## API
|
|||
|
|
|
|||
|
|
### `<space>` 属性
|
|||
|
|
|
|||
|
|
|参数名|描述|类型|默认值|版本|
|
|||
|
|
|---|---|---|:---:|:---|
|
|||
|
|
|align|对齐方式|`'start' \| 'end' \| 'center' \| 'baseline'`|`-`||
|
|||
|
|
|direction|间距方向|`'vertical' \| 'horizontal'`|`'horizontal'`||
|
|||
|
|
|size|间距大小，支持分别制定横向和竖向的间距|`number \| 'mini' \| 'small' \| 'medium' \| 'large' \| [SpaceSize, SpaceSize]`|`'small'`||
|
|||
|
|
|wrap|环绕类型的间距，用于折行的场景。|`boolean`|`false`||
|
|||
|
|
|fill|充满整行|`boolean`|`false`|2.11.0|
|
|||
|
|
|
|||
|
|
### `<space>` 插槽
|
|||
|
|
|
|||
|
|
|插槽名|描述|参数|
|
|||
|
|
|---|:---:|---|
|
|||
|
|
|split|设置分隔符|-|
|
|||
|
|
|
|||
|
|
### 类型定义
|
|||
|
|
```ts
|
|||
|
|
type SpaceSize = number | 'mini' | 'small' | 'medium' | 'large';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 常用模式
|
|||
|
|
|
|||
|
|
- **垂直间距**：可以设置垂直方向排列的间距。
|
|||
|
|
- **尺寸**：内置 4 个尺寸，`mini - 4px` `small - 8px (默认)` `medium - 16px` `large - 24px`，也支持传数字来自定义尺寸。
|
|||
|
|
- **对齐**：内置 4 种对齐方式，分别为 `start` `center` `end` `baseline`，在水平模式下默认为 `center`。
|
|||
|
|
- **环绕间距**：环绕类型的间距，四周都有间距，一般用于换行的场景。
|
|||
|
|
- **分隔符**：为相邻子元素设置分隔符。
|
|||
|
|
|
|||
|
|
## 最佳实践
|
|||
|
|
|
|||
|
|
- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
|
|||
|
|
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
|
|||
|
|
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
|
|||
|
|
- 布局组件只处理结构和间距，不在其中承载业务状态。
|
|||
|
|
- 响应式页面优先组合 `a-grid`、`a-row`、`a-col` 和 `a-space`。
|