低代码如何自定义主题?一文教会你

news2025/1/12 8:46:45

SuccAP低代码开发平台,除了提供了多主题供选择外,还支持自定义报表主题,当系统自带的主题无法满足项目需求时,可以根据项目设计并新增主题,本文将介绍如何去新增自定义主题。

新增自定义主题可按如下步骤操作:

  1. 确定主题规范:当确定了主题的主色调之后,还需要设计师去设计相关的配色,并产出主题规范
  2. 新增主题文件:通过复制或导入的方式,新增主题文件
  3. 修改主题色板和风格:根据设计师提供的主题规范,对主题进行自定义配置
  4. 更新缩略图:替换thumbnail.png文件
  5. 测试主题:测试新增的主题,确保颜色、风格无误

检查主题规范文件

设计师需提供主题规范,需要确认包含如下内容:

  1. 主题色板10个颜色
  2. 主题渐变10个颜色
  3. 6个指定的主题颜色:定义单元格边框、冻结行列线、以及输入组件的下拉面板和选中高亮的颜色
  4. 4组色阶(不限于4组)
  5. 单元格风格:大标题、行(列)标题_一级标题、表头(尾)、行(列)标题_二级标题、小计、合计(1)、合计(2)、解释性文字、链接单元格、注释。这些是归纳了常见的场景后做成的内置风格,覆盖了报表大多数应用场景

点击此处下载报表主题规范原图 (opens new window)(提取码:SuccBI)

新增主题

新增主题有两种方式,复制已有的主题或直接导入新的主题文件。

说明
若想制作 系统主题则将主题文件放在 系统资源项目下,若想制作 项目主题则将主题文件放在 目标项目下。

复制已有主题

  1. 复制主题:在【系统数据】项目里的【资源】-【settings】-【themes】-【rpt】目录下复制一个已有的主题文件
  2. 重命名:修改主题名称和描述,注意这里的主题名称相当于ID,只能用英文

导入新的主题文件

  1. 导入主题文件:在【项目】-【资源】-【settings】-【themes】-【rpt】目录下导入一个报表主题文件,点击此处 (opens new window)下载(提取码:SuccBI)
  2. 重命名:修改主题名称和描述

 

修改主题

报表主题文件目录下包含iconsimagestheme.jsonthumbnail这些内容。

修改报表主题包含两部分内容,分别是修改主题色板和单元格风格:

  • 修改json:如需修改主题的基础色调,即主题色板,需修改主题的theme.json文件
  • 修改单元格风格:单元格风格即通常用到的正文大标题等风格,可以直接在界面上对单元格风格进行更新
说明
报表主题风格相对比较固定,初次确定下来后,如非必要不建议多次进行调整。且同一时间建议只能有一个人修改主题风格,多人同时修改时会相互覆盖,可能导致部分内容丢失,所以建议指定一人维护。

修改json

需要进入主题的json文件中,修改对应位置颜色的十六进制值,需要修改的内容有:

  • 主题色板10个颜色
  • 主题渐变10个颜色
  • 6个指定颜色
  • 4组色阶

具体操作可参考仪表板主题制作。

修改单元格风格

由于复制或导入的主题文件中都已经包含对应的风格,只需修改更新即可。报表主题中内置的单元格风格都需要更新,下面以行(列)标题_二级标题为例来演示如何修改风格,具体操作如下:

  1. 选择主题:在报表中切换到新增的主题
  2. 打开主题规范:打开主题规范文件,找到需要修改的单元格风格,用于取色
  3. 应用风格:选中一个单元格,打开风格列表,找到需要更新的行(列)标题_二级标题,应用风格
  4. 修改风格:在主题规范文件中找到行(列)标题_二级标题对应的填充色、字体颜色以及字体大小,依次修改报表中的对应样式属性
  5. 更新风格:修改完成后,点击风格名称右侧的小三角,下拉选择更新风格
  6. 按照以上操作修改完所有的风格即可

更新缩略图

