UI主题可视化——轻松实现个性化主题编辑

栏目:云苍穹知识作者:金蝶来源:金蝶云社区发布:2024-09-23浏览:3

UI主题可视化——轻松实现个性化主题编辑

# 变更记录 | 产品版本 | 更新内容 | 更新日期 | | --- | --- | --- | | V7.0.1 | 支持了主题定制的侧导航上下折叠模式配置功能 | 2024-10-24 | # 导语 ![image.webp](/download/0100d2030930508a43129b15a099684aa2a4.webp) 每个组件都要逐一调整,低效、重复; ![image.webp](/download/0100cae63e9badd6420fa9305da3d134aaee.webp) # 适用版本 金蝶云苍穹BOS_V5.0.011及以上 # 功能速览 【菜单入口】:系统服务云 - 配置工具 - 主题定制 * 主题定制新增了主题可视化配置功能; * 支持编辑系统预制主题 * 支持系统中色彩、图标、表单字段、表格、工具栏、侧导航的可视化编辑; * 实时预览和系统环境预览,所见即所得; ![image.webp](/download/0100bb98c9d727cf4858976991b8e850883e.webp) # 亮点价值 通过主题可视化编辑, * 提升产品UI定制开放能力,满足客户UI个性化需求; * 大幅提升主题定制的易用性,降低用户使用成本; * 无需代码,降低用户学习成本,提升操作效率; * 可视化配置,所见即所得,提升用户体验; # 界面效果 ![image.webp](/download/0100f0b660ec68ef4034b32eeb2b71854e47.webp) 自定义主题颜色 ![image.webp](/download/01003c4ead9de7644776b6bf10f0ac75c617.webp) 表单字段左右布局风格 ![image.webp](/download/0100671c861aebcb4ae4903db676563386bb.webp) 表单字段上下布局风格 ![image.webp](/download/010070a4d55bfd12415d83df6d33f4952e45.webp) 表格紧凑行高风格 ![image.webp](/download/010026525726e08347eaa68a6fbe8ba6bd43.webp) 表格竖分割线风格 ![11.webp](/download/0100aa353ac1af1b4e07ba979aaa1d8a5862.webp) 侧导航 - 弹出式 ![12.webp](/download/010082f180f7649742dfa2c72714e40a7c3b.webp) 侧导航 - 内嵌式 # 操作指引 Step1:进入系统服务>>配置工具>>主题定制 下的管理表格 ![image.webp](/download/01009cb993d608dd460da6740bb96a69b718.webp) Step2:点击新增可以新增一个自定义主题,在工具栏可以对主题进行修改、设置为默认主题、删除等操作; ![image.webp](/download/0100157bf6b57b0d4d3c8538e3fab5764fdf.webp) Step3:在主题定制界面,对色彩、图标、字段、表格、工具栏、侧导航等进行配置; ![image.webp](/download/0100f766965c342441e8910fe90aa933d7b3.webp) Step4:在个人中心切换想要的主题即可实现主体切换 ![image.webp](/download/01003212818146a344b298c758a226eed804.webp) 下面我们演示自定义色彩和自定义表格; ## 自定义色彩 在色彩菜单下,可以设置主题色、中性悬停色、状态色; ![ef3.webp](/download/0100e6f03bb1c20c4892bdf357b6cd878855.webp) 点击下拉按钮,可以选择预置的颜色,同时支持色号录入; ![ee0.webp](/download/01007c5b14c103fc432283fc06e8b65915ed.webp) 调整颜色后在右侧会直接查看调整后的色彩样式; ## 自定义表格 在表格设置面板,支持对表格的分割线、斑马纹、选中色、表头高度、行高、翻页器和列宽模式进行设置; 设置分割线; ![ef8.webp](/download/010084f14d5c4c854cc09a05640e1276a45b.webp) 自定义斑马纹的颜色; ![09.webp](/download/0100b52477c27fb14a23b7d52dee8fcc22c3.webp) 行高设置; ![f0e.webp](/download/010092681567ee5640f589df53d405573714.webp) 您可以根据自己的需求设置个性化的表格样式; # 常见问题 Q:主题的生效范围是个人还是全员? A:全员可见,个人切换主题生效对应显示。 Q:主题设置和其他地方的设置优先级是什么规则? A:用户页面级>用户全局级>设计器参数>主题配置>默认参数(生效范围越小优先级越高)

UI主题可视化——轻松实现个性化主题编辑

# 变更记录| 产品版本 | 更新内容 | 更新日期 || --- | --- | --- || V7.0.1 | 支持了主题定制的侧导航上下折叠模式配置功...
点击下载文档
确认删除?
回到顶部
客服QQ
  • 客服QQ点击这里给我发消息