?Blazor使您能夠使用C#而不是JavaScript編寫豐富的Web應用程序。Telerik UI for Blazor是從一開始就構建的，以確保您能體驗到更短的開發(fā)周期、快速的迭代，并縮短上市時間。

 

主要特點

 

模板支持

有了本機組件，Telerik UI for Blazor Grid可以充分利用Blazor的最佳功能來高度定制用戶體驗。

 

本機Blazor驗證集成

UI for Blazor套包支持并無縫集成到Blazor的表單和驗證基礎架構中。所有Telerik UI for Blazor 輸入組件都是打開就能用的，當被放置在EditForm中，響應EditContext更改并提供默認的無效樣式時。

 

 

現(xiàn)代化設計

Telerik UI for Blazor提供了材料、引導和默認主題，您可以使用這些主題來實現(xiàn)Blazor應用程序的現(xiàn)代設計。借助主題生成器，您甚至可以自定義現(xiàn)有主題或創(chuàng)建新主題以滿足您的需要。

 

 

讓您的錢花得有價值

 

投資回報率/削減開發(fā)時間

我們將領先的客戶機端技術和服務器端解決方案結合在價格友好的套包中。Javascript, ASP.NET, PHP和JSP——完整的套包！

 

只需一個很低的價格，您就可以獲得特定項目所需的各種技術，包括我們豐富的組件庫、每年三個主要的更新版本以及靈活的支持選項。

 

 

領先的技術支持

即使在試用期，也可以直接從構建此UI套件的開發(fā)人員那里獲得問題的答案。

如果您不是開發(fā)人員或沒有時間評估我們的產(chǎn)品，請向我們發(fā)送您的項目需求。我們將評估您所需的功能，并告訴您我們的產(chǎn)品將如何滿足您的需求。

 

 

作為Devcraft的一部分來購買

Telerik .NET和Kendo UI JavaScript組件以及報告和生產(chǎn)力工具使您能夠在任何網(wǎng)絡、桌面或移動平臺上快速構建現(xiàn)代和高性能的應用程序。提供靈活的支撐選項，滿足您的各種需求。

 

 

通過利用我們直觀的API、數(shù)千個具有源代碼可用性的演示、全面的文檔和各種VS模板，優(yōu)化您的時間和預算。

 

探索我們的本地UI Blazor組件

 

數(shù)據(jù)管理

 

• Grid

 

要創(chuàng)建基本Telerik Grid：

1. 使用TelerikGrid標簽

2. 將其數(shù)據(jù)屬性設置為保存數(shù)據(jù)集合的變量

3. 在其TelerikGridColumns標簽下，設置您想要的 TelerikGridColumn實例，其字段屬性指向模型字段名稱。

 

通過向網(wǎng)格提供數(shù)據(jù)收集，開始使用它

 

 

上面代碼段的結果

 

 

您還可以使用字符串作為字段名稱，不需要使用nameof運算符。例如，ID列可以這樣定義：<TelerikGridColumn Field =“Id”/>。

 

引用

 

網(wǎng)格是一個通用組件，要存儲引用，必須使用在聲明變量時傳遞給其數(shù)據(jù)的模型類型。

 

存儲對Telerik Grid的引用

 

 

導航

 

• 按鈕

 

按鈕組件根據(jù)所選主題、單擊事件和圖標提供樣式。也可以通過屬性禁用按鈕。

 

基本按鈕

 

要將Telerik按鈕添加到Blazor應用程序，請使用< TelerikButton >標簽：

 

基本Telerik按鈕標簽

 

 

上面代碼段的結果

 

組件命名空間和引用

 

 

Click Handler

 

要附加一個Click Handler，請使用OnClick 屬性并在“函數(shù)”部分中定義方法。

 

單擊Telerik按鈕的處理程序

 

 

樣式

 

您可以通過按鈕的Class屬性設置該按鈕的樣式，以定義應用于HTML呈現(xiàn)的自己的CSS規(guī)則。

 

將CSS類設置為按鈕并更改其外觀

 

 

上面代碼段的結果

 

 

您也可以使按鈕使用一種強烈的顏色來吸引注意力，稱為主按鈕樣式。為此，請將其Primary屬性設置為true。

 