报表主题缩略图是用来示意当前主题的基础样式,用户可以根据缩略图初步对主题进行筛选使用。更新报表主题缩略图的操作同仪表板-更新缩略图。

测试主题

确认当前主题风格无误

可以制作一张包含所有单元格风格的报表,类似下图,确认单元格的填充字体的样式隔行换色的颜色冻结行列线的颜色单元格边框色等是否与设计稿一致。

 

确认可无障碍切换主题

需切换到其他报表主题测试单元格风格是否异常,有以下几个需要注意的异常点:

  1. 单元格的填充色未发生变化
  2. 字体样式未发生变化或有异常变化
  3. 隔行换色颜色与主题不匹配
  4. 边框颜色与主题边框色不符
  5. 冻结线的颜色未变化或与设置的主题色不符

更多精彩

官网:山川软件

示例DEMO地址:https://demo.succbi.com/

产品文档地址:SuccBI产品文档 | 山川软件产品文档

DEMO体验版下载地址:4.20.x版本发行日志 | 山川软件产品文档

B站视频地址:山川软件的个人空间_哔哩哔哩_Bilibili

CSDN:山川软件的博客_CSDN博客-领域博主

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/76242.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

APS高级计划排程在乳制品行业的应用

目前乳制品行业供应链管理中存在的主要问题 生产盲目性,应对市场变化能力不足。现如今牛奶已经成为人们日常饮食需求的必需品,很多生产厂家就开始大量的生产,全然不顾市场的需求度,应对市场变化的能力不足,导致了有一…

计算机毕业设计ssm+vue基本微信小程序的心理服务平台 uniapp 小程序

项目介绍 随着计算机技术的发展,带来社会各行业的进步,信息化逐渐运用到人们的生活中。传统模式的青少年心理健康管理满足不了现代人的生活追求,服务质量、服务速度,之前的很多网站由于功能、或者框架设计等原因,无法完美的展现它的特色,优势,浪费了很多资源。使用管理系统进行…

今天步行数5000多

今天步行数量比较多的,有五千多步吧,希望明天能继续保持下去。

企业知识分享系统的设计与实现

摘 要 随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,各行各业相继进入信息管理时代&…

两种方案解决vscode浏览器跨域问题

一、 问题 1.1 在接收 json 数据的时候出现了以下错误; 打开测试用的 json 文件发现数据并没有问题,而第一个报错可以看到 Cross origin requests are only supported for protocol schemes:… ,也就是说所使用的数据不在跨域的许…

毕业后5年,我终于变成了月薪13000的软件测试工程师

目录 我为什么选择转行 工作环境 我选择了转行软件测试 写在最后 《软件测试工程师发展规划路线》 一、测试基础 了解测试的基础技能,掌握主流缺陷管理工具的使用,熟练测试环境的操作与运维 二、Linux必备知识 Linux作为现在最流行的软件环境系…

场景案例│数字员工助力医疗行业打通信息系统壁垒,实现高效率运营

据埃森哲研究预测,到2026年人工智能技术每年将为医疗保健行业节省1500亿美元。 随着人们对数字化的需求日益增长,数字技术成为转型升级的新兴力量,许多医疗机构积极采用数字员工推进数字化转型的步伐。 在数字员工的支持下,医疗…

Redis Replication

高可用架构-Redis Replication 今天学习下如何基于Redis 复制功能构建高可用架构-主从复制,Redis Replication 支持数据复制和故障切换。Redis复制是允许Redis实例完全复制主实例的过程。默认情况下,复制是一个异步过程。Redis复制在主机端和副本端都是…

2023最新SSM计算机毕业设计选题大全(附源码+LW)之java毕业设计选题档案管理系统bvr3c

毕业设计其实不难,主要毕业的时候任务太紧了,所以大家都非常忙没有时间去做,毕业设计还是早做准备比较好,多花点时间也可以做出来的,建议还是自己动手去做,比如先选一个题,这样就有方向&#xf…

Flutter实现文件上传华为对象存储(OBS)

