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

自定义主题

开发人员创建或导入主题后，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中找到图标和字体文件夹。在其他情况下，这些文件夹位于具有预定义主题的目录中，将它们复制到包含主题的目录中。

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

DevExpress技术交流群6：600715373      欢迎一起进群讨论