當前主題的主配色方案按鈕

 

 

上面代碼段的結果，帶有默認主題

 

 

 

圖標

 

您可以在按鈕中放置圖像、sprite或字體圖標，以說明其對最終用戶的用途。要應用它們，請使用以下屬性：

• 對于字體圖標，使用圖標屬性設置字體圖標類。

• 對于圖像，使用ImageUrl 屬性提供URL

• 對于一個sprite，將SpriteClass 屬性設置為k-iconMySpriteClass，其中MySpriteClass定義sprite的CSS規(guī)則。

 

您可以在字體圖標文章中看到如何使用內(nèi)置圖標。

對于自定義字體圖標，您可以在您的Icon CSS類中定義字體和glyph。

下面的示例演示如何使用URL中的圖像、sprite圖像和內(nèi)置字體圖標。

 

如何在Telerik按鈕中使用圖標

 

上面代碼段的結果

 

 

可以使用wwwroot文件夾中圖像的相對路徑。上面的示例是使用絕對路徑的，使您可以很容易地看到結果而不需要準備圖像。

 

禁用狀態(tài)

 

要禁用按鈕，請將其啟用屬性設置為false。

 

禁用Telerik按鈕

 

 

禁用和啟用按鈕的比較

 

 

按鈕類型

 

默認情況下，該按鈕呈現(xiàn)<button type =“submit”>元素，因為這是按鈕的默認行為。

 

您可以通過組件的ButtonType屬性控制type的屬性，該屬性可以接受以下值：

• Submit-呈現(xiàn)type=“Submit”屬性。可以提交表單并觸發(fā)驗證。默認值。

• Button-呈現(xiàn)type=“button”屬性。不調用表單驗證和提交。

• 重置-呈現(xiàn)type=“reset”屬性。無法重置當前窗體。

 

• 選項卡條

 

選項卡條是通過接受類型為<TelerikTab>的子項的<TelerikTabStrip> 標記定義的。在選項卡中，您可以像在任何其他容器中一樣添加內(nèi)容，包括其他組件。

 

該選項卡顯示標題屬性，即標題中呈現(xiàn)的文本。它還提供禁用屬性，允許您禁用其選擇。

 

要控制選項卡標題的位置，主選項卡條帶標簽將顯示可選的TabPosition attribute，該屬性接受Telerik.Blazor.Components.TabStrip.TabPosition枚舉的成員：

• 頂部（默認）

• 左邊

• 右邊

• 底部

 

帶有示例參考、選項卡位置和禁用選項卡的Telerik選項卡條

 

 

上面代碼段的結果

 

 

獲取所選的選項卡

 

以編程方式選擇選項卡

 

編輯

 

• 文本框

 

文本框組件允許用戶輸入普通純文本消息。開發(fā)人員可以控制文本、模式和UX的其他元素（如標簽或類）的最小、最大長度。

 

要將Telerik文本框用于Blazor，請?zhí)砑覶elerikTextBox標簽。

 

基本文本框及其關鍵功能和ValueChanged事件處理

 

 

組件命名空間和引用

 

 

數(shù)字文本框提供以下功能：

• Class——將在輸入元素上呈現(xiàn)的CSS類。

• 啟用——輸入是否啟用。

• 標簽——在輸入旁邊呈現(xiàn)的標簽元素，以向用戶提供有關其用途的信息。

• 最大長度——用戶輸入文本的最大長度。

• 最小長度——用戶輸入文本的最小長度。

• 模式——用戶輸入必須匹配的模式。

• 值——獲取/設置輸入值，可用于綁定。

• 寬度——輸入的寬度。

• 驗證

 

Length、enabled和pattern屬性是<input/>元素上的HTML屬性，由瀏覽器決定是否接受這些屬性。例如，很少考慮最小長度這個屬性，并且通常只在表單提交時評估模式。

 

• 數(shù)字文本框

 

數(shù)字文本框組件允許用戶輸入十進制值，而不輸入文本。開發(fā)人員可以控制UX的最小值、最大值、步驟和其他元素。

 

要對Blazor使用Telerik數(shù)字文本框，請執(zhí)行以下操作：

 

