ThemeBuilder的第一步

在本ThemeBuilder教程中，您将学习如何使用该工具进行第一步操作，然后您将发现其高级功能。

通过使用ThemeBuilder，您将对Telerik和Kendo UI组件进行样式化，并使它们与项目的设计需求相匹配。本教程中的步骤代表了使用ThemeBuilder时可以遵循的标准工作流。

先决条件

要遵循本教程中的步骤，您需要一个Telerik帐户。如果您还没有Telerik帐户，请转到//www.aliitrade.com/login/themebuilder#register创建一个，并开始您的免费ThemeBuilder Pro试用，只需一个步骤。

如果您没有ThemeBuilder Pro订阅，也不用担心。您可以按照本指南中的说明开始免费试用。

创建项目

要开始应用您的样式和自定义您最喜欢的主题，您必须创建ThemeBuilder项目。ThemeBuilder是一个云应用程序，它会自动保存项目中的更改。您甚至可以与同事分享您的项目，并在项目上进行协作。

要创建一个新的ThemeBuilder项目:

1. 导航到themebuilderapp.telerik.com．

2. 为您的Telerik帐户然后登录。

   • 如果这是您的第一个ThemeBuilder项目，应用程序将自动将您带到创建新项目屏幕上。
   • 如果您已经有一个现有的ThemeBuilder项目，请单击创建新项目按钮。

3. 为项目输入名称，然后选择剑道引导主题基本的主题。Bootstrap是可以作为自定义起点的四个主题之一。

4. 最后,点击创建．

   

创建项目后，您将看到ThemeBuilder工作区:

• UI组件位于屏幕的中央。这些是实时组件——对它们样式的任何更改都会立即呈现在屏幕上。

• 剑道变量在主题风格窗格在屏幕左侧。

(可选)激活免费试用

本教程演示了需要ThemeBuilder Pro订阅或免费试用许可证的各种Pro特性。如果您已经可以访问专业版功能，请继续自定义主题变量部分。

激活您的免费试用:

1. 定位并单击其中一个可用的箴在ThemeBuilder项目中的徽章或点，例如:

   • 点击ThemeBuilder屏幕底部的横幅。

   • 悬停在点附近排版而且颜色在屏幕左侧，然后单击箴徽章。

     

2. 在打开的新窗口中，选择现在试一试．然后接受许可协议。

自定义主题变量

视觉主题由多个SASS或CSS变量、它们的值和复杂的样式继承关系组成。定制这些变量是满足应用程序需求的第一步。

要自定义本教程的变量:

1. 在主题风格窗格中，选择美元的主变量。

2. 在出现的颜色编辑器中，将主色值更改为# 40 c676．基色和所有使用基色的组件立即更新，您可以在屏幕上看到它们的新外观。您在ThemeBuilder中所做的所有更改几乎会立即应用到活动组件。

3. 对以下变量重复上述步骤:

   变量	新值	描述
   kendo-button-text美元	# 004284	更改按钮中的文本颜色
   kendo-button-bg美元	# EFF4F9	更改按钮的背景
   kendo-border-radius美元	20 px	更改按钮的边界半径

创建自定义主题变量

创建自定义主题变量需要一个积极的免费试用或ThemeBuilder Pro订阅．

添加新变量使您可以随心所欲地或根据应用程序设计的需要设置UI组件的样式。

为本教程创建自定义变量:

1. 导航到主题风格窗格并单击+控件旁边的按钮颜色部分。

2. 在添加颜色编辑器:

   2.1.输入button-border美元作为新变量的名称。

   2.2.输入# DBE3ED作为新变量的值。

   2.3.点击创建

3. 重复上述步骤，添加以下新变量:

   新变量	价值	描述
   primary-button-border美元	# 19 b859	主按钮的边框
   input-border美元	# CED4DA	input UI组件的边框
   美元标示色彩	# 004284	标签的颜色

控件的底部显示新添加的变量主题风格窗格中的一个名为其他．

添加自定义排版

添加自定义排版需要主动免费试用或ThemeBuilder Pro订阅．

