DevExtreme拥有高性能的HTML5 / JavaScript小部件集合使您可以利用现代Web开发堆栈包括ReactAngularASP.NET CorejQueryKnockout等构建交互式的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中找到图标和字体文件夹。在其他情况下这些文件夹位于具有预定义主题的目录中将它们复制到包含主题的目录中。最后注册导出的主题如果导出了一个颜色板请按照颜色板中的描述应用它。