1. 將telerik-blazor.min.js文件添加到主索引文件中。對于客戶端Blazor應用程序，它是wwwroot/index.html，對于服務器端Blazor應用程序，它是~/pages/index.cshtml。例如：

HTML

 

確保URL中的版本與項目中使用的Telerik Blazor 套包的版本匹配。

 

2.添加teleriknumerictextbox標簽

 

numeric文本框組件是通用的，這意味著它將其值參數(shù)的類型作為參數(shù)。它可以取int、long、float、double和decimal值。因此，min、max和step屬性的值必須與該值具有相同的類型，并且ValueChanged處理程序還必須適應相應的值類型。

 

組件命名空間和引用

 

數(shù)字文本框提供以下功能：

• 箭頭——是否顯示上/下微調器箭頭（按鈕）。默認為true。

• 小數(shù)——當用戶鍵入新值時，允許有多少個小數(shù)位。僅在輸入集中時生效。

• 格式——輸入未聚焦時顯示數(shù)字的格式。

• Max——輸入可以接受的最大十進制值。必須與值的類型相同。

• Min——輸入的最小十進制值。必須與值的類型相同。

• Step——使用箭頭時，值隨步驟變化的十進制值。必須與值的類型相同。

• Text ——獲取原始用戶輸入的文本獲取程序。

• 值——獲取/設置輸入值。

• 驗證。

 

• 日期輸入

 

日期輸入組件允許用戶輸入日期。開發(fā)人員可以控制日期的格式。如果用戶輸入與所需模式不匹配，則不接受該值。如果輸入可以被解析，它將被自動更正。

 

要對Dlazor使用Telerik日期輸入：

1. 將telerik-blazor.min.js文件添加到主索引文件中。對于客戶端Blazor應用程序，它是wwwroot/index.html，對于服務器端Blazor應用程序，它是~/pages/index.cshtml。例如：

HTML

確保URL中的版本與項目中使用的Telerik Blazor套包的版本相匹配。

 

1. 添加TelerikDateInput標簽

 

日期輸入提供以下功能：

• Class——將在輸入元素上呈現(xiàn)的CSS類。

• 啟用——輸入是否被啟用。

• 格式——用戶輸入必須匹配的日期格式。

• ParsingErrorMessage——當用戶的輸入無法按所需格式分析時，通過驗證向用戶顯示的提示。

• 值——獲取/設置輸入值，可用于綁定。

• 寬度——輸入的寬度。

• 驗證。

 

• 日期選擇器

 

日期選取器組件允許用戶從可視列表（日歷）中選擇日期或將其鍵入只能接受日期的日期輸入。您可以控制輸入中顯示的格式、用戶在日歷中導航的方式以及用戶無法選擇的日期。

 

如何使用Telerik Date Picker for Blazor：

 

1. 將telerik-blazor.min.js文件添加到主索引文件中。對于客戶端Blazor應用程序，它是wwwroot/index.html，對于服務器端Blazor應用程序，它是~/pages/index.cshtml。例如：

HTML

確保URL中的版本與項目中使用的Telerik Blazor套包的版本相匹配。

 

1. 添加TelerikDatePicker標簽

 

日期選取器組件公開以下功能：

• BottomView——在彈出日歷中定義用戶可以導航到的最底部視圖。默認為CalendarView.Month。

• 禁用日期——指定無法選擇的日期列表。

• 啟用——指定是否允許輸入。

• 高度——定義日期選取器的高度。默認為28px。

• 格式——指定日期選取器的日期輸入格式。默認為YYYY-MM-DD。

• PopupHeight——定義日期選取器彈出窗口的高度。默認為280px。

• PopupWidth——定義日期選取器彈出窗口的寬度。默認為320px。

• 值——輸入的當前值?？捎糜谘b訂。

• 視圖——指定將在彈出日歷中顯示的當前視圖。

• 寬度——定義日期選取器的寬度。默認為280px。

• 驗證。

 

日期選擇器本質上是一個日期輸入和一個日歷，它公開的屬性映射到這兩個組件的相應屬性。您可以在各自組件的文檔中了解更多關于它們行為的信息。