Web Components Toolbar (ツールバー) の概要

    Web Components ツールバー コンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、IgcDataChartComponent または IgcCategoryChartComponent コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。

    Web Components ツールバーの例

    依存関係

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

    使用方法

    ツール操作

    以下は、ツールバーに追加できるさまざまな IgcToolActionComponent 項目のリストです。

    これらのツールはそれぞれ、マウスのクリックによってトリガーされる OnCommand イベントを公開します。

    IgcToolActionComponent オブジェクトの overlayId、beforeId、および afterId プロパティを使用して、新規および既存のツールの位置を変更したり、非表示にマークしたりすることができます。ToolActions は visibility プロパティも公開します。

    次の例は、組み込みの ZoomReset と AnalyzeMenu メニュー ツール アクションの両方を非表示にする方法を示しています。ZoomReset ツール操作の新しいインスタンスが追加され、afterId プロパティを使用して ZoomMenu 内に配置され、それを ZoomOut に割り当てます。これにより、新しいリセット ツールが ZoomMenu の下部に表示されます。

    Web Components データ チャートの統合

    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 が Toolbar にリンクされると、いくつかの既存の IgcToolActionComponent 項目とメニューが使用可能になります。以下は、組み込みの Web Components IgcDataChartComponent ツール操作とそれに関連付けられた overlayId のリストです。

    ズーム操作

    トレンド操作

    画像に保存アクション

    • CopyAsImage: チャートをクリップボードにコピーするオプションを公開する IgcToolActionLabelComponent。
    • CopyHeader: サブ セクションのヘッダー。

    SVG アイコン

    ツールを手動で追加する場合、RenderIconFromText メソッドを使用してアイコンを割り当てることができます。このメソッドには 3 つのパラメーターを渡す必要があります。1 つ目は、ツールで定義されたアイコン コレクション名です (例: iconCollectionName)。2 つ目は、ツールで定義されたアイコンの名前 (例: 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);
}

    垂直方向

    デフォルトでは、Web Components ツールバーは水平に表示されますが、orientation プロパティを設定することで垂直に表示することもできます。

    <igc-toolbar orientation="Vertical" />

    次の例は、Web Components ツールバーの垂直方向を示しています。

    API リファレンス

    その他のリソース