Ramboe.Blazor.UserFeedback
1.0.0
Ramboe UserFeedback - une bibliothèque de blazor pour afficher des filateurs, des messages d'erreur et de réussite lors d'appels de méthode asynchrones. Ce cadre simplifie la gestion des mises à jour asynchrones de l'interface utilisateur, permettant aux développeurs de se concentrer sur leur logique de base et de fournir une expérience utilisateur transparente.
Avec son API facile à utiliser, cette bibliothèque facilite l'affichage des filateurs, des messages d'erreur et des messages de réussite pour les appels de méthode asynchrones. Donnez à vos utilisateurs les commentaires dont ils ont besoin, sans sacrifier la simplicité ou les performances.
dotnet add package Ramboe.Blazor.UserFeedback --version 1.0.0
La fonctionnalité de base consiste à afficher un spinner pendant qu'une fonction est exécutée
et afficher toutes les exceptions qui pourraient se produire (l'interface utilisateur reste toujours réactive)
Vous pouvez également afficher un message de chargement sous le spinner
et afficher éventuellement un message de réussite (par exemple pour les publications HTTP réussies)
Faites d'abord l'héritage de votre composant de TryWrapper
Ensuite, enveloppez la zone de rétroaction autour du balisage HTML que vous souhaitez cacher pendant que Spinner est actif
Le code du composant devrait ressembler à ceci
@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 >FeedbackArea prend plusieurs paramètres si vous avez besoin de personnaliser le spinner pour une certaine zone dans votre application
Afin de déterminer la zone à tourner pendant que nous exécutons des trucs, nous devons y attacher un objectif de rétroaction, qui est responsable de la maintenance de l'état de la zone de rétroaction (Spinner Active Message affiché, etc.)
Puisque nous héritons de TryWrapper, nous obtenons toujours au moins une cible que nous pouvons utiliser, le defaultTarget
Si vous avez besoin de plus de cibles, ajoutez-les simplement à votre composant (n'oubliez pas d'initialiser avec "new ()")
Les zones de rétroaction doivent être configurées au démarrage. Vous pouvez utiliser la méthode AddstandardFeedBackAreas ()
qui applique la configuration suivante
SpinneSizeMode = SpinneSizemode. VH5 ,
ColorMode = ColorMode. Primaire ,
SpinnerType = SpinnerType. Borderspinner
Vous pouvez également utiliser une API courante qui vient avec addandConfigureFeedBackAreas () si vous souhaitez configurer le style vous-même
WithColor () a également une surcharge qui fonctionne avec l'énumération de Colormode
Les attributs suivants peuvent être configurés: taille, couleur, type
Taille: configuré via SpinneSizemode Enum, qui va de VH2 - VH90
Couleur: configuré via SpinnerColorMode Enum, qui représente les catégories de couleurs fournies avec bootstrap (primaire, secondaire, succès, ...)
Type: configuré via SpinnerTypeMode Enum, qui est actuellement de la fracteur de spinner et du spinner-cul
Tous les paramètres transmis directement dans une zone de rétroaction remplaceront toute configuration effectuée dans Program.cs. Par exemple, définir le mode de couleur "primaire" sur FeedbackArea # 2 ...
Résultats dans la couleur de la couleur de fileur de rétroaction sur "primaire", tandis que FeedbackArea # 1 prend simplement la configuration du démarrage:
Cela fonctionne de la même manière que les revers des événements. Si vous voulez faire tourner le spinner pendant qu'une certaine méthode est exécutée, 2 étapes sont nécessaires:
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" ) ;
}Vous pouvez également utiliser l'une des méthodes explicites
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" )
}Puisqu'il fonctionne de la même manière que EventCallbacks, vous savez déjà que vous avez besoin d'une expression lambda pour les méthodes qui prennent des paramètres:
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"
) ;
} Configurer FeedbackAreas au démarrage:
builder . Services . AddAndConfigureFeedbackAreas ( )
. WithSize ( SpinnerSizeMode . Vh5 )
. WithType ( SpinnerTypeMode . BorderSpinner )
. WithColor ( SpinnerColorMode . Secondary )
. ConfigureFeedbackAreas ( ) ;Hériter de Trywrapper et envelopper une zone de rétroaction (y compris la cible) autour de votre contenu
@inherits Ramboe.Blazor.UserFeedback.ComponentBaseExtensions.TryWrapper
< FeedbackArea Target =" DefaultTarget " >
@*Content here*@
</ FeedbackArea >Vous pouvez utiliser les différentes surcharges.
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 être explicite
protected override async Task OnInitializedAsync ( )
{
forecasts = await TryWithLoadingAndSuccessMessageAsync ( LoadData , DefaultTarget , "loading with success message, explicit" , "updating data successful" )
}Les méthodes sont transmises dans FeedbackArea en tant que délégués, ce qui signifie que les expressions de lambda sont nécessaires lorsque vous travaillez avec des paramètres (tout comme dans EventCallbacks).
