Verduister de pagina om de aandacht te richten, of slechts een deel ervan, en plaats inhoud zoals een laadindicator erbovenop.
Waarom het helpt
- Hele pagina of een gebied
- Inhoud erbovenop
- Eenvoudig
Waar het past
- Laden
- Modale focus
- Voorbeelden
Voorbeeld
<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;
}
}Een kort fragment. Voeg @using RayCraft.Blazor.Components toe aan je pagina en gebruik een interactieve rendermodus.
Inbegrepen in RayCraft Free. Werkende voorbeelden staan in de GitHub-repository (MIT); het bevat voorbeeld- en democode, niet de code van de bibliotheek.