Angular Toolbar Overview

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

    Angular Toolbar Example

    Dependencies

    Ignite UI for Angular 설치:

    npm install igniteui-angular-layouts
npm install igniteui-angular-inputs
npm install igniteui-angular-charts
npm install igniteui-angular-core

    ​IgxDataChartComponent 컴포넌트 및 해당 기능과 함께 IgxToolbarComponent 사용할 때 다음 모듈이 필요합니다.

    import { IgxToolbarModule } from 'igniteui-angular-layouts';
import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxDataChartCategoryTrendLineModule  } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxToolbarModule,
        IgxDataChartToolbarModule,
        IgxDataChartCoreModule,
        IgxDataChartCategoryModule,
        IgxDataChartAnnotationModule,
        IgxDataChartInteractivityModule,
        IgxDataChartCategoryTrendLineModule
        // ...
    ]
})
export class AppModule {}

    import { IgxToolbarModule } from 'igniteui-react-layouts';
import { IgrDataChartToolbarModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule, IgrDataChartCategoryTrendLineModule  } from 'igniteui-react-charts';

IgxToolbarModule.register();
IgrDataChartToolbarModule.register();
IgrDataChartCoreModule.register();
IgrDataChartCategoryModule.register();
IgrDataChartAnnotationModule.register();
IgrDataChartInteractivityModule.register();
IgrDataChartCategoryTrendLineModule.register();

    Usage

    Tool Actions

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

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

    ​IgxToolActionComponent 객체의 overlayId, beforeId 및 afterId 속성을 사용하여 새로운 도구와 기존 도구의 위치를 변경하고 숨김으로 표시할 수 있습니다. ToolActions는 visibility 속성도 노출합니다.

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

    Angular Data Chart Integration

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

      <div class="legend">
    <igx-toolbar
      name="toolbar"
      [target]="chart"
      #toolbar>
    </igx-toolbar>
  </div>
  <div class="container fill">
    <igx-data-chart
    name="chart"
    #chart>
  </igx-data-chart>

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

    확대/축소 작업

    추세 조치

    이미지에 저장 작업

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

    SVG Icons

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

    Data URL Icons

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

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

    <igx-tool-action-label
    title="Custom Icon"
    iconName="CustomIcon"
    iconCollectionName="CustomCollection">
</igx-tool-action-label>

    public toolbarCustomIconOnViewInit(): void {

  const 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.registerIconFromText("CustomCollection", "CustomIcon", icon);
}

    public toolbarCustomIconOnViewInit(): void {

  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");

}

    public toolbarCustomIconOnViewInit(): void {

  const 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.registerIconFromText("CustomCollection", "CustomIcon", icon);

}

    public toolbarCustomIconOnViewInit(): void {

  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
  
}

    @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

    기본적으로 Angular 도구 모음은 수평으로 표시되지만, orientation 속성을 설정하여 수직으로 표시할 수도 있습니다.

    <igx-toolbar orientation="Vertical" />

    다음 예제는 Angular Toolbar의 수직 방향을 보여줍니다.

    색상 편집기

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

    <igx-toolbar
  name="toolbar"
  #toolbar>
      <igx-tool-action-color-editor
      title="Series Brush"
      name="colorEditorTool"
      #colorEditorTool>
      </igx-tool-action-color-editor>
</igx-toolbar>

    <igc-toolbar
  name="toolbar"
  id="toolbar">
      <igc-tool-action-color-editor
      title="Series Brush Color"
      name="colorEditorTool"
      id="colorEditorTool">
      </igc-tool-action-color-editor>
</igc-toolbar>

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

    API References

    Additional Resources