Atenúa la página para centrar la atención, o solo una parte, y coloca contenido como un indicador de carga encima.
Por qué ayuda
- Página entera o una región
- Contenido encima
- Sencillo
Dónde encaja
- Carga
- Foco modal
- Vistas previas
Ejemplo
<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;
}
}Un breve fragmento. Añade @using RayCraft.Blazor.Components a tu página y usa un modo de renderizado interactivo.
Incluido en RayCraft Free. Hay ejemplos que funcionan en el repositorio de GitHub (MIT); contiene código de ejemplo y demostración, no el código de la biblioteca.