基础元素组件

本篇介绍 UI 编辑器 基础元素 分类下的 4 个组件：文本、图片、按钮、模块标题。

移动端 uni-app 设计宽度为 750rpx。若希望组件两侧留白且居中，可在样式 Tab 将宽度设为 720rpx、左边距 15rpx（右侧会自然留出 15rpx）。

基础元素分类下的 4 个组件：文本（xiaoyi-text）、图片（xiaoyi-image）、按钮（xiaoyi-button）、模块标题（xiaoyi-section-title）。适合在首页、发现页、自定义页、圈子页中拼装文案、配图与操作入口。

UI管理 → 页面配置 → 设计 → 基础元素·运营 / UI 编辑人员

移动端宽度与左右留白

灵萌客户端基于 uni-app，移动端设计稿逻辑宽度为 750rpx，编辑器画布预览与真机一致。

只需设置宽度与左边距即可，不必再单独填右边距。适用于卡片、轮播、图片等需要距屏幕边缘一点距离的块级组件。

• 750rpx = 屏幕逻辑全宽
• 若希望组件两侧留空且整体居中：在样式 Tab 将宽度设为 720rpx，左边距设为 15rpx
• 720 + 15 + 15 = 750，即左右各 15rpx 边距

保存 → 启用 → 客户端验证

画布内改完不等于对用户生效，须按顺序完成以下三步。

多区域部署时，列表顶栏「区域筛选」决定配置归属；客户端区域不一致时会出现「保存了但 App 没变化」。

1. 1
   保存顶栏点击「保存」，可选勾选更新列表封面图
2. 2
   启用返回 UI管理 → 页面配置列表，对目标配置点击「启用」
3. 3
   客户端验证App 切换到与编辑时相同的区域，查看真实效果（工具栏预览仅为截图）

通用说明

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

样式与点击动作文档

文本（xiaoyi-text）

在页面上展示一段可自定义样式的文字，支持多行与省略。适用：首页、功能页、自定义页、圈子页 ✅；服务表单 ❌

• 正文推荐字号 26～30 rpx，标题可 32～36 rpx
• 需要整块留白时，优先用样式 → 外边距，不必在文本里打空格
• 服务表单页不提供文本组件，说明类内容请用表单说明（xiaoyi-form-notice）

1. 1
   进入设计界面UI管理 → 页面配置 → 选择区域 → 打开目标页面「设计」
2. 2
   添加组件左侧组件库 → 基础元素 → 文本（xiaoyi-text）
3. 3
   配置属性与样式属性 Tab 填写内容与文字样式；样式 Tab 调整边距与背景
4. 4
   保存并验收顶栏保存 → 列表启用 → App 同区域验证文案与点击动作

什么时候用段落说明、活动规则、免责声明、分区副标题等纯展示文案；需跳转时配点击动作

文本内容页面上显示的文字，支持换行

字号文字大小，单位 rpx；28（正文）、32（小标题）

颜色文字颜色，如 #333333、#999999

字重正常 / 中等 / 粗体

对齐左 / 中 / 右

斜体 / 下划线 / 删除线文字装饰，可多选

行高行间距倍数，如 1.4、1.6

最多行数留空=不限；2 为两行摘要

超出省略超出最多行数时显示省略号

点击动作用户点击文字时的跳转

改了文字 App 没变化未保存或未启用 — 顶栏保存后，在页面列表点「启用」；确认客户端区域与编辑区域一致。

文字挤在一起检查样式 Tab 内外边距；行高建议 1.4～1.6；勿在内容里连续打多个空格。

点击文字无反应未配置点击动作 — 属性 Tab → 点击动作 → 选择跳转目标。

图片（xiaoyi-image）

展示单张图片，支持圆角、头像、预览、角标与遮罩。服务表单请用图片上传（xiaoyi-form-image）。

• Banner 类：样式宽度留空或 750，高度 300～400 rpx
• 点击动作与点击预览互斥：设了跳转就不再放大预览
• 角标文字不宜过长，1～3 个字为宜

1. 1
   添加组件左侧基础元素 → 图片（xiaoyi-image）
2. 2
   选择图片属性 → 图片地址：粘贴链接，或点「选择」从媒体库上传
3. 3
   设置尺寸与交互样式 Tab 设宽度/高度；属性 Tab 配置点击动作或点击预览
4. 4
   保存并验收保存 → 启用 → App 验证图片加载、圆角与点击跳转

