UniApp 组件 · 实验
UGSpace 间距
控制子元素方向、对齐、换行和间距的轻量布局组件。
组件预览
以下画面来自同一组件源码的 H5 构建，用于检查内容、状态和主题；MP-WEIXIN 最终外观仍以开发者工具和真机为准。
使用方式
配置 easycom 后直接使用 <ug-space>，无需在页面脚本中导入组件。
vue
<template>
<ug-space direction="vertical" size="lg" align="stretch" block>
<ug-text weight="semibold">账号设置</ug-text>
<ug-input label="昵称" />
<ug-button block>保存设置</ug-button>
</ug-space>
</template>
easycom 公开入口：@ug666/ui-uniapp/components/ug-space/ug-space.vue
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| direction | 'horizontal' | 'vertical' | 'horizontal' | 子项排列方向。 |
| size | 'sm' | 'md' | 'lg' | string | number | 'md' | 间距预设；数字按 rpx 处理。 |
| align | 'start' | 'center' | 'end' | 'stretch' | 'center' | 交叉轴对齐方式。 |
| wrap | boolean | false | 横向排列时是否换行。 |
| block | boolean | false | 是否占满父容器宽度。 |
事件
当前组件没有公开事件。
注意事项
- Space 只处理排列和间距，不承担 Card 或业务容器语义。
- 自定义字符串应使用目标平台支持的 rpx 或 px 值。
平台边界
总览中的画面来自同一组件源码的 H5 构建，只用于辅助浏览；小程序真实外观仍以 Demo 在微信开发者工具和真机中的结果为准。
MP-WEIXIN 已编译
开发者工具与真机待验证