Ramboe.Blazor.UserFeedback скачать - Ramboe.Blazor.UserFeedback исходный код скачать

Ramboe.Blazor.UserFeedback

Другие категории

1.0.0

Скачать

Ramboe.blazor.userfeedback

Ramboe userFeedback - библиотека Blazor для отображения прядильщиков, ошибок и сообщений успеха во время асинхронных вызовов методов. Эта структура упрощает обработку асинхронных обновлений пользовательского интерфейса, позволяя разработчикам сосредоточиться на своей основной логике и обеспечивая бесшовную пользовательскую работу.

С помощью простого в использовании API, эта библиотека позволяет проще отображать прядильщики, сообщения об ошибках и сообщения успеха для асинхронных вызовов методов. Дайте своим пользователям обратную связь, в которой они нуждаются, не жертвуя простотой или производительностью.

Добавьте пакет 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 >

Обратная связь принимает несколько параметров, если вам нужно настроить спиннер для определенной области в рамках вашего приложения

Цели

Чтобы определить, какая область должна вращаться, пока мы выполняем вещи, нам нужно прикрепить к ней обратную связь, которая отвечает за удержание состояния области обратной связи (Spinner Active, Показано сообщение успеха и т. Д.)

Поскольку мы наследуем от TryWrapper, мы всегда получаем хотя бы одну цель, которую мы можем использовать, DefaultTarget

Если вам нужно больше целей, просто добавьте их в свой компонент (не забудьте инициализировать с помощью «new ()»)

Использование

Настройка конфигурации при запуске

Области обратной связи должны быть настроены при запуске. Вы можете использовать метод AddStandArdFeedBackareas ()

который применяет следующую конфигурацию

Spinnersizemode = spinnersizemode. VH5 ,
Colormode = colormode. Начальный ,
Spinnertype = spinnertype. Borderspinner

Вы также можете использовать Fluent API, который поступает вместе с AddandConfigureFeedbackAreas (), если вы хотите настроить стиль самостоятельно

Withcolor () также имеет перегрузку, которая работает с переводом Colormode

Настройка спиннера

Можно настроить следующие атрибуты: размер, цвет, тип

Размер: настроен через enum spinnersizemode, который варьируется от VH2 - VH90

Цвет: настроен с помощью перевода SpinnerColormode, который представляет цветовые категории, которые поставляются с начальной загрузкой (первичный, вторичный, успех, ...)

Тип: настроен через SpinnertyPemode Enum, который в настоящее время контеирует спиннер и спиннер

Помните: параметры переопределяют конфигурацию запуска.

Любые параметры, передаваемые непосредственно в обратную связь, будут переопределять любую конфигурацию, сделанную в программе. CS. Например, настройка «первичного» цветного режима на обратной связи #2 ...

Приводит к тому, что цвет спиннера отзывов устанавливается на «первичный», в то время как обратная связь № 1 просто принимает конфигурацию запуска:

Наконец: заставляя его вращаться

Это работает так же, как и EventCallback. Если вы хотите, чтобы прядильщик вращался во время выполнения определенного метода, необходимы 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 ) ) ;
    }

Передайте свой метод, и это, согласно Target, просто в одну из перегрузки "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" )
    }

Поскольку он работает так же, как и EventCallback, вы уже знаете, что вам нужно выражение 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" )
              
    }