什么时候用Banner 头图、活动海报、品牌 Logo、图文混排配图；头像场景可开「圆形头像」

图片地址媒体库选择或粘贴链接

显示模式裁剪填充 / 完整显示 / 宽度撑满 / 拉伸铺满

圆角图片圆角 rpx；0（直角）、16（卡片感）

圆形头像裁成圆形，适合头像；样式宽高建议相同

点击预览点击放大查看（未设跳转时生效）

懒加载长页建议开启

启用遮罩图片上叠加半透明层，活动 banner 可加文字层时使用

遮罩颜色 / 遮罩透明度如黑色 + 0.4

角标文字 / 角标位置 / 角标背景如 HOT、新；右上/左上/右下/左下

点击动作点击优先跳转，不再预览

加载中 / 失败占位网络图建议开启

图片不显示URL 无效或存储未配置 — 优先用媒体库上传；检查系统配置 → 文件存储。

图片被裁切太多显示模式改为「完整显示」或调整样式高度；主体内容尽量居中构图。

保存后线上仍裂图确认图片为公网可访问地址；私有桶需走平台文件服务域名。

按钮（xiaoyi-button）

可点击的操作按钮，支持配色、图标与多种视觉状态。服务表单请用提交按钮/提交底栏。

• 主按钮：深色背景 + 白字 + 圆角 40～50 rpx（胶囊形）
• 宽高、圆角、边框在样式 Tab，不在属性里
• 务必配置点击动作，否则用户点击无响应

1. 1
   添加组件左侧基础元素 → 按钮（xiaoyi-button）
2. 2
   配置内容与跳转填写按钮文字、配色；属性 → 点击动作（必填）
3. 3
   调整样式样式 Tab 设置宽度、高度、圆角、边框
4. 4
   保存并验收保存 → 启用 → App 点击按钮验证跳转是否正确

什么时候用活动报名、查看更多、跳转专题页等明确操作入口；每个按钮须配点击动作

按钮文字如立即参与、查看更多

字号 / 字重 / 文字颜色26～30 rpx；白底按钮用 #000000

背景颜色可透明；黑底白字：#000000 + 白字

边框颜色描边按钮的边框色

点击动作必填，否则按钮无实际作用

图标名 / 图标位置 / 图标大小按钮旁图标；左侧/右侧

镂空透明底、保留边框与文字，次要按钮

禁用预览 / 加载预览仅编辑器内预览，不影响保存

按钮点了没反应未配置点击动作 — 属性 Tab → 点击动作 → 选择页面或外链。

按钮太宽/太窄样式 Tab 调宽度；块级铺满可配合外边距控制左右留白。

服务表单页找不到按钮服务表单页隐藏基础按钮，请用 xiaoyi-form-submit 或 xiaoyi-form-bottom-bar。

模块标题（xiaoyi-section-title）

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

• 对齐设为居中时，右侧更多不会显示
• 标题与下方内容之间：样式 marginBottom 16～24 rpx
• 常与笔记列表、热门圈子等组合：标题在上，内容组件在下

1. 1
   添加组件左侧基础元素 → 模块标题（xiaoyi-section-title）
2. 2
   填写标题与更多填写标题文本；按需加左侧图标/图片；有详情页时开启「更多」并配点击动作
3. 3
   放置位置放在轮播、列表等模块正上方，形成清晰分区
4. 4
   保存并验收保存 → 启用 → App 检查标题对齐与「更多」跳转

什么时候用首页分区标题（热门话题、最新动态等）；下方通常接话题气泡、圈子/笔记列表等数据组件

标题文本如热门圈子、最新动态

字号 / 文字颜色 / 字重 / 对齐40 rpx（默认）、#000000、粗体、左/中/右

图标名 / 或图片标题左侧装饰；图片优先于图标名

图标大小 / 图片圆角 / 与标题间距40 rpx、8、12 rpx

显示更多 / 更多文案有列表详情页时开启；更多、查看全部

更多颜色 / 字号浅灰 #999、字号 24

更多点击动作点击「更多」的跳转

「更多」不显示未开启「显示更多」；或标题对齐设为居中（居中模式隐藏更多入口）。

点了更多没跳转未配置更多点击动作 — 属性 Tab → 更多点击动作。

左侧图标不显示检查图标名是否正确；若填了图片 URL 则图片优先于图标名。

相关文档

布局导航组件