Dämpa sidan för att rikta uppmärksamheten, eller bara en del av den, och placera innehåll som en laddningsindikator ovanpå.
Varför det hjälper
- Hel sida eller ett område
- Innehåll ovanpå
- Enkel
Var det passar
- Laddning
- Modalt fokus
- Förhandsvisningar
Exempel
<Button Variant="Variant.Outlined" OnClick="Run">Load for 2 seconds</Button>
<div style="position:relative;min-height:8rem" class="doc-demo-box">
Content that is covered while loading.
<Overlay Visible="_busy" Absolute="true"><Stack Align="center"><Spinner /><span>Loading…</span></Stack></Overlay>
</div>
@code {
private bool _busy;
private async Task Run()
{
_busy = true;
StateHasChanged();
await Task.Delay(2000);
_busy = false;
}
}Ett kort utdrag. Lägg till @using RayCraft.Blazor.Components på din sida och använd ett interaktivt renderingsläge.
Ingår i RayCraft Free. Fungerande exempel finns i GitHub-arkiv (MIT); det innehåller exempel- och demokod, inte bibliotekets kod.