Telerik DevCraft包含一個(gè)完整的產(chǎn)品棧來構(gòu)建您下一個(gè)Web、移動(dòng)和桌面應(yīng)用程序。它使用HTML和每個(gè).NET平臺(tái)的UI庫，加快開發(fā)速度。Telerik DevCraft提供最完整的工具箱，用于構(gòu)建現(xiàn)代和面向未來的業(yè)務(wù)應(yīng)用程序。

ThemeBuilder是一個(gè)web應(yīng)用程序，它作為所有組件的一個(gè)完整的所見即所得編輯器，允許開發(fā)人員或設(shè)計(jì)人員深入并自定義每個(gè)組件的細(xì)節(jié)——而不涉及任何CSS或Sass。

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論

Step 1：設(shè)置一個(gè)新的ThemeBuilder項(xiàng)目

開發(fā)者首先需要?jiǎng)?chuàng)建一個(gè)新的ThemeBuilder項(xiàng)目，跳轉(zhuǎn)到ThemeBuilder儀表板，登錄或設(shè)置一個(gè)Telerik 帳戶，然后選擇“Create New Project”：

在下一頁中，開發(fā)者需要為項(xiàng)目提供一個(gè)名稱，并選擇一個(gè)主題作為它的基礎(chǔ)。可以從以下這些常用的設(shè)計(jì)系統(tǒng)——Bootstrap、Material或fluent，如果開發(fā)者想創(chuàng)建一些全新的東西，建議從Kendo UI主題開始，并從那里進(jìn)行自定義。

Step 2：設(shè)計(jì)

這一步取決于研發(fā)團(tuán)隊(duì)是否有專業(yè)的設(shè)計(jì)師，并且作為交接的一部分從他們哪里接收設(shè)計(jì)更改，還是開發(fā)者自己處理設(shè)計(jì)。

如果團(tuán)隊(duì)中有設(shè)計(jì)師，從Figma UI套件開始是最有益的，這些套件在Figma文件中為設(shè)計(jì)師提供了每個(gè)組件的完整分解，原生設(shè)計(jì)風(fēng)格。Figma套件也有各種主題(Kendo Default, Bootstrap, Material和Fluent)，所以如果開發(fā)者正在使用其中的一個(gè)設(shè)計(jì)系統(tǒng)，可以從這一步開始同步。

在這種情況下，開發(fā)人員可能會(huì)被邀請(qǐng)查看包含其設(shè)計(jì)更新的Figma Kit文件，并且開發(fā)人員可以使用ThemeBuilder Pro更容易地將這些轉(zhuǎn)換為代碼。

如果開發(fā)人員自己處理設(shè)計(jì)，可以直接跳轉(zhuǎn)到ThemeBuilder！因?yàn)門hemeBuilder使用WYSIWYG方法進(jìn)行編輯，開發(fā)者對(duì)組件所做的任何更改都將立即反映在實(shí)時(shí)預(yù)覽面板中。

Step 3：創(chuàng)建自定義主題

建議從對(duì)主題進(jìn)行高級(jí)更新開始，使用左側(cè)“Theme Styles”側(cè)欄中的變量，這些更改將立即應(yīng)用于整個(gè)組件庫，所以開發(fā)者可以快速更改顏色，排版和邊界半徑值。

要添加一個(gè)新變量，只需點(diǎn)擊“Colors”標(biāo)題右側(cè)的“+”按鈕，然后系統(tǒng)會(huì)提示開發(fā)者為變量命名并設(shè)置基本值（稍后可以更改），開發(fā)者創(chuàng)建的任何新變量都會(huì)添加到Theme Styles邊欄底部的“Other”標(biāo)題下。

Step 4：預(yù)覽和編輯組件

一旦開發(fā)者設(shè)置了這些值，可以開始探索這些設(shè)置在所有組件中的外觀，使用實(shí)時(shí)預(yù)覽。確保與所有組件交互，這樣開發(fā)者就可以檢查樣式在各種交互狀態(tài)下是如何工作的。

如果開發(fā)者看到任何看起來不太對(duì)的，或者只是一些想調(diào)整的高級(jí)列表中不包括的東西(如填充或空白，更細(xì)粒度的文本設(shè)置，對(duì)齊和對(duì)齊，輪廓，效果等)，那么新的高級(jí)編輯面板將引導(dǎo)你完成這些選項(xiàng)。由于采用原子設(shè)計(jì)方法，您對(duì)按鈕所做的更改(例如)將自動(dòng)反映在使用或包含按鈕工具欄、按鈕組、輸入、下拉列表等的每個(gè)組件中。

Step 5：分享

通過實(shí)時(shí)編輯組件進(jìn)行協(xié)作，或輕松地將您的工作發(fā)送給批準(zhǔn)。若要共享ThemeBuilder項(xiàng)目，請(qǐng)單擊導(dǎo)航欄右上方的Share按鈕。這將打開一個(gè)模型，允許您通過電子郵件地址將其他隊(duì)友添加到項(xiàng)目中。如果需要，開發(fā)人員還可以從這里撤銷訪問權(quán)限。

此功能還將允許您跨產(chǎn)品團(tuán)隊(duì)共享，這樣每個(gè)人都可以導(dǎo)出相同的CSS和Sass文件，從而在整個(gè)應(yīng)用程序套件中實(shí)現(xiàn)真正一致的外觀和感覺。

Step 6：導(dǎo)出

說到導(dǎo)出，開發(fā)人員可以通過單擊導(dǎo)航欄右上角的“Export”按鈕來開始主題導(dǎo)出。

Step 7：集成到應(yīng)用程序中

將新主題集成到現(xiàn)有應(yīng)用程序中就像下載文件一樣簡(jiǎn)單！

下載的zip文件有兩個(gè)主文件夾：“css”和“sass”，它們都嵌套在“dist”父文件夾中。根據(jù)您在應(yīng)用程序中使用的內(nèi)容，選擇需要的一個(gè)，這就像拖放文件一樣簡(jiǎn)單！在不到30秒的時(shí)間內(nèi)，您可以應(yīng)用導(dǎo)出的ThemeBuilder樣式，并在應(yīng)用程序中的每個(gè)Telerik 和Kendo UI組件中看到它們，而無需編寫一行Sass或CSS!