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 項目のリストです。

• IgbToolActionButton
• IgbToolActionCheckbox
• IgbToolActionIconButton
• IgbToolActionIconMenu
• IgbToolActionLabel
• IgbToolActionNumberInput
• IgbToolActionRadio

これらのツールはそれぞれ、マウスのクリックによってトリガーされる 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 のリストです。

ズーム操作

• ZoomReset: チャート上で ResetZoom メソッドを呼び出し、ズーム レベルをデフォルトの位置にリセットする IgbToolActionLabel。
• ZoomMenu: チャートのズーム レベルを増減するためにチャート上で ZoomIn および ZoomOut メソッドを呼び出す 2 つの IgbToolActionLabel 項目を公開する IgbToolActionIconMenu。

トレンド操作

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

画像に保存アクション

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

SVG アイコン

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

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

}

垂直方向

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

<IgbToolbar Orientation="ToolbarOrientation.Vertical" />

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

API リファレンス

• IgbToolbar
• IgbDataChart

その他のリソース

• Ignite UI for Blazor フォーラム (英語)
• Ignite UI for Blazor GitHub (英語)