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
を使用して、チャートのシリーズ コレクションにValueLayer
を追加または削除するIgbToolActionCheckbox
。ValueLabelsMenu
:IgbDataChart
のプロット領域に注釈を表示するためのさまざまなツールを含むサブ メニュー。ValueLabelsHeader
: 次のツールのサブ メニュー セクション ヘッダー:ShowValueLabels
:IgbCalloutLayer
を使用してデータ ポイント値を切り替えるIgbToolActionCheckbox
。ShowLastValueLabel
:IgbFinalValueLayer
を使用して最終値軸の注釈を切り替えるIgbToolActionCheckbox
。
ShowCrosshairs
: チャートのCrosshairsDisplayMode
プロパティを介してマウスオーバー十字線の注釈を切り替えるIgbToolActionCheckbox
。ShowGridlines
: X-Axis にMajorStroke
を適用することで追加のグリッド線を切り替えるIgbToolActionCheckbox
。
垂直方向
デフォルトでは、Blazor ツールバーは水平に表示されますが、Orientation
プロパティを設定することで垂直に表示することもできます。
<IgbToolbar Orientation="ToolbarOrientation.Vertical" />