使用导出包

本文解释了如何使用从ThemeBuilder导出的zip文件。

ThemeBuilder允许应用程序开发人员使用生成的样式应用到Telerik和Kendo UI组件压缩包包含Sass和CSS。

出口

当你准备好定制UI组件时，你可以导出一个包含Sass和CSS文件的zip文件:

1. 导航到ThemeBuilder仪表板并打开所需的项目。
2. 在右上角，选择出口并保存zip文件。

使用此Zip包

此压缩包包含由ThemeBuilder项目管理的Sass和CSS。这些资产位于以ThemeBuilder项目命名的文件夹中。

如何使用这些样式取决于你的UI组件库:

• 使用zip包和React、Angular或Vue UI组件库．
• 使用带有Blazor UI组件库的zip包．

在React、Angular或Vue中使用ThemeBuilder输出

生成的ThemeBuilder输出被打包为一个npm包。要使用它，将ThemeBuilder包复制到你的应用程序中，并将其作为标准npm包使用:

1. 解压缩压缩文件。

2. 导航到以ThemeBuilder项目命名的文件夹，然后安装npm模块:

   CD my-themebuilder-project-name NPM install

3. 在您的应用程序中添加ThemeBuilder包package.json文件:

   "dependencies":{…:“my-themebuilder-project-name文件:。/ my-themebuilder-project-name "},

   的文件:。/ my-themebuilder-project-name值是到提取ThemeBuilder输出包的文件夹的相对路径。例如，如果将它放在应用程序文件夹旁边，则值为文件:. . / my-themebuilder-project-name．

4. 在应用程序中导入主题包index.scss文件:

   @ import“~ my-themebuilder-project-name / dist / scss”;

   由于生成的包已经包含了对Kendo主题的引用，因此不需要手动将其添加到项目中。

5. 在项目中安装ThemeBuilder包:

   cd . .npm安装

在Blazor中使用ThemeBuilder输出

生成的ThemeBuilder输出被打包为一个npm包。要在Blazor应用程序中使用它:

1. 解压缩压缩文件。

2. 导航到my-themebuilder-project-name / dist / css文件夹中。

3. 复制准备使用预构建的css文件命名my-themebuilder-project-name.css．

4. 粘贴my-themebuilder-project-name.css文件，通常在wwwroot文件夹中。例如，它可以在名为myCustomTelerikThemes．

5. 在索引文档的头标记中包含自定义样式表文件(默认情况下wwwroot / index . html用于WebAssembly应用程序和~ / / _Host.cshtml页面服务器端Blazor应用)。文档看起来是这样的:

<头> < !——更多内容可以呈现在这里——> <链接rel="样式表" href="//www.aliitrade.com/docs/themebuilder/myCustomTelerikThemes/my-themebuilder-project-name.css" />  

确保在应用程序中没有引用另一个Telerik主题。如果您正在使用内置主题，则必须删除其<链接>元素。

如果您希望在应用程序中使用ThemeBuilder Sass输出，则ThemeBuilder包包含dist / scss文件夹中。方法的详细步骤.scss文件，请参考自定义主题文章在用户界面的Blazor文档。