ユーティリティバーのコンポーネントの設定

アプリケーションのユーティリティバーのユーティリティ項目として Lightning Web コンポーネントを使用するには、コンポーネントのメタデータを定義します。

1.設定ファイルでコンポーネントのメタデータを定義する

componentName.js-meta.xml ファイルは、コンポーネントのメタデータ値を定義します。コンポーネントをユーティリティバーのユーティリティ項目として使用できるようにするには、isExposed を true に設定し、lightning__UtilityBar 対象を定義します。アプリケーションマネージャで編集可能なプロパティを公開するには、targetConfigs でプロパティを定義します。

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3  <apiVersion>47.0</apiVersion>
4  <isExposed>true</isExposed>
5  <masterLabel>Sample Utility Bar Component</masterLabel>
6  <description>This is a demo component.</description>
7  <targets>
8    <target>lightning__UtilityBar</target>
9  </targets>
10  <targetConfigs>
11    <targetConfig targets="lightning__UtilityBar">
12      <property name="prop1" type="Boolean" />
13    </targetConfig>
14  </targetConfigs>
15</LightningComponentBundle>

「XML 設定ファイルの要素」の完全なリストを参照してください。

2.省略可能: SVG リソースをコンポーネントバンドルに追加する

アプリケーションマネージャに表示されるユーティリティ項目のカスタムアイコンとして SVG リソースを含めるには、コンポーネントのフォルダに SVG リソースを追加します。SVG リソースの名前は、.componentNamesvg にする必要があります。フォルダあたりの SVG の数は 1 つのみです。

関連トピック

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。