原文鏈接：https://blazor-university.com/templating-components-with-renderfragements/creating-a-tabcontrol/
創建一個 TabControl 組件
源代碼[1]
接下來我們將創建一個 TabControl 組件。這將教您如何實現以下目標：
將數據傳遞到
RenderFragment以為其提供上下文。使用
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 創建一個具有以下顯著特征的按鈕：
CSS 類設置為“btn”，由
GetButtonClass方法返回附加內容。如果選項卡是ActivePage，這將是“btn-primary”，如果不是，則為“btn-secondary”。單擊按鈕時，它將激活為其創建按鈕的頁面。
注意： @onclick 需要一個無參數的方法，所以在 @() 中使用了一個 lambda 表達式來使用正確的 TabPage 執行 ActivatePage。
按鈕的文本設置為
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/
)
