Hoppa till innehållet
ÅTERKOPPLING · FREE

BusyOverlay

Håll användare informerade medan något laddas och stoppa oavsiktliga klick.

Omslut ett område och dämpa det medan det är upptaget, visa en laddningsindikator och blockera klick, så att ingen arbetar med inaktuella data.

Varför det hjälper

  • Blockerar området
  • Indikator ovanpå
  • Tillkännager upptaget tillstånd

Var det passar

  • Paneler som laddas
  • Sparande
  • Uppdatering av data
Kontrollen BusyOverlay på en RayCraft-sida

Exempel

<Stack Direction="StackDirection.Column" Spacing="2">
    <Button OnClick="Load">Reload</Button>
    <BusyOverlay Busy="_busy" Label="Loading orders">
        <Card>
            <Descriptions>
                <DescriptionItem Label="Orders">@_count</DescriptionItem>
                <DescriptionItem Label="Updated">@_updated</DescriptionItem>
            </Descriptions>
        </Card>
    </BusyOverlay>
</Stack>

@code {
    private bool _busy;
    private int _count = 128;
    private string _updated = "never";

    private async Task Load()
    {
        _busy = true;
        await Task.Delay(1800);
        _count += 7;
        _updated = DateTime.Now.ToString("T");
        _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.

Alla kontroller ยท Dokumentation