Skip to content

Instantly share code, notes, and snippets.

Created July 30, 2020 17:23
What would you like to do?
Blazor - GreyOutZone - adapted from FlightFinder but with embedded styles so works stand-alone
@* creates a container component that greys-out the content when the `IsGreyedOut` parameter is set to true *@
<div style="@(IsGreyedOut ? greyout : null)">
<div style="@cover"></div>
@code {
const string greyout = "position: absolute; width: 100%; min-height: 100%;";
const string cover = "background: rgba(150, 150, 150, 0.5); position: absolute; width: 100%; height: 100%; z-index: 1;";
[Parameter] public RenderFragment ChildContent { get; set; }
[Parameter] public bool IsGreyedOut { get; set; }
@* adapted from *@
@* uses inline-styles so can be dropped in with no need to amend your CSS
feel free to using CSS class names (as per original example)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment