Blazor How To: Folding Content
August 20, 2020 03:44
David Jones MVP
blazor
blazorhowto
aspnetcore
dnetcore
blazorcomponents
csharp
20 Aug 2020 03:44:23
David Jones MVP
blazor blazorhowto aspnetcore dnetcore blazorcomponents csharp
blazor blazorhowto aspnetcore dnetcore blazorcomponents csharp
How to show and hide Blazor content. Its simple!
When creating UIs using XAML, to show and hide content you typically manipulate the Visbility property of a div tag or other Html element. In Blazor it is far simpler. You just wrap teh content in a Blazor if sequence.
@if (Viz)
{
<h1>The Heading for Visible</h1>
}
else
{
<h1>The Heading for Viz false</h1>
}
<button class="btn btn-primary" @onclick="@Toggle">Toggle Viz</button>
@code{
bool Viz {get;set;} = true;
protected void Toggle(MouseEventArgs e)
{
Viz = ! Viz;
StateHasChanged();
}
}
That is all it takes!
It is worth noting that the Html code in the “hidden” part is not actually hidden! If you look at the source, when in a browser, you will find that the “hidden” part only comes into existence in the DOM when it is toggled to show
Topic | Subtopic | |
This Category Links | ||
Category: | Blazor Index: | Blazor |
Next: > | Blazor How To | WASM Http File Get - Client Request |
< Prev: | Blazor | A Recursive Client Folde Component - 2 |