Angular Toolbar Overview

    The Angular Toolbar component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our IgxDataChartComponent or IgxCategoryChartComponent components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.

    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

    다음 모듈들은 컴포넌트IgxToolbarComponent와 그 기능을 사용할IgxDataChartComponent 때 필요합니다.

    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 노출합니다. 참고로, 이IgxToolActionIconMenuComponent 도구는 다른 도구들도 안에 감을IgxToolActionIconMenuComponent 수 있는 래퍼입니다.

    새로운 도구와 기존 도구를 객체의overlayId 'and 속성'을 사용해beforeId​afterId​IgxToolActionComponent 위치를 바꾸고 숨김으로 표시할 수 있습니다. ToolActions는 속성도visibility 노출합니다.

    다음 예시는 몇 가지 특징을 보여줍니다. 먼저 도구를 그룹으로 묶을 수 있습니다.IgxToolActionSubPanelComponent 내장된 도구들을 숨기는 것도 포함해서, 줌리셋 그리고 분석메뉴 메뉴 도구 동작. 이 예시에서 새로운 인스턴스는 줌리셋 도구 내 작동 줌 메뉴 다음에afterId 속성에 할당하고 줌아웃 정확히 말하면 그 위치입니다. 또한 이 부분은isHighlighted 도구에 대한 속성.

    Angular Data Chart Integration

    The Angular Toolbar contains a Target property. This is used to link a component, such as the IgxDataChartComponent as shown in the code below:

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

    Several pre-existing IgxToolActionComponent items and menus become available when the IgxDataChartComponent is linked with the Toolbar. Here is a list of the built-in Angular IgxDataChartComponent Tool Actions and their associated overlayId:

    확대/축소 작업

    추세 조치

    이미지에 저장 작업

    • CopyAsImage: 이IgxToolActionLabelComponent 기능은 차트를 클립보드에 복사할 수 있는 옵션을 노출시킵니다.
    • CopyHeader: 하위 섹션 헤더.

    SVG Icons

    When adding tools manually, icons can be assigned using the RenderIconFromText method. There are three paramters to pass in this method. The first is the icon collection name defined on the tool eg. iconCollectionName. The second is the name of the icon defined on the tool eg. iconName, followed by adding the SVG string.

    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

    By default the Angular Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the orientation property.

    <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