UNPKG

antd-mini

Version:

antd-mini 是支付宝小程序 UI 组件库,遵循 Ant Design 规范。

115 lines (87 loc) 2.57 kB
--- 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 |