Blazor Tab control
Tabs can make your blazor application look more seemless without the user having to change pages. One huge benefit is that you can change tabs to show different information and not loose model/list state.
To start just create a simple blazor server side project. We first must define the size,shape and color of our tabs. We can accomplish this simply.
In the index.razor page add the following.
<style> .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } .tab button:hover { background-color: #ddd; }
.tabcontent { padding: 6px 12px; border: 1px solid black; border-top: none; }</style> Now Create the tab row <div class="tab"> <input type="button" @onclick="() => EnableTab(1)" class="btn btn-primary" value="Tab1" /> <input type="button" @onclick="() => EnableTab(2)" class="btn btn-primary" value="Tab2" /> <input type="button" @onclick="() => EnableTab(3)" class="btn btn-primary" value="Tab3" /> <input type="button" @onclick="() => EnableTab(4)" class="btn btn-primary" value="tab4" /> <input type="button" @onclick="() => EnableTab(5)" class="btn btn-primary" value="Tab5" /> </div> <input type="button" class="btn btn-primary" value="Next" @onclick=CheckTab /> @*Create the layout*@ @if (TabVal1) { <h1>Tab 1</h1> } @if (TabVal2){ <h1>Tab 2</h1>} @if (TabVal3){ <h1>Tab 3</h1>} @if (TabVal4){ <h1>Tab 4</h1>} @if (TabVal5){ <h1>Tab 5</h1>} @code { public bool TabVal1 = true; public bool TabVal2 = false; public bool TabVal3 = false; public bool TabVal4 = false; public bool TabVal5 = false; public async Task EnableTab(int TabNum) { switch (TabNum) { case 1: TabVal1 = true; TabVal2 = false; TabVal3 = false; TabVal4 = false; TabVal5 = false; break; case 2: TabVal2 = true; TabVal1 = false; TabVal3 = false; TabVal4 = false; TabVal5 = false; break; case 3: TabVal3 = true; TabVal1 = false; TabVal2 = false; TabVal4 = false; TabVal5 = false; break; case 4: TabVal4 = true; TabVal1 = false; TabVal2 = false; TabVal3 = false; TabVal5 = false; break; case 5: TabVal5 = true; TabVal1 = false; TabVal2 = false; TabVal3 = false; TabVal4 = false; break; default: break; } } *But lets say you you have the user filling out a form and dont want them to be able to click another tab until some task is completed on the current tab. This can be accomplished by adding the boolean disabled to the buttons for example <input type="button" @onclick="() => EnableTab(2)" class="btn btn-primary" value="Tab 2" disabled=@IsDisabled2 /> Add in your @code protected bool IsDisabled2 { get; set; } public void checkTab(){@* the next button of first tab was clicked.. Enable all tabs or just the next one whichever works best for you *@TabVal2 = true;} There are 1000's of way to do this i have found this to be the quickest for me. Maybe not the cleanest but deffinely the quickest.
.tabcontent { padding: 6px 12px; border: 1px solid black; border-top: none; }</style> Now Create the tab row <div class="tab"> <input type="button" @onclick="() => EnableTab(1)" class="btn btn-primary" value="Tab1" /> <input type="button" @onclick="() => EnableTab(2)" class="btn btn-primary" value="Tab2" /> <input type="button" @onclick="() => EnableTab(3)" class="btn btn-primary" value="Tab3" /> <input type="button" @onclick="() => EnableTab(4)" class="btn btn-primary" value="tab4" /> <input type="button" @onclick="() => EnableTab(5)" class="btn btn-primary" value="Tab5" /> </div> <input type="button" class="btn btn-primary" value="Next" @onclick=CheckTab /> @*Create the layout*@ @if (TabVal1) { <h1>Tab 1</h1> } @if (TabVal2){ <h1>Tab 2</h1>} @if (TabVal3){ <h1>Tab 3</h1>} @if (TabVal4){ <h1>Tab 4</h1>} @if (TabVal5){ <h1>Tab 5</h1>} @code { public bool TabVal1 = true; public bool TabVal2 = false; public bool TabVal3 = false; public bool TabVal4 = false; public bool TabVal5 = false; public async Task EnableTab(int TabNum) { switch (TabNum) { case 1: TabVal1 = true; TabVal2 = false; TabVal3 = false; TabVal4 = false; TabVal5 = false; break; case 2: TabVal2 = true; TabVal1 = false; TabVal3 = false; TabVal4 = false; TabVal5 = false; break; case 3: TabVal3 = true; TabVal1 = false; TabVal2 = false; TabVal4 = false; TabVal5 = false; break; case 4: TabVal4 = true; TabVal1 = false; TabVal2 = false; TabVal3 = false; TabVal5 = false; break; case 5: TabVal5 = true; TabVal1 = false; TabVal2 = false; TabVal3 = false; TabVal4 = false; break; default: break; } } *But lets say you you have the user filling out a form and dont want them to be able to click another tab until some task is completed on the current tab. This can be accomplished by adding the boolean disabled to the buttons for example <input type="button" @onclick="() => EnableTab(2)" class="btn btn-primary" value="Tab 2" disabled=@IsDisabled2 /> Add in your @code protected bool IsDisabled2 { get; set; } public void checkTab(){@* the next button of first tab was clicked.. Enable all tabs or just the next one whichever works best for you *@TabVal2 = true;} There are 1000's of way to do this i have found this to be the quickest for me. Maybe not the cleanest but deffinely the quickest.