アコーディオン ウィジェットは、他のウィジェットを縦並びのメニューに整理するのに使用できるレイアウト コンテナーです。 アコーディオン ウィジェットに配置した各ウィジェットは、展開/折りたたみ状態のヘッダーになります。 ヘッダー、展開ボタンと折りたたみボタン、ウィジェット パネルをカスタマイズできます。
例
このウィジェットを使用して、次のようなアプリの設計要件をサポートします。
- テキスト、凡例、レイヤー リストなどのエレメントを整理します。
- アプリ ページのスペースを節約したいので、すべてのコンテンツを一度に表示する必要はありません。
- 見出しを表示して、ユーザーが必要に応じて展開してさらに情報を表示できるようにします。
使用上の注意
アコーディオン ウィジェットを追加すると、[クイック スタイル] メニューが表示されます。 4 つのデフォルトのスタイルから選択できます。 4 つのスタイルの主な違いは、ヘッダーの形状とコンテンツです。 ウィジェットの設定でこれらすべてをカスタマイズすることができます。
アコーディオンにウィジェットを追加するには、[ウィジェットの挿入] パネルからアコーディオン内にウィジェットをドラッグします。
アコーディオン内のウィジェットを並べ替えるには、ウィジェットのヘッダーをクリックしてドラッグします。 ウィジェットをクリックし、ウィジェットのツールバーに表示される [下に移動] ボタンと [上に移動] ボタンを使用することもできます。
アコーディオンからウィジェットを削除するには、ウィジェットのヘッダーをクリックしてアコーディオンの外にドラッグします。
ヘッダー内のウィジェットのアイコンや名前を変更するには、ウィジェットを選択し、ウィジェット構成パネルの上部でアイコンと名前を変更します。
設定
アコーディオン ウィジェットには次の設定があります。
- [レイアウト] - この設定では、ヘッダー エレメント同士の間隔、およびヘッダー エレメントとアコーディオン ウィジェット パネルのエッジとの間隔を制御します。
- [間隔] - ヘッダー間の垂直間隔をピクセル単位 ([px]) で定義します。
- [パディング] - パディング スペースのサイズ (ヘッダーとウィジェット パネルのエッジの間隔) をすべて一度にまたは個別に変更します。 サイズの値はピクセル単位 ([px]) で指定できます。
- [一般設定] - ヘッダーの展開に関連する設定です。
- [展開可能なアイテムの数] - ヘッダーを一度に 1 つだけ展開できるか複数のヘッダーを展開できるかを選択します。
- [読み込み時にアイテムを展開] - 必要に応じて、ウィジェットを初めて読み込むときに自動的に展開する 1 つ以上のウィジェットを選択します。
- [すべて展開/折りたたみボタン] - すべてのヘッダーを展開/折りたたむボタンをウィジェット パネルに追加します。
- [ヘッダー] - ヘッダー エディターの 3 つの部分をクリックして、背景と枠線、パディング、コンテンツに関連する設定を表示できます。
- [背景と枠線] - ヘッダーの背景と枠線に関連する設定を変更します。
- [背景] - ヘッダーが折りたたまれているときと展開されているときの背景色を選択します。
- [枠線] - ヘッダーの枠線の塗りつぶし色、ストローク、サイズをピクセル単位 ([px]) で変更します。 これらのすべての属性は、枠線全体について、または 4 つの辺について個別に変更できます。
- [枠線の半径] - 枠線の半径の長さを、すべて一度に、または 4 つの角それぞれについて個別に変更します。 半径の値はピクセル ([px]) またはパーセント ([%]) で指定できます。 ヘッダーの角を丸くするには、大きな半径を設定します。
- [パディング] - パディング スペースのサイズ (ヘッダーの 4 つのエッジとヘッダー コンテンツの間隔) をすべて一度にまたは個別に変更します。 値はピクセル単位 ([px]) で指定できます。
- [コンテンツ] - ヘッダーのコンテンツに関連する設定を変更します。
- [アイコン] - ウィジェット アイコンをヘッダーに追加します。 アイコンのサイズや色を変更できます。 ウィジェット アイコンは各ウィジェットの構成パネルの上部で設定できます。
注意:
カスタム アイコンをアップロードした場合、この設定ではカスタム アイコンの色を変更できないことがあります。
- [テキスト] - 太字、斜体、取り消し線、および下線の書式設定をヘッダーのテキストに適用します。 フォントの色を変更したり、フォント サイズをピクセル単位 ([px]) で設定することもできます。
- [ボタン] - 展開ボタンと折りたたみボタンのアイコンを設定します。
- [切り替え位置] - 展開ボタンと折りたたみボタンを配置する場所として、各ヘッダーの左 ([開始]) または右 ([終了]) を選択します。
- [アイコン] - ウィジェット アイコンをヘッダーに追加します。 アイコンのサイズや色を変更できます。 ウィジェット アイコンは各ウィジェットの構成パネルの上部で設定できます。
- [背景と枠線] - ヘッダーの背景と枠線に関連する設定を変更します。
- [パネル] - ウィジェット パネル (展開/折りたたみボタンで開いたり閉じたりするパネル) に関連する設定を変更します。
- [パディング] - パディング スペースのサイズ (ウィジェットのコンテンツとウィジェット パネルの 4 つのエッジの間隔) をすべて一度にまたは個別に変更します。 サイズの値はピクセル単位 ([px]) で指定できます。
- [塗りつぶし] - ウィジェット パネルの塗りつぶし色を選択します。
- [枠線] - パネルの枠線の塗りつぶし色、ストローク、サイズをピクセル単位 ([px]) で変更します。 これらのすべての属性は、枠線全体について、または 4 つの辺について個別に変更できます。
- [枠線の半径] - 枠線の半径の長さを、すべて一度に、または 4 つの角それぞれについて個別に変更します。 半径の値はピクセル ([px]) またはパーセント ([%]) で指定できます。 パネルの角を丸くするには、大きな半径を設定します。