Blazor Toolbar Overview

Blazor Toolbar 구성 요소는 주로 차트 구성 요소와 함께 사용되는 UI 작업을 위한 동반 컨테이너입니다. 툴바는 IgbDataChart 또는 IgbCategoryChart 구성 요소에 연결될 때 속성 및 도구 항목의 사전 설정으로 동적으로 업데이트됩니다. 프로젝트에 대한 사용자 정의 도구를 만들어 최종 사용자가 변경 사항을 제공할 수 있으므로 무한한 양의 사용자 정의가 가능합니다.

Blazor Toolbar Example

Dependencies

Add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file:

@using IgniteUI.Blazor.Controls

​IgbDataChart 구성 요소 및 해당 기능과 함께 IgbToolbar 사용할 때 다음 모듈이 필요합니다.

// in Program.cs file

builder.Services.AddIgniteUIBlazor(
    typeof(IgbToolbarModule),
    typeof(IgbDataChartToolbarModule),
    typeof(IgbDataChartCoreModule),
    typeof(IgbDataChartCategoryModule),
    typeof(IgbDataChartAnnotationModule),
    typeof(IgbDataChartInteractivityModule),
    typeof(IgbDataChartCategoryTrendLineModule)
);

​IgbToolbar 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

Usage

Tool Actions

다음은 도구 모음에 추가할 수 있는 다양한 IgbToolAction 항목 목록입니다.

• IgbToolActionButton
• IgbToolActionCheckbox
• IgbToolActionIconButton
• IgbToolActionIconMenu
• IgbToolActionLabel
• IgbToolActionNumberInput
• IgbToolActionRadio
• IgbToolActionSubPanel

이러한 각 도구는 마우스 클릭에 의해 트리거되는 이벤트를 노출합니다 OnCommand. 참고로, the IgbToolActionIconMenu는 내부에 래핑할 수 있는 다른 도구에 대한 래퍼입니다 IgbToolActionIconMenu.

​IgbToolAction 개체의 OverlayId, BeforeId 및 AfterId 속성을 사용하여 새 도구와 기존 도구의 위치를 변경하고 숨김으로 표시할 수 있습니다. ToolActions는 Visibility 속성도 노출합니다.

다음 예제에서는 몇 가지 기능을 보여 줍니다. 먼저 도구를 그룹화할 수 있습니다. IgbToolActionSubPanel 다음과 같은 내장 도구 숨기기를 포함합니다. 줌리셋 그리고 분석메뉴 메뉴 도구 작업. 이 예에서는 의 새 인스턴스가 있습니다. 줌리셋 tool action 내의 줌메뉴를 사용하여 AfterId 속성을 할당하고 축소 정확하게 말하면 배치입니다. 또한 를 통해 강조 표시됩니다. IsHighlighted 속성을 사용합니다.

Blazor Data Chart Integration

Blazor Toolbar에는 Target 속성이 포함되어 있습니다. 이는 아래 코드에 표시된 IgbDataChart와 같은 구성 요소를 연결하는 데 사용됩니다.

  <IgbToolbar
    Name="Toolbar"
    @ref="toolbar"
    Target="@chart">
  <IgbToolbar>

  <IgbDataChart
    Name="chart"
    @ref="chart">
  </IgbDataChart>

​IgbDataChart 툴바와 연결되면 기존 IgbToolAction 항목과 메뉴가 여러 개 사용 가능해집니다. 내장된 Blazor IgbDataChart 도구 작업과 관련 OverlayId 목록은 다음과 같습니다.

확대/축소 작업

• ZoomMenu: ᅡ IgbToolActionIconMenu 세 가지를 노출하는 IgbToolActionLabel 항목을 호출하여 ZoomIn 그리고 ZoomOut 차트의 확대/축소 수준을 증가시키거나 줄이기 위한 차트의 방법들 ZoomReset, 가 IgbToolActionLabel를 호출하는 ResetZoom 차트의 메서드를 사용하여 확대/축소 수준을 기본 위치로 재설정합니다.

추세 조치

• AnalyzeMenu: 차트의 다양한 옵션을 구성하기 위한 여러 옵션이 포함된 IgbToolActionIconMenu 입니다.
• AnalyzeHeader: 하위 섹션 헤더입니다.
• LinesMenu: 차트에 다양한 가로 점선을 표시하기 위한 다양한 도구가 포함된 하위 메뉴입니다.
  • LinesHeader: 다음 세 가지 도구에 대한 하위 메뉴 섹션 헤더입니다.
    • MaxValue: 계열의 최대값에서 yAxis를 따라 가로 점선을 표시하는 IgbToolActionCheckbox 입니다.
    • MinValue: 계열의 최소값에서 yAxis를 따라 가로 점선을 표시하는 IgbToolActionCheckbox 입니다.
    • Average: 계열의 평균 값에서 yAxis를 따라 가로 점선을 표시하는 IgbToolActionCheckbox 입니다.
