Ramboe.Blazor.UserFeedback
1.0.0
RAMBOE UserFeedback - Eine Blazor -Bibliothek zur Anzeige von Spinnern, Fehler und Erfolgsmeldungen während der asynchronen Methodenaufrufe. Dieses Framework vereinfacht den Umgang mit asynchronen UI -Updates, sodass Entwickler sich auf ihre Kernlogik konzentrieren und eine nahtlose Benutzererfahrung bereitstellen können.
Mit seiner benutzerfreundlichen API erleichtert diese Bibliothek es einfach, Spinner, Fehlermeldungen und Erfolgsnachrichten für asynchrone Methodenaufrufe anzuzeigen. Geben Sie Ihren Benutzern das Feedback, das sie benötigen, ohne Einfachheit oder Leistung zu beeinträchtigen.
dotnet add package Ramboe.Blazor.UserFeedback --version 1.0.0
Die grundlegende Funktionalität besteht darin, einen Spinner anzuzeigen, während eine Funktion ausgeführt wird
und zeigen alle Ausnahmen, die auftreten können (UI bleibt immer noch reaktionsschnell)
Sie können auch eine Ladenachricht unter dem Spinner anzeigen
und optional eine Erfolgsnachricht anzeigen (z. B. für erfolgreiche HTTP -Beiträge)
Lassen Sie zuerst Ihre Komponente von Trywrapper erben
Wickeln Sie dann das Feedbackarea um das HTML -Markup, das Sie verbergen möchten, während Spinner aktiv ist
Der Code der Komponente sollte so aussehen
@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 nimmt mehrere Parameter vor, wenn Sie den Spinner für einen bestimmten Bereich innerhalb Ihrer Anwendung anpassen müssen
Um festzustellen, welcher Bereich während der Ausführung von Sachen drehen soll, müssen wir ihm ein Feedbacktarget anhängen, das für die Haltung des Zustands des Rückkopplungsbereichs verantwortlich ist (Spinner Active, Erfolgsnachricht usw.).
Da wir von TryWrapper erben, erhalten wir immer mindestens ein Ziel, das wir verwenden können, das Standardtarget
Wenn Sie mehr Ziele benötigen, fügen Sie sie einfach Ihrer Komponente hinzu (vergessen Sie nicht, mit "New ()" zu initialisieren).
Feedback -Bereiche müssen beim Start konfiguriert werden. Sie können die addStandardFeedBackareas () -Methode verwenden
die folgende Konfiguration anwendet
Spinnerizemode = Spinnersizemode. VH5 ,
Colorde = colormode. Primär ,
Spinnertyp = Spinnertyp. Grenzen
Sie können auch fließende API verwenden, die mit AddandConfigureFeedBackareas () einhergeht, wenn Sie das Styling selbst konfigurieren möchten
WithColor () hat auch eine Überlastung, die mit dem Colorde Enum funktioniert
Die folgenden Attribute können konfiguriert werden: Größe, Farbe, Typ
Größe: Konfiguriert über SpinnerSizemode Enum, die von VH2 - VH90 reicht
Farbe: Konfiguriert über SpinnercolorMode Enum, das die Farbkategorien darstellt, die mit Bootstrap ausgestattet sind (primär, sekundär, Erfolg, ...)
Typ: Konfiguriert über SpinnerTypeMode Enum, das derzeit Spinner-Borre und Spinner-Grew Contais
Alle direkt an ein Feedbackarea übergebenen Parameter überschreiben jede Konfiguration, die in Programm.cs durchgeführt wurde. Zum Beispiel Einstellung "primärer" Farbmodus für Feedbackarea #2 ...
Die Feedbackareas -Spinnerfarbe wird auf "primär" eingestellt, während Feedbackarea #1 nur die Startkonfiguration übernimmt:
Es funktioniert genauso wie EventCallbacks. Wenn der Spinner während einer bestimmten Methode ausgeführt wird, sind 2 Schritte erforderlich:
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" ) ;
}Sie können auch eine der expliziten Methoden verwenden
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" )
}Da es genauso funktioniert wie EventCallbacks, wissen Sie bereits, dass Sie einen Lambda -Ausdruck für Methoden benötigen, die Parameter annehmen:
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"
) ;
} Feedbackareas beim Start konfigurieren:
builder . Services . AddAndConfigureFeedbackAreas ( )
. WithSize ( SpinnerSizeMode . Vh5 )
. WithType ( SpinnerTypeMode . BorderSpinner )
. WithColor ( SpinnerColorMode . Secondary )
. ConfigureFeedbackAreas ( ) ;Erben Sie von TryWrapper und wickeln Sie ein Feedbackarea (einschließlich Ziel) um Ihren Inhalt ein
@inherits Ramboe.Blazor.UserFeedback.ComponentBaseExtensions.TryWrapper
< FeedbackArea Target =" DefaultTarget " >
@*Content here*@
</ FeedbackArea >Sie können die verschiedenen Überladungen verwenden.
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" ) ;... oder explizit sein
protected override async Task OnInitializedAsync ( )
{
forecasts = await TryWithLoadingAndSuccessMessageAsync ( LoadData , DefaultTarget , "loading with success message, explicit" , "updating data successful" )
}Methoden werden als Delegierte in Feedbackarea übergeben, was bedeutet, dass Lambda -Ausdrücke bei der Arbeit mit Parametern (genau wie in EventCallbacks) erforderlich sind.
