使用界面组件Telerik ThemeBuilder研发主题，只需要这七步！

Telerik DevCraft包含一个完整的产品栈来构建您下一个Web、移动和桌面应用程序。它使用HTML和每个.NET平台的UI库加快开发速度。Telerik DevCraft提供最完整的工具箱用于构建现代和面向未来的业务应用程序。ThemeBuilder是一个web应用程序它作为所有组件的一个完整的所见即所得编辑器允许开发人员或设计人员深入并自定义每个组件的细节——而不涉及任何CSS或Sass。Step 1设置一个新的ThemeBuilder项目开发者首先需要创建一个新的ThemeBuilder项目跳转到ThemeBuilder仪表板登录或设置一Telerik帐户然后选择“Create New Project”在下一页中开发者需要为项目提供一个名称并选择一个主题作为它的基础。可以从以下这些常用的设计系统——Bootstrap、Material或fluent如果开发者想创建一些全新的东西建议从Kendo UI主题开始并从那里进行自定义。Step 2设计这一步取决于研发团队是否有专业的设计师并且作为交接的一部分从他们哪里接收设计更改还是开发者自己处理设计。如果团队中有设计师从Figma UI套件开始是最有益的这些套件在Figma文件中为设计师提供了每个组件的完整分解原生设计风格。Figma套件也有各种主题(Kendo Default, Bootstrap, Material和Fluent)所以如果开发者正在使用其中的一个设计系统可以从这一步开始同步。在这种情况下开发人员可能会被邀请查看包含其设计更新的Figma Kit文件并且开发人员可以使用ThemeBuilder Pro更容易地将这些转换为代码。如果开发人员自己处理设计可以直接跳转到ThemeBuilder因为ThemeBuilder使用WYSIWYG方法进行编辑开发者对组件所做的任何更改都将立即反映在实时预览面板中。Step 3创建自定义主题建议从对主题进行高级更新开始使用左侧“Theme Styles”侧栏中的变量这些更改将立即应用于整个组件库所以开发者可以快速更改颜色排版和边界半径值。要添加一个新变量只需点击“Colors”标题右侧的“”按钮然后系统会提示开发者为变量命名并设置基本值稍后可以更改开发者创建的任何新变量都会添加到Theme Styles边栏底部的“Other”标题下。Step 4预览和编辑组件一旦开发者设置了这些值可以开始探索这些设置在所有组件中的外观使用实时预览。确保与所有组件交互这样开发者就可以检查样式在各种交互状态下是如何工作的。如果开发者看到任何看起来不太对的或者只是一些想调整的高级列表中不包括的东西(如填充或空白更细粒度的文本设置对齐和对齐轮廓效果等)那么新的高级编辑面板将引导你完成这些选项。由于采用原子设计方法您对按钮所做的更改(例如)将自动反映在使用或包含按钮工具栏、按钮组、输入、下拉列表等的每个组件中。Step 5分享通过实时编辑组件进行协作或轻松地将您的工作发送给批准。若要共享ThemeBuilder项目请单击导航栏右上方的Share按钮。这将打开一个模型允许您通过电子邮件地址将其他队友添加到项目中。如果需要开发人员还可以从这里撤销访问权限。此功能还将允许您跨产品团队共享这样每个人都可以导出相同的CSS和Sass文件从而在整个应用程序套件中实现真正一致的外观和感觉。Step 6导出说到导出开发人员可以通过单击导航栏右上角的“Export”按钮来开始主题导出。Step 7集成到应用程序中将新主题集成到现有应用程序中就像下载文件一样简单下载的zip文件有两个主文件夹“css”和“sass”它们都嵌套在“dist”父文件夹中。根据您在应用程序中使用的内容选择需要的一个这就像拖放文件一样简单在不到30秒的时间内您可以应用导出的ThemeBuilder样式并在应用程序中的每个Telerik 和Kendo UI组件中看到它们而无需编写一行Sass或CSS!