样式和主题

新Blazor的Telerik UI?下载30天免费试用

内置主题

Blazor套件的UI带有一组内置主题，您可以从中选择以改变Telerik组件的视觉外观(您可以在我们的web应用程序中测试它们)现场演示)：

Blazor套件的UI与其他Kendo UI套件一样，具有相同的HTML渲染和SASS主题样式表，因此以前使用它们的经验可能会有所帮助。中的组件UI为Blazor是本地组件而不是jQuery小部件的包装。

类中引用其样式表才能使用主题< >头你的主索引文件。对于一个客户端Blazor应用程序，这是wwwroot / index . html对于一个服务器端Blazor应用，它是~ / / _Host.cshtml页面．服务器应用程序的Razor语法不同，您需要转义@符号是@@．

本文包含以下部分:

静态的资产

静态资产是NuGet包的一部分，框架会在构建过程中自动将它们复制到输出文件夹。它们提供以下好处:

  • 您总是可以从框架中获得包的必要资源。
  • 应用程序只能依赖于本地资源，而不能依赖于第三方(如CDN提供商)。
  • 您不必在更新包版本后更改它们的路径(使用cdn时的常见需求)。

从静态资产中引用Telerik主题

<！DOCTYPE html>  <头>…<！——只选择一个主题——>   ——>   <链接href="//www.aliitrade.com/docs/blazor-ui/styling-and-themes/_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-bootstrap/all.css" rel="样式表" /> <链接href="//www.aliitrade.com/docs/blazor-ui/styling-and-themes/_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-material/all.css" rel="样式表" />——> …< / html >

CDN

您可以从云CDN(而不是服务器上的本地资源)引用内置的Telerik资产，如JS Interop文件和主题样式表。

<！DOCTYPE html>  <头>…<！——只选择一个主题——>   ——>< script src="//www.aliitrade.com/blazor.cdn/blazor/4.0.1/telerik-blazor.min.js" defer> …< / html >

确保url中的版本与Blazor包的Telerik UI版本匹配。

如果你决定使用CDN而不是静态资产，你可能需要实现一个回退如果CDN对您的用户不可用。

可选依赖管理

而不是CDN或我们的静态资产，您可以获取样式表到您的项目，例如，自定义主题，或将其与其他样式表捆绑。要做到这一点，你可以:

Libman

的LibMan客户端依赖管理器是内置的ASP。NET核心:

  1. 在服务器应用程序根目录中添加libman.json文件内容如下:

    libman.json

    {“版本”:“1.0”,“defaultProvider”:“unpkg”、“库”:[{“图书馆”:“@progress / kendo-theme-default@latest”、“目的地”:“wwwroot / css / kendo-themes /违约”,“文件”:[" dist / all.css " ] }, { " 图书馆”:“@progress / kendo-theme-bootstrap@latest”、“目的地”:“wwwroot / css / kendo-themes /引导”、“文件”:[" dist / all.css " ] }, { " 图书馆”:“@progress / kendo-theme-material@latest”、“目的地”:“wwwroot / css / kendo-themes /材料”、“文件”:[" dist / all.css”]}]}

    有一些报道说@latest版本有时不能使用类似的消息“@progress/kendo-theme-material@latest”库无法由“unpkg”提供程序解析．如果稍后再试没有帮助，您可以更换@latest主题的当前最新版本的名称主题回收发布部分．例如,^ 3.0.0获取主版本的最新版本3.．如果您提交了这样的版本，您可能需要在一段时间后检查更新。

    类的包引用Microsoft.Web.LibraryManager.Build包，以便LibMan在构建时解析依赖项，而不是手动解析。如果已经恢复了某个版本，则可能需要调用重建更新它。

  2. 在客户机Blazor应用程序中，转到wwwroot / index . html并将CDN链接替换为下面的链接。对于服务器端Blazor项目，在~ / / _Host.cshtml页面文件。

    索引文件与本地样式表

    <！DOCTYPE html>  <头>…   ——>  . .< / html >

NPM包

基于sass的Kendo UI主题位于Progress NPM注册表中:

  • 剑道UI默认主题-可用@progress/kendo-theme-default
  • 剑道UI Bootstrap v4主题@progress/kendo-theme-bootstrap
  • 剑道UI材质主题@progress/kendo-theme-material

您可以阅读有关使用此方法的更多信息自定义主题-手动过程篇文章。

材料的笔记

对于Telerik Material主题的紧密实现材料设计指引，则应提供Roboto字体的家庭。

默认情况下，Material主题使用Roboto字体家族，但字体本身不包括在Telerik主题中-这不是我们的属性，它也会给我们的包增加膨胀。

您可以从谷歌Fonts中添加字体到页面，方法如下:

 
         
          
         
        改进这篇文章
Baidu
map