基础元素组件

本篇介绍 UI 编辑器 基础元素 分类下的 4 个组件：文本、图片、按钮、模块标题。它们适合在首页、发现页、自定义页、圈子页中拼装文案、配图与操作入口。

通用说明

除下文「属性」外，所有组件都可在右侧 样式 Tab 调整宽高、内外边距、背景、圆角、边框等。点击跳转请在 点击动作 中配置，详见 样式与点击动作。

---

文本

组件说明： 在页面上展示一段可自定义样式的文字，支持多行与省略。

适用页面

页面类型	是否可用
应用首页、功能页面、自定义页面	✅
社区圈子	✅
服务表单	❌

如何添加

1. 进入 UI管理 → 页面配置，打开目标页面的 设计 界面
2. 左侧组件库展开 基础元素
3. 点击 文本，组件会插入画布并自动选中
4. 在右侧 属性 Tab 填写内容与文字样式；样式 Tab 调整边距与背景

属性配置

属性名	说明	常用值/示例
文本内容	页面上显示的文字，支持换行	欢迎来到灵萌、活动规则说明…
字号	文字大小，单位 rpx	28（正文）、32（小标题）
颜色	文字颜色	#333333、#999999
字重	粗细	正常 / 中等 / 粗体
对齐	水平对齐	左 / 中 / 右
斜体 / 下划线 / 删除线	文字装饰，可多选	按需开启
行高	行间距倍数	1.4、1.6
最多行数	限制显示行数，超出配合省略	留空=不限；2（两行摘要）
超出省略	超出「最多行数」时显示省略号	开启
点击动作	用户点击文字时的跳转	跳转页面、打开链接等

样式建议

• 正文推荐字号 26～30 rpx，标题可 32～36 rpx
• 长说明配合 最多行数 + 超出省略，避免撑破布局
• 边距、背景色请在 样式 Tab 设置，属性面板底部有提示

使用技巧 / 注意事项

• 需要整块留白时，优先用 样式 → 外边距，不必在文本里打空格
• 设置了 点击动作 后，文字区域可点击跳转
• 服务表单页不提供文本组件，说明类内容请用表单内的 表单说明 组件

---

图片

组件说明： 展示单张图片，支持圆角、头像、预览、角标与遮罩。

适用页面

页面类型	是否可用
应用首页、功能页面、自定义页面	✅
社区圈子	✅
服务表单	❌（请用 图片上传 表单组件）

如何添加

1. 左侧 基础元素 → 图片
2. 在 图片地址 处粘贴链接，或点 选择 从媒体库上传
3. 在 样式 Tab 设置宽度；高度留空时可按图片比例自适应

属性配置

属性名	说明	常用值/示例
图片地址	图片 URL	媒体库选择或粘贴链接
显示模式	图片在框内的填充方式	裁剪填充 / 完整显示 / 宽度撑满 / 拉伸铺满
圆角	图片圆角，rpx	0（直角）、16（卡片感）
圆形头像	裁成圆形，适合头像	开启；样式宽高建议相同
点击预览	点击放大查看	开启（未设跳转时生效）
懒加载	滚动到附近再加载	长页建议开启
渐显	加载完成后淡入	按需
启用遮罩	图片上叠加半透明层	活动 banner 可加文字层时使用
遮罩颜色 / 遮罩透明度	遮罩样式	黑色 + 0.4
角标文字	角上小标签	HOT、新
角标位置	角标所在角落	右上 / 左上 / 右下 / 左下
角标背景	角标底色	品牌色
点击动作	点击优先跳转，不再预览	活动页、商品详情等
加载中 / 失败占位 / 失败角标	加载与出错时的展示	网络图建议开启
失败文字	加载失败提示文案	加载失败

样式建议

• Banner 类图片：样式 宽度 留空或 750，高度 设 300～400 rpx
• 头像：圆形头像 开启，宽高各 80～120 rpx
• 高度填 auto 时，会自动按宽度撑满模式适配比例

