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

 

主要特點(diǎn)

 

模板支持

有了本機(jī)組件，Telerik UI for Blazor Grid可以充分利用Blazor的最佳功能來(lái)高度定制用戶體驗(yàn)。

 

本機(jī)Blazor驗(yàn)證集成

UI for Blazor套包支持并無(wú)縫集成到Blazor的表單和驗(yàn)證基礎(chǔ)架構(gòu)中。所有Telerik UI for Blazor 輸入組件都是打開(kāi)就能用的，當(dāng)被放置在EditForm中，響應(yīng)EditContext更改并提供默認(rèn)的無(wú)效樣式時(shí)。

 

 

現(xiàn)代化設(shè)計(jì)

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

 

 

讓您的錢花得有價(jià)值

 

投資回報(bào)率/削減開(kāi)發(fā)時(shí)間

我們將領(lǐng)先的客戶機(jī)端技術(shù)和服務(wù)器端解決方案結(jié)合在價(jià)格友好的套包中。Javascript, ASP.NET, PHP和JSP——完整的套包！

 

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

 

 

領(lǐng)先的技術(shù)支持

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

如果您不是開(kāi)發(fā)人員或沒(méi)有時(shí)間評(píng)估我們的產(chǎn)品，請(qǐng)向我們發(fā)送您的項(xiàng)目需求。我們將評(píng)估您所需的功能，并告訴您我們的產(chǎn)品將如何滿足您的需求。

 

 

作為Devcraft的一部分來(lái)購(gòu)買

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

 

 

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

 

探索我們的本地UI Blazor組件

 

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

 

• Grid

 

要?jiǎng)?chuàng)建基本Telerik Grid：

1. 使用TelerikGrid標(biāo)簽

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

3. 在其TelerikGridColumns標(biāo)簽下，設(shè)置您想要的 TelerikGridColumn實(shí)例，其字段屬性指向模型字段名稱。

 

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

 

 

上面代碼段的結(jié)果

 

 

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

 

引用

 

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

 

存儲(chǔ)對(duì)Telerik Grid的引用

 

 

導(dǎo)航

 

• 按鈕

 

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

 

基本按鈕

 

要將Telerik按鈕添加到Blazor應(yīng)用程序，請(qǐng)使用< TelerikButton >標(biāo)簽：

 

基本Telerik按鈕標(biāo)簽

 

 

上面代碼段的結(jié)果

 

組件命名空間和引用

 

 

Click Handler

 

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

 

單擊Telerik按鈕的處理程序

 

 

樣式

 

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

 

將CSS類設(shè)置為按鈕并更改其外觀

 

 

上面代碼段的結(jié)果

 

 

您也可以使按鈕使用一種強(qiáng)烈的顏色來(lái)吸引注意力，稱為主按鈕樣式。為此，請(qǐng)將其Primary屬性設(shè)置為true。

 

當(dāng)前主題的主配色方案按鈕

 

 

上面代碼段的結(jié)果，帶有默認(rèn)主題

 

 

 

圖標(biāo)

 

您可以在按鈕中放置圖像、sprite或字體圖標(biāo)，以說(shuō)明其對(duì)最終用戶的用途。要應(yīng)用它們，請(qǐng)使用以下屬性：

• 對(duì)于字體圖標(biāo)，使用圖標(biāo)屬性設(shè)置字體圖標(biāo)類。

• 對(duì)于圖像，使用ImageUrl 屬性提供URL

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

 

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

對(duì)于自定義字體圖標(biāo)，您可以在您的Icon CSS類中定義字體和glyph。

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

 

如何在Telerik按鈕中使用圖標(biāo)

 

上面代碼段的結(jié)果

 

 

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

 

禁用狀態(tài)

 

要禁用按鈕，請(qǐng)將其啟用屬性設(shè)置為false。

 

禁用Telerik按鈕

 

 

禁用和啟用按鈕的比較

 

 

按鈕類型

 

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

 

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

• Submit-呈現(xiàn)type=“Submit”屬性?？梢蕴峤槐韱尾⒂|發(fā)驗(yàn)證。默認(rèn)值。

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

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

 

• 選項(xiàng)卡條

 

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

 

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

 

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

• 頂部（默認(rèn)）

• 左邊

• 右邊

• 底部

 

帶有示例參考、選項(xiàng)卡位置和禁用選項(xiàng)卡的Telerik選項(xiàng)卡條

 

 

上面代碼段的結(jié)果

 

 

獲取所選的選項(xiàng)卡

 

以編程方式選擇選項(xiàng)卡

 

編輯

 

• 文本框

 

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

 

要將Telerik文本框用于Blazor，請(qǐng)?zhí)砑覶elerikTextBox標(biāo)簽。

 

基本文本框及其關(guān)鍵功能和ValueChanged事件處理

 

 

組件命名空間和引用

 

 

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

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

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

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

• 最大長(zhǎng)度——用戶輸入文本的最大長(zhǎng)度。

• 最小長(zhǎng)度——用戶輸入文本的最小長(zhǎng)度。

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

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

• 寬度——輸入的寬度。

• 驗(yàn)證

 

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

 

• 數(shù)字文本框

 

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

 

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

 

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

HTML

 

確保URL中的版本與項(xiàng)目中使用的Telerik Blazor 套包的版本匹配。

 

2.添加teleriknumerictextbox標(biāo)簽

 

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

 

組件命名空間和引用

 

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

• 箭頭——是否顯示上/下微調(diào)器箭頭（按鈕）。默認(rèn)為true。

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

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

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

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

• Step——使用箭頭時(shí)，值隨步驟變化的十進(jìn)制值。必須與值的類型相同。

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

• 值——獲取/設(shè)置輸入值。

• 驗(yàn)證。

 

• 日期輸入

 

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

 

要對(duì)Dlazor使用Telerik日期輸入：

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

HTML

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

 

1. 添加TelerikDateInput標(biāo)簽

 

日期輸入提供以下功能：

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

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

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

• ParsingErrorMessage——當(dāng)用戶的輸入無(wú)法按所需格式分析時(shí)，通過(guò)驗(yàn)證向用戶顯示的提示。

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

• 寬度——輸入的寬度。

• 驗(yàn)證。

 

• 日期選擇器

 

日期選取器組件允許用戶從可視列表（日歷）中選擇日期或?qū)⑵滏I入只能接受日期的日期輸入。您可以控制輸入中顯示的格式、用戶在日歷中導(dǎo)航的方式以及用戶無(wú)法選擇的日期。

 

如何使用Telerik Date Picker for Blazor：

 

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

HTML

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

 

1. 添加TelerikDatePicker標(biāo)簽

 

日期選取器組件公開(kāi)以下功能：

• BottomView——在彈出日歷中定義用戶可以導(dǎo)航到的最底部視圖。默認(rèn)為CalendarView.Month。

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

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

• 高度——定義日期選取器的高度。默認(rèn)為28px。

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

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

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

• 值——輸入的當(dāng)前值?？捎糜谘b訂。

• 視圖——指定將在彈出日歷中顯示的當(dāng)前視圖。

• 寬度——定義日期選取器的寬度。默認(rèn)為280px。

• 驗(yàn)證。

 

日期選擇器本質(zhì)上是一個(gè)日期輸入和一個(gè)日歷，它公開(kāi)的屬性映射到這兩個(gè)組件的相應(yīng)屬性。您可以在各自組件的文檔中了解更多關(guān)于它們行為的信息。