Web Components Toolbar コンポーネント | Ignite UI for Web Components

Premium

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

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

DataChart コンポーネントとその機能とともに Toolbar を使用する場合、次のモジュールが必要です。

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

使用方法

ツール操作

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

これらのツールはそれぞれ、マウスのクリックによってトリガーされる OnCommand イベントを公開します。注: ToolActionIconMenu は、ToolActionIconMenu 内にラップすることもできる他のツールのラッパーです。

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

次の例は、いくつかの機能を示しています。まず、ZoomReset や AnalyzeMenu メニューツール操作などの組み込みツールを非表示にするなど、ToolActionSubPanel でツールをグループ化できます。この例では、AfterId プロパティを使用して ZoomMenu 内に ZoomReset ツール操作の新しいインスタンスを作成し、それを ZoomOut に割り当てて配置を正確にします。また、ツールの IsHighlighted プロパティによってもハイライト表示されます。

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

Web Components ツールバーには、Target プロパティが含まれています。これは、以下のコードに示すように、DataChart などのコンポーネントをリンクするために使用されます。

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

DataChart が Toolbar にリンクされると、いくつかの既存の ToolAction 項目とメニューが使用可能になります。以下は、組み込みの Web Components DataChart ツール操作とそれに関連付けられた OverlayId のリストです。

ズーム操作

ZoomMenu: チャートのズームレベルを増減するための ZoomIn および ZoomOut メソッドを呼び出す 3 つの ToolActionLabel 項目を公開する ToolActionIconMenu には、チャートの ResetZoom メソッドを呼び出してズームレベルをデフォルトの位置にリセットする ZoomReset が含まれます。

トレンド操作

AnalyzeMenu: チャートのさまざまなオプションを構成するためのいくつかのオプションを含む ToolActionIconMenu。
AnalyzeHeader: サブセクションのヘッダー。
- LinesMenu: チャート上で水平破線を表示するためのさまざまなツールが含まれるサブメニュー。
- LinesHeader: 次の 3 つのツールのサブメニューセクションヘッダー:
- MaxValue: シリーズの最大値で yAxis に沿って水平破線を表示する ToolActionCheckbox。
- MinValue: シリーズの最小値で yAxis に沿って水平破線を表示する ToolActionCheckbox。
- Average: シリーズの平均値で yAxis に沿って水平破線を表示する ToolActionCheckbox。
- TrendsMenu: さまざまな近似曲線を DataChart プロット領域に適用するためのツールを含むサブメニュー。
- TrendsHeader: 次の 3 つのツールのサブメニューセクションヘッダー:
- Exponential: チャート内の各シリーズの TrendLineType を ExponentialFit に設定する ToolActionRadio。
- Linear: チャート内の各シリーズの TrendLineType を LinearFit に設定する ToolActionRadio。
- Logarithmic: チャート内の各シリーズの TrendLineType を LogarithmicFit に設定する ToolActionRadio。
HelpersHeader: サブセクションのヘッダー。
- SeriesAvg: Average タイプの ValueLayerValueMode を使用して、チャートのシリーズコレクションに ValueLayer を追加または削除する ToolActionCheckbox。
- ValueLabelsMenu: DataChart のプロット領域に注釈を表示するためのさまざまなツールを含むサブメニュー。
- ValueLabelsHeader: 次のツールのサブメニューセクションヘッダー:
- ShowValueLabels: CalloutLayer を使用してデータポイント値を切り替える ToolActionCheckbox。
- ShowLastValueLabel: FinalValueLayer を使用して最終値軸の注釈を切り替える ToolActionCheckbox。
ShowCrosshairs: チャートの CrosshairsDisplayMode プロパティを介してマウスオーバー十字線の注釈を切り替える ToolActionCheckbox。
ShowGridlines: X-Axis に MajorStroke を適用することで追加のグリッド線を切り替える ToolActionCheckbox。

画像に保存アクション

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

SVG アイコン

ツールを手動で追加する場合、RenderIconFromText メソッドを使用してアイコンを割り当てることができます。このメソッドには 3 つのパラメーターを渡す必要があります。1 つ目は、ツールで定義されたアイコンコレクション名です (例: IconCollectionName)。2 つ目は、ツールで定義されたアイコンの名前 (例: IconName) で、その後に SVG 文字列を追加します。

データ URL アイコン

svg を追加するのと同様に、RegisterIconFromDataURL を介して URL からアイコン画像を追加することもできます。メソッドの 3 番目のパラメーターは、文字列 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" />

The following example demonstrates the vertical orientation of the Web Components Toolbar.

Color Editor

You can add a custom color editor tool to the the Web Components Toolbar, which will also work with the Command event to perform custom styling to your application.

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

The following example demonstrates styling the Web Components Data Chart series brush with the Color Editor tool.

Web Components ツールバーの例

依存関係

使用方法

ツール操作

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

SVG アイコン

データ URL アイコン

Vertical Orientation

Color Editor

API References

Additional Resources

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

Web Components ツールバーの例

依存関係

使用方法

ツール操作

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

SVG アイコン

データ URL アイコン

Vertical Orientation

Color Editor

API References

Additional Resources

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