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 イベントを公開します。注: IgbToolActionIconMenu は、IgbToolActionIconMenu 内にラップすることもできる他のツールのラッパーです。

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

    次の例は、いくつかの機能を示しています。まず、ZoomReset や AnalyzeMenu メニュー ツール操作などの組み込みツールを非表示にするなど、IgbToolActionSubPanel でツールをグループ化できます。この例では、AfterId プロパティを使用して ZoomOut に割り当てることで、ZoomReset ツール操作の新しいインスタンスが追加され、ZoomMenu 内に配置されます。また、ツールの IsHighlighted プロパティによってもハイライト表示されます。これにより、新しいリセット ツールが 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 を使用して、チャートのシリーズ コレクションに IgbValueLayer を追加または削除する IgbToolActionCheckbox。
    • ValueLabelsMenu: IgbDataChart のプロット領域に注釈を表示するためのさまざまなツールを含むサブ メニュー。
    • ShowCrosshairs: チャートの CrosshairsDisplayMode プロパティを介してマウスオーバー十字線の注釈を切り替える IgbToolActionCheckbox。
    • ShowGridlines: X-Axis に MajorStroke を適用することで追加のグリッド線を切り替える IgbToolActionCheckbox。

    画像に保存アクション

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

    SVG アイコン

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

    データ URL アイコン

    svg を追加するのと同様に、RegisterIconFromDataURL を介して URL からアイコン画像を追加することもできます。メソッドの 3 番目のパラメーターは、文字列 URL を入力するために使用されます。

    次のスニペットは、アイコンを追加する両方の方法を示しています。

    <IgbToolActionLabel
    Title="Custom Icon"
    IconName="CustomIcon"
    IconCollectionName="CustomCollection">
</IgbToolActionLabel>

@code {

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var toolbar = this.toolbar;

        if (firstRender) {
            this.ToolbarCustomIconOnViewInit();
        }
    }

    private IgbToolbar toolbar;

    public void ToolbarCustomIconOnViewInit()
    {
    	this.toolbar.EnsureReady().ContinueWith(new Action<Task>((e) =>
    	{
    		string 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.RegisterIconFromTextAsync("CustomCollection", "CustomIcon", icon);
    	}));
    }

}

    @code {

    protected override async Task OnAfterRenderAsync(bool firstRender)
{
    var toolbar = this.toolbar;

    if (firstRender) {
        this.ToolbarCustomIconOnViewInit();
    }
}

private IgbToolbar toolbar;

public void ToolbarCustomIconOnViewInit()
{
	this.toolbar.EnsureReady().ContinueWith(new Action<Task>((e) =>
	{
        this.toolbar.RegisterIconFromDataURLAsync("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
	}));
}

    }

    
```tsx
<IgrToolbar orientation="Vertical" />

    垂直方向

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

    <IgbToolbar Orientation="ToolbarOrientation.Vertical" />

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

    Color Editor (カラー エディター)

    Blazor Toolbar にカスタム カラー エディター ツールを追加できます。このツールは、コマンド イベントと連携して、アプリケーションにカスタム スタイルを適用することもできます。

    <IgbToolbar
Name="toolbar"
@ref="toolbar">
    <IgbToolActionColorEditor
    Title="Series Brush">
    </IgbToolActionColorEditor>
</IgbToolbar>

    次の例は、カラー エディター ツールを使用して Blazor Data Chart シリーズ ブラシのスタイルを設定する方法を示しています。

    API リファレンス

    その他のリソース