本文主要讲述在 Flutter 项目中如何实现将文件上传到华为 OBS(对象存储)中,并封装为三方库方便灵活使用。 背景介绍 在大多项目中都会存在文件上传的需求,之前的实现都是调用后台的文件上传接口将文件上传到服务器上,…

从投资人发现“新大陆”,看“产融星城”为何成?

文丨熔财经 作者|陈小江 “我从来不把《我要投资》节目看作是秀(综艺),要知道《我要投资》是在前面的,秀(综艺)只是一种形式而已。本质上,(参加节目)还是为了投资”。 …

「Redis数据结构」跳跃表(SkipList)

「Redis数据结构」跳跃表(SkipList) 文章目录「Redis数据结构」跳跃表(SkipList)一、概述二、结构跳跃表节点跳跃表三、特点一、概述 跳表(SkipList,全称跳跃表)是用于有序元素序列快速搜索查找…

shell编程二

目录语法引号exprtestif...then...fiif...elseif...elseif嵌套case…esacforwhilebreak 和 continue函数语法 引号 " ":如果有字符串,字符串原样输出,如果有$变量则查看变量的值 :所有的字符无论是否有变量都原样输出 ˋˋ:在该引号包含的…

如何批量查询网站的搜狗收录情况?搜狗收录么查询

如何批量查询网站的搜狗收录情况?搜狗收录么查询 查询网站的搜狗收录的具体操作: 第一步、打开网站综合查询工具 第二步、添加需要查询的网站域名 第三步、勾选要查询的功能(勾选搜狗是否收录和搜狗总收录) 第…

redis 主从复制(读写分离)集群搭建(含错误处理)

目录 1.概述 2.搭建 2.1.安装配置 2.2.认主 2.3.错误处理 3.原理 1.概述 当面临大流量时,redis可以采取集群的方式进行扩容,将压力分散到集群中的多个结点上去防止redis被打挂。redis的扩容方式有两种: 垂直扩容,即读写分离…

【移动端测试】了解Android的配置和使用过程

Android 是基于JAVA语言来进行开发编写的,但是对于Android体系中最底层是Linux层,现在说一下android 项目的结构目录: 整体结构和一个普通的java项目很类似 每一个项目都有一个主Activity 相当于java类中的main 方法是程序的入口 比如 该项目中的ListVi…

centos7搭建nginx主从以及集群

一、nginx升级之路 之前因为业务量并不是很大,所以公司nginx采用的是单机。因为nginx单机性能也很好,所以也没有发生过什么问题。不过后来还是慢慢进行了几次调整。最终换成了多IP地址解析和nginx主从。下面就介绍一下怎么一步步升级的。 1.最初版本&a…

天翼物联携手6家单位发起移动物联网高质量发展共同倡议

近日,由工信部指导,中国信息通信研究院(以下简称“中国信通院”)、中国通信学会、无锡市人民政府、人民邮电报社、江苏省工业和信息化厅、江苏省通信管理局共同主办,无锡物联网创新促进中心、天翼物联科技有限公司等单…

uniapp中tabBar菜单栏的实现以及页面常用的生命周期(菜单栏颜色切换)

前言 本篇文章带大家使用uniapp通过小案例实现tab菜单栏的切换,并对页面中常用的生命周期进行介绍。 实现菜单栏的切换 配置page页面 我们这里要实现三个页面的切换,所以要先在page.json文件中配置三个页面的路径 "pages": [ //pages数组…

HTML -- 一文学会HTML及常用标签

文章目录1. HTML简介1.1 网页1.1.1 什么是网页1.1.2 什么是HTML1.1.3 网页的形成1.2 常用浏览器1.2.1 常见的浏览器1.2.2 浏览器内核1.3 Web标准1.3.1 为什么需要Web标准1.3.2 Web标准的构成2. HTML基础2.1 HTML语法规范2.1.1 基本语法规范2.1.2 标签关系2.2 HTML基本结构标签2…