Ramboe.Blazor.UserFeedback

ramboe.blazor.userfeedback

Ramboe UserFeedback-一台用於在異步方法調用過程中顯示旋轉器，錯誤和成功消息的大風庫。該框架簡化了異步UI更新的處理，使開發人員可以專注於其核心邏輯並提供無縫的用戶體驗。

憑藉其易於使用的API，該庫使顯示旋轉器，錯誤消息和成功消息的成功消息變得易於使用。在不犧牲簡單性或性能的情況下為您的用戶提供所需的反饋。

將Nuget軟件包添加到您的Blazor Server / WASM Project

 dotnet add package Ramboe.Blazor.UserFeedback --version 1.0.0

功能

基本功能是在執行功能時顯示旋轉器

並顯示可能發生的任何例外（UI仍然響應迅速）

您也可以在旋轉器下方顯示加載消息

並選擇顯示成功消息（例如，成功的HTTP帖子）

解剖學

區域

首先使您的組件從trywrapper繼承

然後將反饋物包裹在您想隱藏的HTML標記周圍，而Spinner處於活動狀態時

組件的代碼應該看起來像這樣

@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 >

如果您需要自定義應用程序中某個區域的旋轉器，則反饋需要幾個參數

目標

為了確定在執行內容時要旋轉哪個區域，我們需要將一個反饋圖附加到它上，該反饋負責保留反饋區域（Spinner Active，Success Message，顯示的成功消息等。）

由於我們從trywrapper繼承，因此我們始終獲得至少一個可以使用的目標

如果您需要更多目標，只需將它們添加到您的組件中（不要忘記使用“ new（）”初始化）

用法

在啟動上設置配置

反饋區域需要在啟動時進行配置。您可以使用AddStandArdFeedBackareas（）方法

應用以下配置

• spinnersizemode = spinnersizemode。 VH5 ，

• colormode = colormode。基本的，

• SpinNertype = SpinNertype。 Borderspinner

如果您想配置自己的樣式

withColor（）還具有與Colormode枚舉一起使用的超負荷

配置旋轉器

可以配置以下屬性：大小，顏色，類型

尺寸：通過Spinnersizemode Enum配置，範圍為VH2 -VH90

顏色：通過SpinnerColormode Enum配置，該枚舉表示Bootstrap隨附的顏色類別（主要，次要，成功，...）

類型：通過Spinnertypemode Enum配置，當前Contais Spinner-Border和Spinner Grow

記住：參數覆蓋啟動啟動配置

直接傳遞到反饋的任何參數都將覆蓋program.cs中完成的任何配置。例如，在反饋＃2上設置“主要”顏色模式...

導致將反饋的旋轉器顏色設置為“主要”，而反饋＃1僅採用啟動配置：

最後：使它旋轉

它的工作方式與EventCallbacks相同。如果您想在執行某種方法時旋轉旋轉，則需要2個步驟：

1. 像往常一樣聲明該方法

    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 ) ) ;
    }

2. 將您的方法傳遞給目標，僅在“ TryAsync”過載之一中。

  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" ) ;
                
    }

您也可以使用一種明確的方法之一

  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" )
    }

由於它的工作方式與EventCallbacks相同，因此您已經知道您需要使用參數的方法的lambda表達式：

  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"
        ) ;
    } 

概括

在啟動上配置反饋：

 builder . Services . AddAndConfigureFeedbackAreas ( )
       . WithSize ( SpinnerSizeMode . Vh5 )
       . WithType ( SpinnerTypeMode . BorderSpinner )
       . WithColor ( SpinnerColorMode . Secondary )
    . ConfigureFeedbackAreas ( ) ;

從trywrapper繼承並圍繞您的內容包裹反饋（包括目標）

@inherits Ramboe.Blazor.UserFeedback.ComponentBaseExtensions.TryWrapper

< FeedbackArea Target =" DefaultTarget " >
    @*Content here*@
</ FeedbackArea >

您可以使用各種超載。

 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" ) ;

...或顯式

  protected override async Task OnInitializedAsync ( )
    {
        forecasts = await TryWithLoadingAndSuccessMessageAsync ( LoadData , DefaultTarget , "loading with success message, explicit" , "updating data successful" )
              
    }

當使用參數時，方法（就像EventCallbacks一樣）時，方法將傳遞到反饋中，這意味著需要lambda表達式。