组件/LoaderContainer

Blazor LoaderContainer概述

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

Telerik UI的Blazor忍者形象

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

下载免费试用

与Loader的比较

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

创建LoaderContainer

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

基本LoaderContainer

 Data Count: @Data?Count 
  @code{列表<字符串>数据{获取;设置;} protected override async Task OnInitializedAsync(){等待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”>元素。用它来覆盖主题样式．参见自定义LoaderContainer颜色．
OverlayThemeColor 字符串
（“黑暗”）		 设置半透明覆盖层的颜色．使用“光”或“黑暗”．
大小 字符串
（“医学博士”）		 设置动画图形的大小．为方便起见，使用静态类的成员ThemeConstants.Loader.Size．
文本 字符串
（“加载……”）		 设置加载动画下面的文本。设置为零或字符串。空以删除文本及其包含的HTML元素。
ThemeColor 字符串
（“主”）		 设置动画图形和文本的颜色．为方便起见，使用静态类的成员ThemeConstants.Loader.ThemeColor．
LoaderPosition LoaderPosition枚举
（前）		 定义了加载动画位置相对于加载文本。
LoaderType LoaderType枚举
（脉冲）		 定义了加载动画形状．
可见 保龄球
（真正的）		 如果LoaderContainer在页面上呈现，则控制。

例子

屏蔽所有内容

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

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

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

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

从LoaderContainer中移除面板

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

@*带有透明面板的LoaderContainer *@  
         
          
         
        改进这篇文章
Baidu
map