Blazor Toolbar (ツールバー) の概要

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

    Blazor ツールバーの例

    依存関係

    IgniteUI.Blazor.Controls 名前空間を _Imports.razor ファイルに追加します。

    @using IgniteUI.Blazor.Controls

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

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(
    typeof(IgbToolbarModule),
    typeof(IgbDataChartToolbarModule),
    typeof(IgbDataChartCoreModule),
    typeof(IgbDataChartCategoryModule),
    typeof(IgbDataChartAnnotationModule),
    typeof(IgbDataChartInteractivityModule),
    typeof(IgbDataChartCategoryTrendLineModule)
);

    スタイルを IgbToolbar コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります。

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    使用方法

    ツール操作

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

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

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

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

    Blazor データ チャートの統合

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

      <IgbToolbar
    Name="Toolbar"
    @ref="toolbar"
    Target="@chart">
  <IgbToolbar>

  <IgbDataChart
    Name="chart"
    @ref="chart">
  </IgbDataChart>

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

    ズーム操作

    トレンド操作

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

    垂直方向

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

    <IgbToolbar Orientation="ToolbarOrientation.Vertical" />

    API リファレンス

    その他のリソース