Kendo UI致力于新的開(kāi)發(fā)，來(lái)滿足不斷變化的需求，通過(guò)React框架的Kendo UI JavaScript封裝來(lái)支持React Javascript框架。Kendo UI for React能夠?yàn)榭蛻籼峁└玫挠脩趔w驗(yàn)，并且能夠更快地構(gòu)建更好的應(yīng)用程序。

開(kāi)發(fā)人員在應(yīng)用程序主題色的選擇上，往往會(huì)注重品牌影響力，因此可能重新設(shè)計(jì)皮膚的整個(gè)庫(kù)或做一些定制設(shè)計(jì)。Kendo UI for React很容易改變組件的外觀和樣式，本文介紹四種不同的方法來(lái)改變主題風(fēng)格。

Kendo UI R3 2022正式版下載

 事實(shí)上，這四種方法的選擇取決于開(kāi)發(fā)人員的個(gè)人偏好，是喜歡編寫CSS還是更改范圍會(huì)涉及更廣，下面的流程圖可以知道開(kāi)發(fā)者完成選擇。

Sass變量

自定義Sass變量是推薦給擁有專門前端專家團(tuán)隊(duì)的方法。

當(dāng)完全掌握CSS知識(shí)后，有時(shí)打開(kāi)文件并開(kāi)始進(jìn)行調(diào)整會(huì)更快。官方技術(shù)團(tuán)隊(duì)使用Sass進(jìn)行主題化，并有意公開(kāi)這些變量供開(kāi)發(fā)人員使用，因此您可以使用與官方相同的方法進(jìn)行自定義。

每個(gè)KendoReact主題包都包含主題的源文件，它為開(kāi)發(fā)人員提供作為構(gòu)建過(guò)程的一部分來(lái)修改和重新構(gòu)建主題的選項(xiàng)。例如開(kāi)發(fā)人員可以更改主題顏色，刪除未使用組件的CSS，或使用特定的主題顏色來(lái)設(shè)置應(yīng)用程序的樣式，主題源文件位于主題包的scss文件夾中。

Figma Kits

Figma UI Kits是為擁有專門設(shè)計(jì)師的團(tuán)隊(duì)推薦的方法。

UI kit是UI設(shè)計(jì)的所有元素集合，包括(但不限于)字體、顏色、圖標(biāo)、組件設(shè)計(jì)文件和文檔。它們本身很有用，既可以作為文檔的形式，也可以通過(guò)提供一組可在新設(shè)計(jì)中重用的基本元素來(lái)加快設(shè)計(jì)進(jìn)程，但當(dāng)與現(xiàn)有組件庫(kù)結(jié)合時(shí)尤其強(qiáng)大——例如。

在這種情況下，開(kāi)發(fā)人員正在使用的組件和設(shè)計(jì)人員正在使用的組件之間有完美的1比1的相關(guān)性。

Figma Kits提供了一個(gè)內(nèi)部視角，讓設(shè)計(jì)師了解所有100多個(gè)組件是如何設(shè)計(jì)的，包括它們所有不同的用戶交互狀態(tài)和設(shè)計(jì)原則。這讓設(shè)計(jì)師對(duì)組件的工作方式有了更好的理解，以及從最小的標(biāo)記到最復(fù)雜的組件，可視化風(fēng)格是如何進(jìn)行的。

UI Kits 使用Figma組件，允許設(shè)計(jì)師在基礎(chǔ)組件或令牌級(jí)別進(jìn)行更改，并立即看到整個(gè)KendoReact組件套件的編輯。

Figma中的所有設(shè)計(jì)標(biāo)記都與上面提到的Sass變量完全匹配，這使得實(shí)現(xiàn)變得簡(jiǎn)單，命名沖突/誤解成為過(guò)去。

Swatches（調(diào)色板）

對(duì)于希望對(duì)現(xiàn)有主題進(jìn)行最小的、基于顏色更改的團(tuán)隊(duì)，或與現(xiàn)有設(shè)計(jì)系統(tǒng)如Bootstrap、Material或Fluent)相匹配的團(tuán)隊(duì)，我們推薦使用Swatches（調(diào)色板）。

Swatch是一組自定義主題外觀的變量——開(kāi)發(fā)人員可以常見(jiàn)自己的，或者從Kendo UI 設(shè)計(jì)團(tuán)隊(duì)創(chuàng)建的14個(gè)不同的調(diào)色板中選擇一個(gè)。

調(diào)色板對(duì)于創(chuàng)建多個(gè)持久的主題變化非常有用，CSS輸出文件可以跨項(xiàng)目共享，不需要進(jìn)一步處理。

當(dāng)您在文檔中查看任何組件時(shí)，可以使用右上角的下拉菜單預(yù)覽不同預(yù)先制作的swatch（調(diào)色板），按主題分類。有三個(gè)主要設(shè)計(jì)系統(tǒng)的主題——Material, Bootstrap和Fluent。

ThemeBuilder Pro

ThemeBuilder Pro是推薦給那些想要使用WYSIWYG接口進(jìn)行設(shè)計(jì)更改并直接導(dǎo)出代碼的團(tuán)隊(duì)的方法。

ThemeBuilder是一個(gè)web應(yīng)用程序，允許開(kāi)發(fā)人員快速自定義和樣式化庫(kù)中的任何組件。這是一種有效的方法，可以在整個(gè)庫(kù)中進(jìn)行表面級(jí)別的更改，然后導(dǎo)出該代碼來(lái)在應(yīng)用程序中使用。

然而，ThemeBuilder的這個(gè)早期版本僅限于更新基本顏色和導(dǎo)出CSS或Sass變量——這對(duì)于只需要更新KendoReact組件來(lái)使用自己品牌顏色的團(tuán)隊(duì)很有用，但對(duì)于需要完全自定義樣式的用戶來(lái)說(shuō)還不夠。

ThemeBuilder Pro的功能是對(duì)所有組件的所見(jiàn)即所得(WYSIWYG)編輯器，允許開(kāi)發(fā)人員或設(shè)計(jì)人員深入研究并定制每個(gè)組件的細(xì)節(jié)——而不涉及任何CSS或Sass。

新ThemeBuilder Pro的用戶仍然可以像以前一樣，在左邊欄進(jìn)行快速和簡(jiǎn)單的顏色更新。您還可以在此面板中更新字體和邊框半徑設(shè)置，這將立即應(yīng)用于整個(gè)庫(kù)。

設(shè)置了這些值之后，就可以開(kāi)始研究這些設(shè)置在所有組件中的外觀了。如果開(kāi)發(fā)人員想調(diào)整的列表中不包含（如填充或空白、更細(xì)粒度的文本設(shè)置、對(duì)齊和對(duì)齊、大綱、效果等），那么新的高級(jí)編輯面板將帶開(kāi)發(fā)者瀏覽這些選項(xiàng)。

開(kāi)發(fā)人員可以分享自己的ThemeBuilder Pro主題，通過(guò)實(shí)時(shí)編輯組件進(jìn)行協(xié)作，或者跨產(chǎn)品團(tuán)隊(duì)進(jìn)行共享，以便每個(gè)人都可以導(dǎo)出相同的CSS和Sass文件，從而在應(yīng)用程序套件中實(shí)現(xiàn)真正一致的外觀和樣式。

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