Dunkeln Sie die Seite ab, um die Aufmerksamkeit zu lenken, oder nur einen Teil davon, und setzen Sie Inhalte wie einen Spinner darüber.
Warum es hilft
- Ganze Seite oder ein Bereich
- Inhalt oben
- Einfach
Wo es passt
- Laden
- Modaler Fokus
- Vorschauen
Beispiel
<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;
}
}Ein kurzes Fragment. Fügen Sie @using RayCraft.Blazor.Components zu Ihrer Seite hinzu und nutzen Sie einen interaktiven Render-Modus.
In RayCraft Free enthalten. Funktionierende Beispiele finden Sie im GitHub-Repository (MIT); es enthält Beispiel- und Democode, nicht den Code der Bibliothek.