容器元件 container-component
利用核心元件容器元件,可在頁面上為多個其他元件建立容器。
用途 usage
核心元件容器元件可在頁面上為多個其他元件建立容器,並可用於分組其他元件及套用通用樣式或版面。
版本和相容性 version-and-compatibility
容器元件的目前版本為 v1,此版本於 2019 年 6 月隨著核心元件 2.5.0 版發行導入,詳情請參閱本文件。
下表詳細說明該元件的所有支援版本、與元件版本相容的 AEM 版本,以及舊版文件的連結。
如需核心元件版本和發行版本的進一步詳細資訊,請參閱核心元件版本文件。
範例元件輸出 sample-component-output
若要體驗「容器元件」,並檢視其設定選項及 HTML 和 JSON 輸出的範例,請造訪「元件庫」。
技術詳細資訊 technical-details
在 GitHub 上可找到有關容器元件的最新技術文件。
如需開發「核心元件」的進一步詳細資訊,請參閱核心元件開發人員文件。
設定對話框 configure-dialog
設定對話框可讓內容作者定義容器項目,以及其對頁面訪客的行為與顯示方式。
設計對話框 design-dialog
透過設計對話框,範本作者可為使用容器元件的內容作者定義可用選項。
允許的元件索引標籤 allowed-components-tab
允許的元件 索引標籤用於定義可供內容作者作為項目新增至容器元件的元件。
在範本編輯器中定義版面容器的原則與屬性時,允許的元件索引標籤與同名索引標籤的功能相同。
預設元件索引標籤 default-components-tab
「預設元件」索引標籤用於定義當特定資產類型放置於容器上時,哪些元件要新增到元件中,類似於如何在頁面範本上定義預設元件。
回應式設定索引標籤 responsive-settings-tab
- 欄 - 定義產生容器的格線中的欄數。
背景索引標籤 background-tab
-
背景影像
- 啟用背景影像 - 選取此選項可讓內容作者定義容器的背景影像。
-
背景顏色
- 啟用背景顏色 - 選取此選項可讓內容作者定義容器的背景顏色。
- 僅色票 - 選取此選項,僅允許內容作者從預先定義的色票中選取容器背景顏色。
- 只有在選取 啟用背景顏色 時可用
-
允許的色票 - 定義內容作者可從中選擇容器背景顏色的預先定義顏色
- 使用 新增 按鈕新增預先定義的色票。新增後,就會在清單中新增一個項目,其中包含以下各欄:
- 值 - 透過 RGB 值手動定義顏色
- 點選或按一下檢色器,即可調整個別 RGB 值或定義十六進位值,更輕鬆地選取顏色。
- 刪除 - 點選或按一下,以刪除色票。
- 重新排列 - 點選或按一下並拖曳,以重新排列色票的順序。
樣式索引標籤 styles-tab
容器元件支援 AEM 樣式系統。