@@ -82,12 +82,13 @@ IgrDataChartCategoryTrendLineModule.register();
8282* [ ` IgxToolActionLabelComponent ` ] ( {environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionlabelcomponent.html )
8383* [ ` IgxToolActionNumberInputComponent ` ] ( {environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionnumberinputcomponent.html )
8484* [ ` IgxToolActionRadioComponent ` ] ( {environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionradiocomponent.html )
85+ * [ ` IgxToolActionSubPanelComponent ` ] ( {environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionsubpanelcomponent.html )
8586
86- これらのツールはそれぞれ、マウスのクリックによってトリガーされる ` OnCommand ` イベントを公開します。
87+ これらのツールはそれぞれ、マウスのクリックによってトリガーされる ` OnCommand ` イベントを公開します。注: [ ` IgxToolActionIconMenuComponent ` ] ( {environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioniconmenucomponent.html ) は、 [ ` IgxToolActionIconMenuComponent ` ] ( {environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioniconmenucomponent.html ) 内にラップすることもできる他のツールのラッパーです。
8788
8889[`IgxToolActionComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html) オブジェクトの [`overlayId`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#overlayId)、[`beforeId`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#beforeId)、および [`afterId`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#afterId) プロパティを使用して、新規および既存のツールの位置を変更したり、非表示にマークしたりすることができます。ToolActions は [`visibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#visibility) プロパティも公開します。
8990
90- 次の例は、組み込みの ** ZoomReset** と ** AnalyzeMenu** メニュー ツール アクションの両方を非表示にする方法を示しています。 ** ZoomReset ** ツール操作の新しいインスタンスが追加され 、[ ` afterId ` ] ( {environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#afterId ) プロパティを使用して ** ZoomMenu ** 内に配置され、それを ** ZoomOut ** に割り当てます。 これにより、新しいリセット ツールが ** ZoomMenu** の下部に表示されます 。
91+ 次の例は、いくつかの機能を示しています。まず、 **ZoomReset** や **AnalyzeMenu** メニュー ツール操作などの組み込みツールを非表示にするなど、[`IgxToolActionSubPanelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionsubpanelcomponent.html) でツールをグループ化できます。この例では 、[`afterId`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#afterId) プロパティを使用して **ZoomOut ** に割り当てることで、**ZoomReset** ツール操作の新しいインスタンスが追加され、**ZoomMenu ** 内に配置されます。また、ツールの [`isHighlighted`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#isHighlighted) プロパティによってもハイライト表示されます。 これにより、新しいリセット ツールが **ZoomMenu** の下部にすぐに表示されます 。
9192
9293<code-view style="height: 600px" alt="Angular Toolbar の例"
9394 data-demos-base-url="{environment: dvDemosBaseUrl }"
@@ -154,6 +155,12 @@ Angular ツールバーには、`Target` プロパティが含まれています
154155
155156ツールを手動で追加する場合、` RenderIconFromText ` メソッドを使用してアイコンを割り当てることができます。このメソッドには 3 つのパラメーターを渡す必要があります。1 つ目は、ツールで定義されたアイコン コレクション名です (例: [ ` iconCollectionName ` ] ( {environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#iconCollectionName ) )。2 つ目は、ツールで定義されたアイコンの名前 (例: [ ` iconName ` ] ( {environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#iconName ) ) で、その後に SVG 文字列を追加します。
156157
158+ ### データ URL アイコン
159+
160+ svg を追加するのと同様に、` RegisterIconFromDataURL ` を介して URL からアイコン画像を追加することもできます。メソッドの 3 番目のパラメーターは、文字列 URL を入力するために使用されます。
161+
162+ 次のスニペットは、アイコンを追加する両方の方法を示しています。
163+
157164``` html
158165<igx-tool-action-label
159166 title =" Custom Icon"
@@ -171,15 +178,61 @@ public toolbarCustomIconOnViewInit(): void {
171178}
172179```
173180
181+ ``` ts
182+ public toolbarCustomIconOnViewInit (): void {
183+
184+ toolbar .registerIconFromDataURL (" CustomCollection" " CustomIcon" " https://www.svgrepo.com/show/678/calculator.svg"
185+
186+ }
187+ ```
188+
174189``` ts
175190public toolbarCustomIconOnViewInit (): void {
176191
177192 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>';
178193
179194 this .toolbar .registerIconFromText (" CustomCollection" " CustomIcon" icon );
195+
180196}
181197```
182198
199+ ``` ts
200+ public toolbarCustomIconOnViewInit (): void {
201+
202+ toolbar .registerIconFromDataURL (" CustomCollection" " CustomIcon" " https://www.svgrepo.com/show/678/calculator.svg"
203+
204+ }
205+ ```
206+
207+ @code {
208+
209+ protected override async Task OnAfterRenderAsync(bool firstRender)
210+ {
211+ var toolbar = this.toolbar;
212+
213+ if (firstRender) {
214+ this.ToolbarCustomIconOnViewInit();
215+ }
216+ }
217+
218+ private IgbToolbar toolbar;
219+
220+ public void ToolbarCustomIconOnViewInit()
221+ {
222+ this.toolbar.EnsureReady().ContinueWith(new Action<Task>((e) =>
223+ {
224+ this.toolbar.RegisterIconFromDataURLAsync("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
225+ }));
226+ }
227+
228+ }
229+
230+ ````
231+
232+ ```tsx
233+ <IgrToolbar orientation="Vertical" />
234+ ````
235+
183236### 垂直方向
184237
185238デフォルトでは、Angular ツールバーは水平に表示されますが、[ ` orientation ` ] ( {environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html#orientation ) プロパティを設定することで垂直に表示することもできます。
@@ -188,7 +241,9 @@ public toolbarCustomIconOnViewInit(): void {
188241<igx-toolbar orientation =" Vertical"
189242```
190243
191- 次の例は、Angular ツールバーの垂直方向を示しています。 <code-view style="height: 600px" alt="Angular 垂直方向"
244+ 次の例は、Angular ツールバーの垂直方向を示しています。
245+
246+ <code-view style="height: 600px" alt="Angular 垂直方向"
192247 data-demos-base-url="{environment: dvDemosBaseUrl }"
193248 iframe-src="{environment: dvDemosBaseUrl }/charts/toolbar/layout-in-vertical-orientation"
194249 github-src="charts/toolbar/layout-in-vertical-orientation">
0 commit comments