Ramboe.Blazor.UserFeedbackダウンロードRamboe.Blazor.UserFeedbackソースコードダウンロード

Ramboe.Blazor.UserFeedback

その他のカテゴリー

1.0.0

ダウンロード

ramboe.blazor.userfeedback

Ramboe UserFeedback-非同期メソッド呼び出し中にスピナー、エラー、成功メッセージを表示するためのBlazorライブラリ。このフレームワークは、非同期UIアップデートの処理を簡素化し、開発者がコアロジックに集中し、シームレスなユーザーエクスペリエンスを提供できるようにします。

使いやすいAPIを使用すると、このライブラリにより、スピナー、エラーメッセージ、および非同期メソッド呼び出しの成功メッセージを簡単に表示できます。シンプルさやパフォーマンスを犠牲にすることなく、ユーザーに必要なフィードバックを提供します。

NugetパッケージをBlazor Server / WASMプロジェクトに追加する

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

機能

基本機能は、機能が実行されている間にスピナーを表示することです

発生する可能性のある例外を表示します（UIはまだ応答し続けます）

スピナーの下にロードメッセージを表示することもできます

オプションで成功メッセージを表示します（例：HTTPの投稿を成功させるなど）

解剖学

エリア

まず、コンポーネントをTryWrapperから継承します

次に、スピナーがアクティブになっている間に非表示にしたいHTMLマークアップにフィードバックリーレアを包みます

コンポーネントのコードは次のようになります

@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は、アプリケーション内の特定の領域のスピナーをカスタマイズする必要がある場合にいくつかのパラメーターを取ります

ターゲット

ものを実行している間にスピンする領域を決定するために、フィードバック領域を添付する必要があります。これは、フィードバック領域の状態を保持する責任があります（Spinner Active、Successメッセージが表示されます。

TryWrapperから継承するため、使用できる少なくとも1つのターゲットを常に取得します。

より多くのターゲットが必要な場合は、コンポーネントにそれらを追加するだけです（new（）」で初期化することを忘れないでください）

使用法

起動時に構成を設定します

フィードバック領域は、起動時に構成する必要があります。 AddStandardFeedBackareas（）メソッドを使用できます

次の構成を適用します

spinnerizeMode = spinnerizeMode。 VH5 、
Colormode = Colormode。主要な、
spinnertype = spinnertype。ボーダースピナー

また、自分でスタイリングを構成する場合は、addandconfigurefeedbackareas（）に付属するFluent APIを使用することもできます

withcolor（）には、コロモード列挙で動作する過負荷もあります

スピナーの構成

次の属性を構成できます：サイズ、色、タイプ

サイズ：VH2 -VH90からの範囲のSpinnersizeMode enumを介して構成

色：Bootstrap（プライマリ、セカンダリ、成功、...）に付属する色カテゴリを表すSpinnercolormode enumを介して構成

タイプ：SpinnertypeMode enumを介して構成されています。

覚えておいてください：パラメーターはスタートアップの構成をオーバーライドします

直接フィードバックエリアに渡されたパラメーターは、プログラムで行われた構成をオーバーライドします。たとえば、Feedbackarea＃2に「プライマリ」カラーモードの設定...

その結果、フィードバックスピナーの色が「プライマリ」に設定され、フィードバックリーア＃1はスタートアップの構成を取得します。

最後に：スピンします

EventCallbacksと同じように機能します。特定の方法が実行されている間にスピナーを回転させたい場合は、2つのステップが必要です。

通常どおりメソッドを宣言します

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

あなたの方法を渡すと、それはターゲットに従って単に「トライアシン」オーバーロードの1つになります

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