间距
TuniaoUI 提供 10 级间距体系，通过 baseStyle 直接访问，保证组件间距的统一性。
间距预览
间距体系
| 属性名 | 值（vp） | 用途示例 |
|---|---|---|
spaceMini | 2 | 极小间隙 |
spaceBase | 4 | 图标与文字间距、基础间隙 |
spaceXs | 5 | 微小间距 |
spaceXsm | 8 | 输入框内边距、Flex 间距 |
spaceSm | 10 | 中小间距 |
spaceMd | 12 | 工具栏按钮内边距(上下)、Flex wrap 间距 |
space | 15 | 默认间距 |
spaceMlg | 16 | 工具栏按钮内边距(左右) |
spaceLg | 20 | 弹窗底部内边距 |
spaceXl | 25 | 大间距 |
使用方式
直接访问 baseStyle
typescript
// 内边距
.padding({ left: this.baseStyle.spaceXsm, right: this.baseStyle.spaceXsm })
// Row / Column 间距
Row({ space: this.baseStyle.spaceMd })
Column({ space: this.baseStyle.spaceBase })Flex 场景使用 SPACE 枚举
在 LengthMetrics.vp() 需要数值的场景中，使用 SPACE 枚举替代硬编码：
typescript
import { SPACE } from "@tuniao/tn-ui/theme-chalk/space";
Flex({
wrap: FlexWrap.Wrap,
space: {
main: LengthMetrics.vp(SPACE.MD),
cross: LengthMetrics.vp(SPACE.MD),
},
})SPACE 枚举值
| 枚举 | 值 | 对应 baseStyle |
|---|---|---|
SPACE.MINI | 2 | spaceMini |
SPACE.BASE | 4 | spaceBase |
SPACE.XS | 5 | spaceXs |
SPACE.XSM | 8 | spaceXsm |
SPACE.SM | 10 | spaceSm |
SPACE.MD | 12 | spaceMd |
SPACE.DEFAULT | 15 | space |
SPACE.MLG | 16 | spaceMlg |
SPACE.LG | 20 | spaceLg |
SPACE.XL | 25 | spaceXl |