组件/LoaderContainer

Blazor LoaderContainer概述

的Blazor LoaderContainer在应用程序执行耗时的后台操作(例如加载数据)时，可以使用动画指示器、面板和覆盖层。

为Blazor Ninja图像的Telerik UI

LoaderContainer组件是为Blazor的Telerik UI，一个具有100个本地组件的专业级UI库，用于构建现代和功能丰富的应用程序。想要试用它，请注册一个30天的免费试用。

下载免费试用

与装载机的比较

的LoaderContainer设计用于覆盖整个组件、HTML元素或整个页面。另一方面，加载程序组件更适合在页面较小的区域显示加载指示器，并且没有覆盖。

创建LoaderContainer

  1. 使用< TelerikLoaderContainer >标签。
  2. 设置可见的参数。保龄球属性或表达式。
  3. (可选)设置文本的参数。字符串．

基本LoaderContainer

数据计数:@Data?。Count 
  @code {List Data {get;设置;} protected override async Task OnInitializedAsync() {await Task. delay (3000);//模拟慢加载数据数据=可枚举。范围(10)。Select(x => $"数据项{x}").ToList();}}

不要在方法中以编程方式显示或隐藏LoaderContainer，这会阻塞UI线程。如果发生这种情况，LoaderContainer可能不会在预期的时候出现。

默认情况下，加载器容器将填充浏览器视口。若要仅覆盖特定元素，请参见填充父容器下面的部分。

外观

Blazor LoaderContainer提供各种设置其视觉外观：

  • 覆盖的颜色
  • 图文位置
  • 加载动画类型
  • 大小
  • 文字和图形颜色

模板

LoaderContainer可以显示不同的嵌套内容。欲知详情，请浏览LoaderContainer模板文章．

填充父容器

Blazor LoaderContainer可以展开来只填充一个特定的父容器。要将LoaderContainer限制在父容器的边界内，请设置位置:相对CSS样式的父元素。

使用LoaderContainer来填充父元素

< span style=" font - family:宋体;宽度:600 px;身高:400 px;">
.

LoaderContainer参数

下表列出了LoaderContainer的参数。还要检查LoaderContainer API参考．

参数 类型及默认值 描述
类 字符串 对象呈现自定义CSS类< div class = " k-loader-container”>元素。用它来覆盖主题样式．参见以下示例:自定义装载器容器颜色．
OverlayThemeColor 字符串
（“黑暗”）		 设置半透明覆盖层的颜色．使用“光”或“黑暗”．
大小 字符串
（“医学博士”）		 设置动画图形的大小．为方便起见，请使用静态类的成员ThemeConstants.Loader.Size．
文本 字符串
（“加载……”）		 设置加载动画下面的文本。设置为零或字符串。空删除文本及其包含的HTML元素。
ThemeColor 字符串
（“主”）		 设置动画图形和文本的颜色．为方便起见，请使用静态类的成员ThemeConstants.Loader.ThemeColor．
LoaderPosition LoaderPosition枚举
（前）		 定义了加载动画位置与加载文本有关。
LoaderType LoaderType枚举
（脉冲）		 定义了加载动画形状．
可见 保龄球
（真正的）		 控制是否在页面上呈现LoaderContainer。

例子

屏蔽所有内容

默认情况下，Loader Container填充浏览器视口，因为这是它唯一可以使用的特定大小——应用程序布局可以改变尺寸和滚动条出现的位置，组件没有办法知道这一点并迎合所有可能的布局。

因此，如果你想让加载器容器阻止应用程序上的所有内容，当它被显示时，你必须确保应用程序的总大小适合viewport和滚动条出现在你可以定义的元素上。

由于确切的CSS规则和元素将根据布局而变化，因此您需要检查呈现以便定义它们。

您可以在下面的例子中找到一个示例项目：禁用Telerik Loader的所有内容

从LoaderContainer中移除面板

面板是围绕动画加载器指示器和文本．它的目的是增加对比度和提高可读性。要删除白色矩形，使用自定义CSS代码:

@*带有透明面板的LoaderContainer *@  
         
          
         
        改进本文
Baidu
map