Web Components 도구 모음 개요

    The Web Components 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 IgcDataChartComponent or IgcCategoryChartComponent components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.

    Web Components Toolbar Example

    Dependencies

    Ignite UI for Web Components 레이아웃, 입력, 차트 및 핵심 패키지를 설치합니다.

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

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

    import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcToolbarModule } from 'igniteui-webcomponents-layouts';
import { IgcDataChartToolbarModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule, IgcDataChartCategoryTrendLineModule } from 'igniteui-webcomponents-charts';

ModuleManager.register(
    IgcToolbarModule,
    IgcToolActionLabelModule,
    IgcDataChartToolbarModule,
    IgcDataChartCategoryModule,
    IgcDataChartCoreModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule,
    IgcDataChartCategoryTrendLineModule
);

    Usage

    Tool Actions

    다음은 툴바에 추가할 수 있는 다양한IgcToolActionComponent 항목들의 목록입니다.

    이 도구들 각각은 마우스 클릭으로 트리거되는 이벤트를OnCommand 노출합니다. 참고로, 이IgcToolActionIconMenuComponent 도구는 다른 도구들도 안에 감을IgcToolActionIconMenuComponent 수 있는 래퍼입니다.

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

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

    Web Components Data Chart Integration

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

      <div>
      <igc-toolbar
      name="Toolbar"
      id="Toolbar">
      </igc-toolbar>
  </div>

  <div class="container fill">
      <igc-data-chart
      is-horizontal-zoom-enabled="true"
      name="chart"
      id="chart">
      </igc-data-chart>
  </div>

      private _bind: () => void;
  constructor() {
    var toolbar = this.toolbar = document.getElementById('Toolbar') as IgcToolbarComponent;
    var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;

    this._bind = () => {
        toolbar.target = this.chart;
    }
    this._bind();
  }

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

    확대/축소 작업

    추세 조치

    이미지에 저장 작업

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

    SVG Icons

    도구를 수동으로 추가할 때는 이RenderIconFromText 방법으로 아이콘을 할당할 수 있습니다. 이 방법에서는 세 가지 매개변수를 통과해야 합니다. 첫 번째는 도구에 정의된 아이콘 컬렉션 이름입니다. 예를 들어,iconCollectionName 두 번째는 도구에 정의된 아이콘 이름(예: SVG 문자열)입니다.iconName​

    Data URL Icons

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

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

    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");

}

    <igc-tool-action-label
    title="Custom Icon"
    icon-name="CustomIcon"
    icon-collection-name="CustomCollection">
</igc-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");

}

    Vertical Orientation

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

    <igc-toolbar orientation="Vertical" />

    다음 예제에서는 Web Components 도구 모음의 수직 방향을 보여줍니다.

    색상 편집기

    Web Components 도구 모음에 사용자 정의 색상 편집기 도구를 추가할 수 있으며, 이 도구는 명령 이벤트와 함께 작동하여 애플리케이션에 사용자 정의 스타일을 적용할 수도 있습니다.

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

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

    API References

    Additional Resources