コンテナ

コンテナコンポーネントは、Dynamic Components のための多用途なビルディングブロックです。他のコンポーネントを整理・スタイリングする基盤として機能します。

コンボボックス チュートリアル 例

User Activity Report

---

セットアップ コンテナの設定

1. コンテナをドラッグし、その中に他のコンポーネントをドラッグする

Container コンポーネントには単一のスロットがあり、任意の Avonni Dynamic Component をドラッグ＆ドロップできます。これにより、複雑なレイアウトを作成したり、関連するコンポーネントをまとめてグループ化したりできます。例えば、複数のコンポーネントをコンテナにドラッグして、特定の背景色や画像を持つセクションを作成できます。

コンテナ内に別のコンポーネントを配置する方法

2. コンテナをカスタマイズする

• バリアント： コンテナのビジュアルスタイルを選択：

  • 標準： 追加のスタイリングのない基本的なコンテナ。

  • ボックス： 控えめなボーダーとパディングを追加します。

  • カード： シャドウ効果のあるカード風のコンテナを作成します。

• 背景画像： コンテナの背景用画像をアップロードします。

• オーバーレイ色： 可読性を高めたり特定の視覚効果を作り出したりするために、背景画像に半透明のオーバーレイ色を追加します。

なぜ Container コンポーネントを使うのか？

Container コンポーネントは、Avonni Dynamic Components のために、構造化され視覚的に魅力的なレイアウトを作成するのに最適なコンポーネントブロックです。他のコンポーネントのラッパーとして機能し、いくつかの重要な利点を提供します：

整理と構造

• グルーピング： 関連するコンポーネントを論理的にまとめてグループ化します。これにより、Dynamic Component の整理が改善され、理解と保守が容易になります。

• 視覚的ヒエラルキー： コンテナ内で要素をグループ化することで明確な視覚的ヒエラルキーを作成します。これにより、UI の異なる部分間の関係をユーザーが理解しやすくなります。

スタイリングとレイアウト

• 一貫したスタイリング： コンテナにスタイル（色、ボーダー、パディング等）を適用すると、 内包されるすべてのコンポーネントに 適用されます。これにより視覚的一貫性が保たれ、各コンポーネントを個別にスタイリングする手間を省けます。

• レイアウト制御： 内包されたコンポーネントのレイアウトを制御します。コンテナ上のプロパティを設定して、整列、間隔、その他のレイアウト面を制御できることが多いです。

• 背景とボーダー： コンポーネントのグループに対して背景色やボーダーを簡単に追加できます。

柔軟性と再利用性

• 容易な移動／複製： コンテナをドラッグまたはコピーするだけで、 グループ全体 のコンポーネントを移動または複製できます。各コンポーネントを個別に移動するよりはるかに簡単です。

• コンポーネントのネスト： コンテナを入れ子にすることも 可能で、 他のコンテナの中に配置して、複雑で階層的なレイアウトを作成できます。

継承される可視性

• 簡素化された可視性の制御： Container の 重要な 機能は、 可視性を制御する 点にあります。コンテナの Visible プロパティを false （または評価結果が false), コンテナ内のすべてのコンポーネントは非表示になります）にバインドした場合、個々の Visible 設定に関係なく。これにより、UI のセクション全体の可視性管理が簡素化されます。

要するに、Container コンポーネントは、複数のコンポーネントをグループ化、スタイル適用、整理、可視性制御する強力な方法を提供し、より保守しやすく視覚的に魅力的な Dynamic Components を実現します。