间距
用于控制组件之间的间隔,提升页面的整洁性和可读性。
- 避免组件紧贴在一起,统一拉开空间。
- 适合行内元素的水平间距控制。
- 支持多种水平对齐方式。
一、属性
1. 外观
1)垂直对齐
提供四种垂直对齐方式,默认为「上」。
对齐方式 | 描述 | 示例图 |
---|---|---|
上 | 组件在 y 轴上靠顶部排列 | |
中 | 组件在 y 轴上居中排列 | |
下 | 组件在 y 轴上靠底部排列 | |
基线 | 组件文本底部(基线)对齐,保持视觉整齐 |
配置界面示意:
2)排列方式
提供「水平」和「垂直」两种排列方式,默认是水平排列。
-
水平排列:组件从左到右排列
-
垂直排列:组件从上到下排列
配置界面示意:
3)间距大小
通过输入数值设置组件之间的间距,单位为 px,默认值为 8
。
- 示例:设置间距为 30px
配置界面示意:
4)自动换行
- 默认关闭。
- 开启后:当组件总宽度超出间距容器宽度时,自动换行显示。
示意图:
- 关闭状态
- 开启状态
5)隐藏
- 默认关闭。
- 开启后:组件仍在页面结构中,但不显示。
配置示意:
二、样式
无特殊样式配置,详见 通用样式。
三、常见使用场景
1. 表单项
在表单中,为输入框、标签等组件提供一致的间距。
下图中在一个表单中放置了间距组件,包含两个表单项,常用于网站头部登录区域。
2. 容器类组件
在卡片或列表容器中,使用多个间距组件分隔标题与内容,并可设置不同对齐方式。
3. 按钮组
为一组按钮设置统一间隔,使界面整洁。