LoaderContainer模板

的模板允许你控制LoaderContainer的呈现。当你使用模板默认情况下不会呈现任何面板。

本文提供了一些示例，说明如何:

• 创建一个自定义LoaderContainer
• 实现自定义面板

创建一个自定义LoaderContainer

这个例子展示了如何更改默认显示的加载文本和动画的内容。一旦您设置了模板，容器的默认白色背景将消失，因此您可以完全控制它的外观。

@*使用模板自定义LoaderContainer内容*@ < Template>  
  Please wait, the application is loading…" 
     @code {public List GridData {get;设置;}公共类GridDataModel{公共int Id{获取;设置;} public string用户名{get;设置;}公共字符串EmailAddress{获取; set; } public DateTime? RegistrationDate { get; set; } public DateTime? LocalTime { get; set; } } public List GenerateGridData() { var data = Enumerable.Range(1, 15).Select(i => new GridDataModel() { Id = i, Username = $"Username {i}", EmailAddress = $"user{i}@mail.com", RegistrationDate = DateTime.Now.AddDays(-2), LocalTime = DateTime.Now }).ToList(); return data; } protected override async Task OnInitializedAsync() { await Task.Delay(6000); GridData = GenerateGridData(); } }

实现自定义面板

您可以使用CSS来定位在模板周围创建Panel的DOM元素，以便您可以根据需要设置它们的样式。默认情况下，面板是白色的，与默认的黑色叠加。这个例子展示了如何自定义它的颜色和内容。

@*创建一个自定义面板来突出显示自定义加载指示器和加载文本*@  < Template>  
  Loading…" 
     @code {public List GridData {get;设置;}公共类GridDataModel{公共int Id{获取;设置;} public string用户名{get; set; } public string EmailAddress { get; set; } public DateTime? RegistrationDate { get; set; } public DateTime? LocalTime { get; set; } } public List GenerateGridData() { var data = Enumerable.Range(1, 15).Select(i => new GridDataModel() { Id = i, Username = $"Username {i}", EmailAddress = $"user{i}@mail.com", RegistrationDate = DateTime.Now.AddDays(-2), LocalTime = DateTime.Now }).ToList(); return data; } protected override async Task OnInitializedAsync() { await Task.Delay(6000); GridData = GenerateGridData(); } }

另请参阅

• 现场演示:LoaderContainer
• 外观设置