news 2026/8/22 12:00:57

B/S端界面控件DevExtreme中文指南——如何自定义应用主题?

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
B/S端界面控件DevExtreme中文指南——如何自定义应用主题?

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序,该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

在上文中,我们为大家介绍了如何开始使用DevExtreme内置的主题生成器,在本文中我们将继续为大家介绍如何使用这个主题生成器来自定义应用程序主题。

DevExtreme新旧版本帮助文档下载可进QQ qun获取:169725316

自定义主题

开发人员创建或导入主题后,ThemeBuilder会导航到可以自定义主题的主视图。

主视图由以下元素组成:

  • Settings list(左侧菜单)
    包含所有的自定义设置,分为组:
    • Basic Settings - 多个UI组件使用的设置
    • Typography Settings - 配置字体的设置
    • 特定的UI组件或UI组件组 - 单个UI组件或UI组件组使用的设置
      设置列表还包含一个搜索框,用于搜索UI组件或UI组件组。
  • 工具栏(上面板)
    包含主题切换器和 Import、Export按钮。
  • 预览区
    在自定义主题中显示​​​​​​​DevExtreme内组件,当开发人员更改设置或切换主题时,会自动更新。

延迟定制

若要稍后返回自定义,请提前保存主题的元数据。单击工具栏上的Export来打开Theme Export弹出对话框,在这个对话框中,输入配色方案名称。

跳转到Choose Format步骤,然后单击Download Metadata File按钮。

一个包含元数据的.json文件保存在计算机上,开发人员可以选择复制元数据。

要继续自定义,请单击工具栏上的Import,在调用的Theme Import对话框中,单击Upload File并选择前面导出的.json文件。如果开发人员复制了元数据,而不是将其导出为.json文件,请将其粘贴到文本区,然后单击上传元数据:

导出生成的主题

单击Export来打开Theme Export弹出对话框,在这个对话框中,输入配色方案的名称。如果要将主题导出为颜色样本,请选中复选框,开发人员还可以删除到外部资源的链接,例如字体。

在下一步中,选择要支持的主题的组件。

单击 Download CSS File来将文件命名为dx.[base-theme-name].[color-scheme-name].css (例如dx.material.brown.css)保存到计算机上。或者开发人员可以下载带有CSS文件和图标的存档,或者复制CSS。

开发人员自定义主题使用的图标和字体应放置在主题旁边,当使用npm时,可以在node_modules/devextreme/dist/css中找到图标和字体文件夹。在其他情况下,这些文件夹位于具有预定义主题的目录中,将它们复制到包含主题的目录中。

最后,注册导出的主题,如果导出了一个颜色板,请按照颜色板中的描述应用它。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/22 12:00:34

芯片DFT可测性设计入门与核心概念

芯片DFT可测性设计入门与核心概念 在一颗动辄百亿晶体管的现代SoC中,如果不在设计阶段就为"测试"留好通路,那么这颗芯片在出厂时将如同一个无法打开的黑盒——你永远无法确认它是否真的能正常工作。DFT(Design for Test,可测性设计)正是为解决这一根本性矛盾而生…

作者头像 李华
网站建设 2026/8/22 12:00:16

全面UI组件库Telerik——为驱动制造业生产商提升生产效率赋能

制造商背景Parker中文名称派克(派克汉尼汾的简称)Parker Hannifin,是全球领先的运动和控制技术与系统多元化制造商,为广泛的传动控制、工业和航空市场提供精准解决方案,现已成为世界上最大的专业生产和销售各种制冷空调…

作者头像 李华
网站建设 2026/8/22 11:58:15

从TextRank到BART:NLP文本摘要技术原理与实战指南

在信息爆炸的时代,我们每天都被海量的文本信息包围——新闻、报告、论文、邮件、社交媒体动态。如何快速、准确地抓住一篇文章的核心思想,成为了提升信息处理效率的关键。文本摘要技术,作为自然语言处理(NLP)领域的一项…

作者头像 李华
网站建设 2026/8/22 11:57:40

NodeJS之NPM模块管理器

文章目录1 npm模块管理器1.1 npm简介1.2 修改全局包安装目录1.3 npm常用命令1.3.1 npm init1.3.2 npm set1.3.3 npm info1.3.4 npm search1.3.5 npm list1.3.6 install & add1.3.6.1 npm install1.3.6.2 npm add1.3.7 npm update,npm uninstall1.3.8 npm run1.3…

作者头像 李华
网站建设 2026/8/22 11:50:45

十分钟搭建个人博客:浪浪云与Halo的免运维部署实践

之前想搭建个人博客,要么得折腾服务器、域名、备案,要么得忍受免费平台的广告和限制,技术门槛和精力成本都不低。最近发现“浪浪云”和“Halo”的组合,简直是个人站长的福音,从零到上线一个功能完整、界面美观的博客&a…

作者头像 李华
网站建设 2026/8/22 11:50:08

C++11三件套:可变模板、Lambda与std::function深度解析

1. 这不是语法糖&#xff0c;是C11重构底层思维的三把钥匙 你翻过《C Primer》第16章&#xff0c;对着 template<typename... Args> 发过呆&#xff1b;你在Qt信号槽里写过 [](int x, double y) { return x y; } &#xff0c;却说不清捕获列表方括号里到底发生了什么…

作者头像 李华