使用技巧 / 注意事项

• 点击动作 与 点击预览 互斥：设了跳转就不再放大预览
• 大图建议压缩后上传，并开启 懒加载
• 角标文字不宜过长，1～3 个字为宜

---

按钮

组件说明： 可点击的操作按钮，支持配色、图标与多种视觉状态。

适用页面

页面类型	是否可用
应用首页、功能页面、自定义页面	✅
社区圈子	✅
服务表单	❌（请用 提交按钮 / 提交底栏）

如何添加

1. 左侧 基础元素 → 按钮
2. 填写 按钮文字，配置颜色与 点击动作
3. 在 样式 Tab 设置宽度、高度、圆角、边框

属性配置

属性名	说明	常用值/示例
按钮文字	按钮上显示的文字	立即参与、查看更多
字号	文字大小，rpx	26～30
字重	文字粗细	正常 / 中等 / 粗体
文字颜色	按钮文字色	白底按钮用 #000000
背景颜色	按钮背景，可透明	黑底白字：#000000 + 白字
边框颜色	描边按钮的边框色	白底黑边：#000000
点击动作	点击后跳转或触发行为	必填，否则按钮无实际作用
图标名	按钮旁图标	点 选择 挑选；如加号、箭头
图标位置	图标在文字哪侧	左侧 / 右侧
图标大小	图标尺寸，rpx	留空随字号；32
镂空	透明底、保留边框与文字	次要按钮
禁用预览	编辑器内预览禁用态	仅预览，不影响保存
加载预览	编辑器内预览加载态	仅预览

样式建议

• 主按钮：深色背景 + 白字 + 圆角 40～50 rpx（胶囊形）
• 次要按钮：镂空 + 细边框
• 全宽按钮：样式宽度留空，左右 margin 各 24 rpx

使用技巧 / 注意事项

• 默认风格为 黑底白字；描边样式可设白底 + 黑边框
• 宽高、圆角、边框在 样式 Tab，不在属性里
• 禁用预览 / 加载预览 只影响编辑器展示，客户端以实际业务为准
• 务必配置 点击动作，否则用户点击无响应

---

模块标题

组件说明： 带可选图标与「更多」入口的分区标题，用于划分首页模块。

适用页面

页面类型	是否可用
应用首页、功能页面、自定义页面	✅
社区圈子	✅
服务表单	❌

如何添加

1. 左侧 基础元素 → 模块标题
2. 填写 标题文本，按需加左侧图标与 更多
3. 放在轮播、列表等模块上方，形成清晰分区

属性配置

属性名	说明	常用值/示例
标题文本	模块名称	热门圈子、最新动态
字号	标题大小，rpx	40（默认）、36（紧凑）
文字颜色	标题颜色	#000000
字重	标题粗细	粗体
对齐	标题对齐	左 / 中 / 右
图标名	标题左侧字体图标	点 选择；如 star、fire
或图片	标题左侧图片，优先于图标名	品牌小 logo
图标大小	图标或图片边长，rpx	40
图片圆角	仅图片模式生效	8
与标题间距	图标与标题距离，rpx	12
显示更多	右侧是否显示「更多」	有列表详情页时开启
更多文案	右侧文字	更多、查看全部
更多颜色 / 字号	「更多」样式	浅灰 #999、字号 24
更多点击动作	点击「更多」的跳转	列表页、专题页等

样式建议

• 标题与下方内容之间：样式 marginBottom 16～24 rpx
• 长首页每个运营区块前放一条模块标题，层次更清晰
• 左对齐 + 左侧小图标，是常见首页排版

使用技巧 / 注意事项

• 对齐设为居中 时，右侧 更多 不会显示
• 若同时填了 图标名 和 图片，图片优先
• 边距、背景请在 样式 Tab 配置
• 常与 笔记列表、热门圈子 等组合：标题在上，内容组件在下

---

下一步

继续阅读 布局导航组件 — 轮播图、金刚区、搜索栏、筛选标签等。