Ramboe.Blazor.UserFeedback
1.0.0
Ramboe UserFeedback - Uma biblioteca Blazor para mostrar spinners, erros e mensagens de sucesso durante chamadas de método assíncrono. Essa estrutura simplifica o manuseio de atualizações assíncronas de interface do usuário, permitindo que os desenvolvedores se concentrem em sua lógica principal e proporcionando uma experiência perfeita para o usuário.
Com sua API fácil de usar, esta biblioteca simplifica os spinners, mensagens de erro e mensagens de sucesso para chamadas de método assíncronas. Dê aos usuários o feedback de que precisam, sem sacrificar a simplicidade ou o desempenho.
dotnet add package Ramboe.Blazor.UserFeedback --version 1.0.0
A funcionalidade básica é exibir um spinner enquanto uma função é executada
e exibir quaisquer exceções que possam ocorrer (a interface do usuário permanece ainda responsiva)
Você também pode exibir uma mensagem de carregamento abaixo do spinner
e opcionalmente exibir uma mensagem de sucesso (por exemplo, para postagens HTTP bem -sucedidas)
Primeiro faça seu componente herdar do TryWrapper
Em seguida, envolva o feedbackea em torno da marcação HTML que você deseja esconder enquanto o Spinner está ativo
O código do componente deve ficar assim
@inherits Ramboe.Blazor.UserFeedback.ComponentBaseExtensions.TryWrapper
< FeedbackArea Target =" DefaultTarget " >
< table class =" table " >
< thead >
< tr >
< th > Date </ th >
< th > Temp. (C) </ th >
< th > Temp. (F) </ th >
< th > Summary </ th >
</ tr >
</ thead >
< tbody >
@foreach (var forecast in forecasts)
{
< tr >
< td > @forecast.Date.ToShortDateString() </ td >
< td > @forecast.TemperatureC </ td >
< td > @forecast.TemperatureF </ td >
< td > @forecast.Summary </ td >
</ tr >
}
</ tbody >
</ table >
</ FeedbackArea >O feedbackAea leva vários parâmetros se você precisar personalizar o spinner para uma determinada área em seu aplicativo
Para determinar qual área é girar enquanto estamos executando as coisas, precisamos anexar um alvo de feedback, o que é responsável por manter o estado da área de feedback (spinner ativo, mensagem de sucesso mostrada, etc.)
Como herdamos do TryWrapper, sempre obtemos pelo menos um alvo que podemos usar, o DefaultTarget
Se você precisar de mais metas, basta adicioná -los ao seu componente (não se esqueça de inicializar com "new ()")
As áreas de feedback precisam ser configuradas na inicialização. Você pode usar o método addstandardfeedbackareas ()
que aplica a seguinte configuração
SpinnerizEMode = Spinnerizemode. VH5 ,
Colormodo = colormodo. Primário ,
SpinnerType = spinnerType. Borderspinner
Você também pode usar a API fluente que acompanha o ADDANDCONFIGUREFEEDBackareas () se você quiser configurar o estilo de estilo
Withcolor () também tem uma sobrecarga que funciona com o colmode enum
Os seguintes atributos podem ser configurados: tamanho, cor, tipo
Tamanho: configurado através do spinnerizemode Enum, que varia de VH2 - VH90
Cor: configurado através do enum spinnerColormode, que representa as categorias de cores que vêm com bootstrap (primário, secundário, sucesso, ...)
Tipo: configurado através do spinnerTyPemode Enum, que atualmente contém o spinner-border e o spinner-grow
Quaisquer parâmetros passados diretamente para um feedbackea substituirão qualquer configuração feita no programa.cs. Por exemplo, configuração do modo de cor "primário" no feedbackAea #2 ...
Resultados nessa cor de feedbackAas Spinner sendo definida como "primária", enquanto o feedbackAea #1 apenas leva a configuração de inicialização:
Funciona da mesma maneira que o EventCallbacks. Se você deseja que o girador girasse enquanto um determinado método é executado, são necessárias duas etapas:
async Task < List < WeatherForecast > > LoadData ( )
{
// simulate waiting for an api, so we can actually see the spinner spinning
await Task . Delay ( 2000 ) ;
return await ForecastService . GetForecastAsync ( DateOnly . FromDateTime ( DateTime . Now ) ) ;
} protected override async Task OnInitializedAsync ( )
{
forecasts = await TryAsync ( LoadData , DefaultTarget ) ;
forecasts = await TryAsync ( LoadData , DefaultTarget , "loading with loading message but without success message" ) ;
forecasts = await TryAsync ( LoadData , DefaultTarget , "loading with success message" , "updating data successful" ) ;
}Você também pode usar um dos métodos explícitos
protected override async Task OnInitializedAsync ( )
{
// those to methods do the same thing
forecasts = await TryAsync ( LoadData , DefaultTarget , "loading with success message" , "updating data successful" ) ;
forecasts = await TryWithLoadingAndSuccessMessageAsync ( LoadData , DefaultTarget , "loading with success message, explicit" , "updating data successful" )
}Como funciona da mesma maneira que o EventCallbacks, você já sabe que precisa de uma expressão lambda para métodos que recebam parâmetros:
protected override async Task OnInitializedAsync ( )
{
await LambdaExample ( ) ;
}
async Task LambdaExample ( )
{
await Task . Delay ( 2000 ) ;
forecasts = await TryAsync (
( ) => ForecastService . GetForecastAsync ( DateOnly . FromDateTime ( DateTime . Now ) ) ,
DefaultTarget ,
"loading, lambda" ,
"lambda successfull"
) ;
} Configure o feedbackareas na startup:
builder . Services . AddAndConfigureFeedbackAreas ( )
. WithSize ( SpinnerSizeMode . Vh5 )
. WithType ( SpinnerTypeMode . BorderSpinner )
. WithColor ( SpinnerColorMode . Secondary )
. ConfigureFeedbackAreas ( ) ;Herdar do TryWrapper e envolver um feedbackAea (incluindo alvo) em torno do seu conteúdo
@inherits Ramboe.Blazor.UserFeedback.ComponentBaseExtensions.TryWrapper
< FeedbackArea Target =" DefaultTarget " >
@*Content here*@
</ FeedbackArea >Você pode usar as várias sobrecargas ..
forecasts = await TryAsync ( LoadData , DefaultTarget ) ;
forecasts = await TryAsync ( LoadData , DefaultTarget , "loading with loading message but without success message" ) ;
forecasts = await TryAsync ( LoadData , DefaultTarget , "loading with success message" , "updating data successful" ) ;... ou seja explícito
protected override async Task OnInitializedAsync ( )
{
forecasts = await TryWithLoadingAndSuccessMessageAsync ( LoadData , DefaultTarget , "loading with success message, explicit" , "updating data successful" )
}Os métodos são transmitidos para o feedbackea como delegados, o que significa que são necessárias expressões de lambda ao trabalhar com parâmetros (assim como nos eventosCallbacks).
