Ramboe.Blazor.UserFeedback

ramboe.blazor.userfeedback

Ramboe userfeedback - مكتبة Blazor لإظهار المغازل والرسائل والنجاح خلال مكالمات الطريقة غير المتزامنة. يبسط هذا الإطار معالجة تحديثات واجهة المستخدم غير المتزامنة ، مما يسمح للمطورين بالتركيز على منطقهم الأساسي وتوفير تجربة مستخدم سلسة.

من خلال واجهة برمجة تطبيقات سهلة الاستخدام ، تجعل هذه المكتبة من السهل عرض المغازل ورسائل الخطأ ورسائل النجاح لمكالمات الطريقة غير المتزامنة. امنح المستخدمين التعليقات التي يحتاجونها ، دون التضحية بالبساطة أو الأداء.

أضف حزمة nuget إلى مشروع Blazor Server / WASM الخاص بك

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

الوظيفة

الوظيفة الأساسية هي عرض الدوار أثناء تنفيذ وظيفة

وعرض أي استثناءات قد تحدث (لا تزال واجهة المستخدم مستجيبة)

يمكنك أيضًا عرض رسالة تحميل أسفل الدوار

وعرض رسالة نجاح اختياريًا (على سبيل المثال لنشرات 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 عدة معلمات إذا كنت بحاجة إلى تخصيص الدوار لمنطقة معينة داخل التطبيق الخاص بك

الأهداف

من أجل تحديد المجال الذي يجب تدويره أثناء تنفيذ الأشياء ، نحتاج إلى إرفاق ردود الفعل به ، وهو مسؤول عن وضع حالة التغذية الراجعة (رسالة النجاح النشطة ، وما إلى ذلك) ، إلخ.)

نظرًا لأننا نرث من TryWrapper ، فإننا نحصل دائمًا على هدف واحد على الأقل يمكننا استخدامه ، وهو DefaultTarget

إذا كنت بحاجة إلى مزيد من الأهداف ، فما عليك سوى إضافتها إلى المكون (لا تنسَ تهيئة "New ()")

الاستخدام

إعداد التكوين عند بدء التشغيل

يجب تكوين مناطق التغذية المرتدة عند بدء التشغيل. يمكنك استخدام طريقة AddstandardFeedbackAreas ()

الذي يطبق التكوين التالي

• SpinnerseSemode = SpinnersezEmode. VH5 ،

• colormode = colormode. أساسي ،

• spinnertype = spinnertype. Borderspinner

يمكنك أيضًا استخدام واجهة برمجة التطبيقات بطلاقة تأتي جنبًا إلى جنب

يحتوي WithColor () أيضًا على تحميل زائد يعمل مع Colormode enum

تكوين الدوار

يمكن تكوين السمات التالية: الحجم ، اللون ، الكتابة

الحجم: تم تكوينه من خلال spinnersemode enum ، والذي يتراوح من VH2 - VH90

اللون: تم تكوينه من خلال SpinnerColorMode enum ، والذي يمثل فئات الألوان التي تأتي مع bootstrap (الابتدائية ، الثانوية ، النجاح ، ...)

النوع: تم تكوينه من خلال SpinnerTypemode Enum ، والذي حاليًا Contais Spinner-Border و Spinner-Grow

تذكر: المعلمات تجاوز تكوين بدء التشغيل

أي معلمات تم تمريرها مباشرة في ردود الفعل سوف تتجاوز أي تكوين يتم القيام به في البرنامج. على سبيل المثال ، قم بإعداد وضع اللون "الأساسي" على Feedbackarea #2 ...

النتائج في هذا اللون المغزلي الذي يتم تعيينه على "الأساسي" ، في حين أن Feedbackarea #1 يأخذ فقط تكوين بدء التشغيل:

أخيرًا: جعله يدور

إنه يعمل بنفس طريقة EventCallbacks. إذا كنت ترغب في الحصول على غزل الدوار أثناء تنفيذ طريقة معينة ، فستكون هناك حاجة إلى خطوتين:

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

يتم تمرير الأساليب إلى ردود الفعل كمندوبين ، مما يعني أن هناك حاجة إلى تعبيرات Lambda عند العمل مع المعلمات (كما هو الحال في EventCallbacks).