Hopp til innholdet
OVERLEGG · FREE

Overlay

Demp siden for å rette oppmerksomheten.

Demp siden for å rette oppmerksomheten, eller bare en del av den, og plasser innhold som en lasteindikator oppå.

Hvorfor det hjelper

  • Hel side eller ett område
  • Innhold oppå
  • Enkel

Hvor det passer

  • Lasting
  • Modalt fokus
  • Forhåndsvisninger
Kontrollen Overlay på en RayCraft-side

Eksempel

<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;
    }
}

Et kort utdrag. Legg til @using RayCraft.Blazor.Components på siden din, og bruk en interaktiv gjengivelsesmodus.

Inkludert i RayCraft Free. Fungerende eksempler finnes i GitHub-arkiv (MIT); det inneholder eksempel- og demokode, ikke bibliotekets kode.

Alle kontroller ยท Dokumentasjon