Web Components 도구 모음 개요

    Web Components 도구 모음 구성 요소는 주로 차트 작성 구성 요소와 함께 사용되는 UI 작업을 위한 동반 컨테이너입니다. 도구 모음은 IgcDataChartComponent 또는 IgcCategoryChartComponent 구성 요소에 연결되면 미리 설정된 속성 및 도구 항목으로 동적으로 업데이트됩니다. 최종 사용자가 변경 사항을 제공하고 끝없는 양의 사용자 정의를 제공할 수 있도록 프로젝트에 대한 사용자 정의 도구를 만들 수 있습니다.

    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

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

    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 이벤트를 노출합니다.

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

    다음 예에서는 기본 제공 항목을 모두 숨기는 방법을 보여줍니다. 확대/축소 재설정 그리고 분석메뉴 메뉴 도구 작업. 새로운 인스턴스 확대/축소 재설정 도구 작업이 추가되어 확대/축소메뉴을 사용하여 afterId 속성을 할당하고 축소. 그러면 새 재설정 도구가 화면 하단에 표시됩니다. 확대/축소메뉴.

    Web Components Data Chart Integration

    Web Components 도구 모음에는 Target 속성이 포함되어 있습니다. 이는 아래 코드에 표시된 대로 IgcDataChartComponent와 같은 구성 요소를 연결하는 데 사용됩니다.

      <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();
  }

    ​IgcDataChartComponent가 도구 모음과 연결되면 기존의 여러 IgcToolActionComponent 항목과 메뉴를 사용할 수 있게 됩니다. 다음은 내장된 Web Components IgcDataChartComponent 도구 작업 및 관련 overlayId 목록입니다.

    확대/축소 작업

    추세 조치

    이미지에 저장 작업

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

    SVG Icons

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

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

    Vertical Orientation

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

    <igc-toolbar orientation="Vertical" />

    다음 예제에서는 Web Components Toolbar의 세로 방향을 보여 줍니다.

    API References

    Additional Resources