添加自定义排版允许您更改各种与字体相关的样式。

1. 选择+旁边的按钮。排版．

2. 在的名字字段中,输入text-typography美元并设置以下属性:

   2.1.选择Verdana字体的家庭。

   2.2.设置字体权重为400．

   2.3.设置字体大小为14像素．

   2.4.设置线高为24像素．

使用高级定制

使用高级定制需要一个主动的免费试用或ThemeBuilder Pro订阅．

若要启用高级模式，请选择高级编辑按钮。

一旦你选择高级编辑， ThemeBuilder允许你编辑选择UI组件的所有属性。

编辑高级按钮属性

1. 要访问Button组件的属性并查看其所有状态，请选择按钮框架。

   

2. 更改二级Button组件的排版:

   2.1.选择固体/二次的按钮正常的state -左上角按钮。

   调整缩放级别(通过使用+而且-键或ctrl+鼠标滚轮）.

   2.2.在组成部分窗格的右侧，选择按钮．

   

   的组成部分pane表示DOM树，并告知组件的结构。

   2.3.在属性窗格中的文本财产。

   2.4.从下拉菜单中选择text-typography美元-你添加的自定义排版本教程的前一部分．

   左上角的组件将其样式传播到该组件的所有其他实例。这就是为什么从左到右和从上到下应用样式变化是你可以在ThemeBuilder中使用的主要样式策略。这种方法节省时间，并允许对更多组件设置样式，因为它利用了内置样式继承。

3. 更改次要Button组件的边框:

   3.1.在属性窗格中，找到边境财产。

   3.2.输入2作为边界宽度的值。

   3.3.要更改边框颜色，请选择button-border美元从右边的边框颜色下拉列表中。你添加了这个颜色在本教程的前面．

4. 更改主按钮组件的边框:

   4.1.选择固体/主的按钮正常的状态。

   4.2.在属性窗格中，找到边境财产。

   4.3.从边框颜色下拉列表中选择primary-button-border美元．你添加了这个颜色在本教程的前面．

编辑高级输入属性

接下来，您将自定义Input组件的样式。

要访问Input组件的高级属性，请选择<返回退出按钮组件的高级视图，并查看包含所有其他组件的帧。然后选择输入．

为Input组件设置样式:

1. 选择正常的Input组件的状态——左上角的Input。

2. 在属性窗格中的边境属性:

   2.1.输入2Px作为边框宽度的值。

   2.2.要更改边框颜色，请选择input-border美元从右边的边框颜色下拉列表中。你添加了这个颜色在本教程的前面．

编辑高级复选框属性

若要访问CheckBox组件的高级属性，请选择<返回退出输入组件的高级视图，并查看包含所有其他组件的帧。然后选择复选框．

设置CheckBox组件的样式:

1. 选择正常的国家没有选择复选框组件。

   注意，复选框太圆了，因为您应用了全局边界半径在本教程的前面．

2. 在属性窗格中，找到边界半径属性并进入4px。

本教程中的最后一个定制涉及到Label组件，它与CheckBox在同一帧上:

1. 选择正常的Label组件的状态。

2. 在属性窗格中，找到文本属性并选择美元标示色彩．你添加了这个颜色在本教程的前面．

3. 定位填充属性并展开它以查看所有填充属性。

4. 添加6标签左侧的Px填充。

导出主题

在完成Telerik和Kendo UI组件的样式化之后，可以通过单击导出创建的主题出口在右上角。

导出的文件是一个zip归档文件，包含:

• 一个npm包——你可以在版本控制中使用它，这样你的样式就可以进行版本控制。

• 简化的编译css -您可以在应用程序中直接引用这些样式。

• SASS文件—您可以将它们添加到项目的构建中以设置组件的样式

新员工培训视频

如果你更喜欢视频教程，请看下面的ThemeBuilder新手视频。

下一个步骤

• 使用导出的ThemeBuilder包

• 在ThemeBuilder中探索基本项目操作

• ThemeBuilder中的键盘快捷键