样式和主题

新《Blazor》的teleerik UI？免费下载30天试用版

内置主题

Blazor套件的UI带有一组内置主题，您可以选择这些主题来改变Telerik组件的视觉外观(您可以在我们的插件中测试它们)现场演示):

Blazor套件的UI与其他剑道UI套件具有相同的HTML呈现和SASS主题样式表，因此以前使用它们的经验可能会有所帮助。的分量Blazor的UI是本地组件而不是jQuery小部件上的包装器。

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

本文包含以下部分:

静态的资产

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

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

从静态资产中引用Telerik主题

< !DOCTYPE html>  …< !——只选择一个主题——>       -> …< / html >

CDN

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

< !DOCTYPE html>  …< !——只选择一个主题——>    ->  …< / 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链接替换为下面的CDN链接。对于服务器端Blazor项目，在~ / / _Host.cshtml页面文件。

    带有本地样式表的索引文件

    < !DOCTYPE html>  …    -> …< / html >

NPM包

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

  • 剑道UI默认主题-可用@progress/kendo-theme-default。
  • 剑道UI引导v4主题-可作为@progress/kendo-theme-bootstrap。
  • 剑道UI材质主题-可作为@progress/kendo-theme-material。

有关使用此方法的更多信息，请参见自定义主题-手动过程篇文章。

材料的笔记

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

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

您可以通过以下方式从Google Fonts中添加字体到页面:


         
          
         
        改进这篇文章
Baidu
map