• TrendsMenu: IgbDataChart 플롯 영역에 다양한 추세선을 적용하기 위한 도구가 포함된 하위 메뉴입니다.
  • TrendsHeader: 다음 세 가지 도구에 대한 하위 메뉴 섹션 헤더입니다.
    • 지수의: ᅡ IgbToolActionRadio를 설정합니다. TrendLineType 차트의 각 시리즈에서 익스포넨셜핏(ExponentialFit).
    • 선형: ᅡ IgbToolActionRadio를 설정합니다. TrendLineType 차트의 각 시리즈에서 리니어핏(LinearFit).
    • 로그: ᅡ IgbToolActionRadio를 설정합니다. TrendLineType 차트의 각 계열에서 LogarithmicFit (로그 피팅).
• HelpersHeader: 하위 섹션 헤더입니다.
• SeriesAvg: ㅏ IgbToolActionCheckbox 추가하거나 제거하는 IgbValueLayer 다음을 사용하여 차트의 시리즈 컬렉션에 ValueLayerValueMode 유형의 Average.
• ValueLabelsMenu: 플롯 영역에 다양한 주석을 표시하기 위한 다양한 도구가 포함된 하위 메뉴입니다 IgbDataChart.
  • ValueLabelsHeader: 다음 도구에 대한 하위 메뉴 섹션 헤더입니다.
    • ShowValueLabels: IgbCalloutLayer를 사용하여 데이터 포인트 값을 전환하는 IgbToolActionCheckbox 입니다.
    • ShowLastValueLabel: IgbFinalValueLayer를 사용하여 최종 값 축 주석을 전환하는 IgbToolActionCheckbox 입니다.
• ShowCrosshairs: 차트의 CrosshairsDisplayMode 속성을 통해 마우스 오버 십자선 주석을 전환하는 IgbToolActionCheckbox 입니다.
• ShowGridlines: ㅏ IgbToolActionCheckbox 이를 적용하여 추가 격자선을 전환합니다. MajorStroke X축으로.

이미지에 저장 작업

• CopyAsImage: 차트를 클립보드에 복사하는 옵션을 노출하는 A IgbToolActionLabel 입니다.
• CopyHeader: 하위 섹션 머리글입니다.

SVG Icons

도구를 수동으로 추가할 때 이 RenderIconFromText 방법을 사용하여 아이콘을 할당할 수 있습니다. 이 메서드에는 세 가지 매개 변수가 있습니다. 첫 번째는 도구에 정의된 아이콘 컬렉션 이름입니다. IconCollectionName 두 번째는 도구에 정의된 아이콘의 이름(예: IconName SVG 문자열 추가)입니다.

Data URL Icons

svg를 추가하는 것과 마찬가지로 URL RegisterIconFromDataURL에서 아이콘 이미지를 추가할 수도 있습니다. 메서드의 세 번째 매개 변수는 문자열 URL을 입력하는 데 사용됩니다.

다음 코드 조각은 아이콘을 추가하는 두 가지 방법을 모두 보여 줍니다.

<IgbToolActionLabel
    Title="Custom Icon"
    IconName="CustomIcon"
    IconCollectionName="CustomCollection">
</IgbToolActionLabel>

@code {

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var toolbar = this.toolbar;

        if (firstRender) {
            this.ToolbarCustomIconOnViewInit();
        }
    }

    private IgbToolbar toolbar;

    public void ToolbarCustomIconOnViewInit()
    {
    	this.toolbar.EnsureReady().ContinueWith(new Action<Task>((e) =>
    	{
    		string icon =
    		@"
    			<svg width=""28px"" height=""28px"" stroke=""none"" viewBox=""0 0 3.5 3.5"" xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink"" aria-hidden=""true"" role=""img"" class=""iconify iconify--gis"" preserveAspectRatio=""xMidYMid meet""><path d=""M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z"" fill=""#000000"" fill-rule=""evenodd""/></svg>
    		";
    		this.toolbar.RegisterIconFromTextAsync("CustomCollection", "CustomIcon", icon);
    	}));
    }

}

@code {

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    var toolbar = this.toolbar;

    if (firstRender) {
        this.ToolbarCustomIconOnViewInit();
    }
}

private IgbToolbar toolbar;

public void ToolbarCustomIconOnViewInit()
{
	this.toolbar.EnsureReady().ContinueWith(new Action<Task>((e) =>
	{
        this.toolbar.RegisterIconFromDataURLAsync("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
	}));
}

}

```tsx
<IgrToolbar orientation="Vertical" />

Vertical Orientation

기본적으로 Blazor 도구 모음은 가로로 표시되지만 Orientation 속성을 설정하여 세로로 표시할 수도 있습니다.

<IgbToolbar Orientation="ToolbarOrientation.Vertical" />

다음 예제는 Blazor 도구 모음의 수직 방향을 보여줍니다.

색상 편집기

Blazor 툴바에 사용자 정의 색상 편집기 도구를 추가할 수 있으며, 이 도구는 Command 이벤트와 함께 작동하여 응용 프로그램에 사용자 정의 스타일을 수행합니다.

<IgbToolbar
Name="toolbar"
@ref="toolbar">
    <IgbToolActionColorEditor
    Title="Series Brush">
    </IgbToolActionColorEditor>
</IgbToolbar>

다음 예제에서는 색 편집기 도구를 사용하여 Blazor 데이터 차트 시리즈 브러시의 스타일을 지정하는 방법을 보여 줍니다.

API References

• IgbToolbar
• IgbDataChart

Additional Resources

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브