Blazor University （18）使用 RenderFragments 模板化组件 —— 创建 TabControl

原文链接：https://blazor-university.com/templating-components-with-renderfragements/creating-a-tabcontrol/

创建一个 TabControl 组件

源代码^[1]

接下来我们将创建一个 TabControl 组件。这将教您如何实现以下目标：

1. 将数据传递到 RenderFragment 以为其提供上下文。

2. 使用 CascadingParameter 将父 TabControl 组件传递到其子 TabPage 组件。

使 TabPage 知道其父级

第一步是创建两个组件。一个命名为 TabControl，另一个命名为 TabPage。TabPage 组件将需要对其父 TabControl 的引用，这将通过 TabControl 将自身设置为 CascadingValue 中的值来实现，并且 TabPage 将通过 CascadingParameter 获取该值。

<div>This is a TabControl</div>
<CascadingValue Value="this">
  @ChildContent
</CascadingValue>

@code {
  // Next line is needed so we are able to add <TabPage> components inside
  [Parameter]
  public RenderFragment ChildContent { get; set; }
}

<div>This is a TabPage</div>
@ChildContent

@code {
  [CascadingParameter]
  private TabControl Parent { get; set; }

  [Parameter]
  public RenderFragment ChildContent { get; set; }

  protected override void OnInitialized()
  {
    if (Parent == null)
      throw new ArgumentNullException(nameof(Parent), "TabPage must exist within a TabControl");
    base.OnInitialized();
  }
}

使 TabControl 知道其所属页面

更改 TabPage 组件，以便通过在其 OnInitialized 方法的末尾添加以下行来通知其父级它的存在。

Parent.AddPage(this);

更改 TabControl 组件以添加 AddPage 方法并存储引用。另外，让我们添加一个 ActivePage 属性。

public TabPage ActivePage { get; set; }
List<TabPage> Pages = new List<TabPage>();

internal void AddPage(TabPage tabPage)
{
  Pages.Add(tabPage);
  if (Pages.Count == 1)
    ActivePage = tabPage;
  StateHasChanged();
}

为每个 TabPage 呈现一个选项卡

向 TabPage 组件添加一个 Text 参数，以便其父 TabControl 知道要在激活每个页面的按钮内显示什么文本。

[Parameter]
public string Text { get; set; }

然后将以下标记添加到 TabControl（就在呈现 ChildContent 的位置上方），这将呈现选项卡，并在单击选项卡时更改选择哪个 TabPage。

<div class="btn-group" role="group">
  @foreach (TabPage tabPage in Pages)
  {
    <button type="button"
      class="btn @GetButtonClass(tabPage)"
      @onclick=@( () => ActivatePage(tabPage) )>
      @tabPage.Text
    </button>
  }
</div>

标记将创建一个标准的 Bootstrap 按钮组，然后为每个 TabPage 创建一个具有以下显著特征的按钮：

1. CSS 类设置为“btn”，由 GetButtonClass 方法返回附加内容。如果选项卡是 ActivePage，这将是“btn-primary”，如果不是，则为“btn-secondary”。

2. 单击按钮时，它将激活为其创建按钮的页面。

注意： @onclick 需要一个无参数的方法，所以在 @() 中使用了一个 lambda 表达式来使用正确的 TabPage 执行 ActivatePage。

1. 按钮的文本设置为 TabPage 的 Text 属性的值。

并将以下内容添加到 TabControl 的代码部分。

string GetButtonClass(TabPage page)
{
  return page == ActivePage ? "btn-primary" : "btn-secondary";
}

void ActivatePage(TabPage page)
{
  ActivePage = page;
}

使用选项卡控件

将以下标记添加到页面并运行应用程序。

<TabControl>
  <TabPage Text="Tab 1">
    <h1>The first tab</h1>
  </TabPage>
  <TabPage Text="Tab 2">
    <h1>The second tab</h1>
  </TabPage>
  <TabPage Text="Tab 3">
    <h1>The third tab</h1>
  </TabPage>
</TabControl>

仅显示活动页面

此时 TabControl 将显示所有 TabPages。要解决此问题，只需更改 TabPage 中的标记，使其仅在它是其父 TabControl 的 ActivePage 时才呈现其 ChildContent。

@if (Parent.ActivePage == this)
{
  @ChildContent
}

参考资料

[1]

源代码: https://blazor-university.com/templating-components-with-renderfragements/creating-a-tabcontrol/