antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库,遵循 Ant Design 规范。
115 lines (87 loc) • 2.57 kB
Markdown
---
nav:
path: /components
group:
title: Layout
order: 1
toc: 'content'
---
# Space
Set the spacing between components.
## When to use
Avoid components sticking together and create uniform spacing.
- Suitable for horizontal spacing of inline elements.
- Various horizontal alignment methods can be set.
## Introduction
In `index.json` Introducing Components in
```json
"usingComponents": {
#if ALIPAY
"ant-space": "antd-mini/es/Space/index"
#endif
#if WECHAT
"ant-space": "antd-mini/Space/index"
#endif
}
```
## Code Sample
### Basic use
```xml
<ant-space>
<ant-button type="primary">Button 1</ant-button>
<ant-button>Button 2</ant-button>
<ant-button>Button 3</ant-button>
</ant-space>
```
### Vertical Space
```xml
<ant-space direction="vertical">
<ant-button type="primary">Button 1</ant-button>
<ant-button>Button 2</ant-button>
<ant-button>Button 3</ant-button>
</ant-space>
```
### Space Size
```xml
<ant-space size="small">
<ant-button type="primary">Button 1</ant-button>
<ant-button>Button 2</ant-button>
<ant-button>Button 3</ant-button>
</ant-space>
```
### Alignment
```xml
<ant-space align="start">
<ant-button type="primary">Button 1</ant-button>
<view class="custom-box">Content with different height</view>
<ant-button>Button 3</ant-button>
</ant-space>
```
### Auto Wrap
```xml
<ant-space wrap>
<ant-button type="primary">Button 1</ant-button>
<ant-button>Button 2</ant-button>
<ant-button>Button 3</ant-button>
<ant-button>Button 4</ant-button>
<ant-button>Button 5</ant-button>
</ant-space>
```
### Demo Code
<code src='../../demo/pages/Space/index'></code>
## API
| Property | Description | Type | Default Value |
| --- | --- | --- | --- |
| direction | Space direction | `'horizontal'` \| `'vertical'` | `'horizontal'` |
| size | Space size | `'small'` \| `'middle'` \| `'large'` \| `number` | `'middle'` |
| align | Alignment | `'start'` \| `'end'` \| `'center'` \| `'baseline'` | `'center'` |
| justify | Main axis alignment | `'start'` \| `'end'` \| `'center'` \| `'space-around'` \| `'space-between'` | `'start'` |
| wrap | Whether to automatically wrap | `boolean` | `false` |
| className | Custom class name | `string` | - |
| style | Custom style | `string` | - |
### Theme customization
#### Style Variables
Component provides the following CSS variables, which can be used to customize styles. For details, see ConfigProvider Components.
| Variable name | Default Value | Dark Mode Default | Remarks |
| --- | --- | --- | --- |
| --space-gap | 8px | 8px | Space size |