Ramboe.Blazor.UserFeedback 다운로드 Ramboe.Blazor.UserFeedback 소스 코드 다운로드

Ramboe.Blazor.UserFeedback

기타 카테고리

1.0.0

다운로드

ramboe.blazor.userfeedback

Ramboe userfeedback- 비동기 메소드 호출 중에 스피너, 오류 및 성공 메시지를 보여주는 블레이저 라이브러리. 이 프레임 워크는 비동기 UI 업데이트의 처리를 단순화하여 개발자가 핵심 논리에 집중하고 원활한 사용자 경험을 제공 할 수 있도록합니다.

사용하기 쉬운 API를 사용하면이 라이브러리를 사용하면 비동기 메소드 호출에 대한 스피너, 오류 메시지 및 성공 메시지를 간단하게 표시 할 수 있습니다. 단순성이나 성능을 희생하지 않고 사용자에게 필요한 피드백을 제공하십시오.

Blazor Server / WASM 프로젝트에 Nuget 패키지 추가

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

기능

기본 기능은 함수가 실행되는 동안 스피너를 표시하는 것입니다.

발생할 수있는 예외를 표시합니다 (UI는 여전히 반응이 유지됨)

스피너 아래에 로딩 메시지를 표시 할 수도 있습니다.

선택적으로 성공 메시지를 표시합니다 (예 : 성공적인 HTTP 게시물의 경우)

해부

지역

먼저 구성 요소를 TryWrapper에서 상속하십시오

그런 다음 Spinner가 활성화되는 동안 숨길 HTML 마크 업 주위에 피드백 area를 감싸십시오.

구성 요소의 코드는 다음과 같아야합니다

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

피드백 area 응용 프로그램 내의 특정 영역에 대한 스피너를 사용자 정의 해야하는 경우 여러 매개 변수를 사용합니다.

목표

물건을 실행하는 동안 어떤 영역이 회전 해야하는지 결정하려면 피드백 대상을 첨부해야합니다.

우리는 trywrapper를 상속 받기 때문에 항상 우리가 사용할 수있는 하나 이상의 대상, DefaultTarget을 얻습니다.

더 많은 대상이 필요한 경우 구성 요소에 추가하기 만하면됩니다 ( "new ()"로 초기화하는 것을 잊지 마십시오).

용법

시작시 구성 설정

시작시 피드백 영역을 구성해야합니다. AddStandardFeedbackAreas () 메소드를 사용할 수 있습니다

다음 구성이 적용됩니다

spinnersizemode = spinnersizemode. vh5 ,
colormode = colormode. 주요한 ,
SpinnerType = SpinnerType. Borderspinner

스타일링을 직접 구성하려면 addandconfigurefeedbackareas ()와 함께 제공되는 Fluent API를 사용할 수도 있습니다.

withColor ()는 ColorMode Enum과 함께 작동하는 오버로드도 있습니다.

스피너 구성

다음 속성을 구성 할 수 있습니다 : 크기, 색상, 유형

크기 : VH2 -VH90 범위의 SpinnersizEmode Enum을 통해 구성

색상 : spinnercolormode enum을 통해 구성되는데, 부트 스트랩 (1 차, 보조, 성공, ...)과 함께 제공되는 색상 범주를 나타냅니다.

유형 : 현재 오염원 스피너 국경 및 스피너 자 열인 SpinnerTypeMode Enum을 통해 구성

기억하십시오 : 매개 변수는 시작 구성을 무시합니다

피드백에 직접 전달되는 모든 매개 변수는 program.cs에서 수행 된 구성을 무시합니다. 예를 들어 피드백 #2에서 "1 차"색상 모드 설정 ...

피드백 areas 스피너 색상이 "1 차"로 설정되는 반면, 피드백 aLea #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 ) ) ;
    }

메소드를 전달하면 대상에 따라 단순히 "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"
        ) ;
    }

요약

스타트 업에서 피드백 areas 구성 :

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

TryWrapper에서 상속하고 콘텐츠 주변의 피드백 area (대상 포함)를 래핑하십시오.

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