Behållarkomponent container-component

Med komponenten Core Component Container kan du skapa en behållare för flera ytterligare komponenter på en sida.

Användning usage

Med komponenten Core Component Container kan du skapa en behållare för flera ytterligare komponenter på en sida. Den kan användas för att gruppera andra komponenter och använda en gemensam stil eller layout.

  • Behållarens egenskaper kan väljas i dialogrutan Konfigurera.
  • Standardvärden för behållarkomponenten när du lägger till den på en sida kan definieras i designdialogrutan.

Version och kompatibilitet version-and-compatibility

Den aktuella versionen av Container Component är v1, som introducerades i version 2.5.0 av Core Components i juni 2019, och som beskrivs i det här dokumentet.

Följande tabell visar alla versioner av komponenten som stöds, de AEM versionerna som komponenterna är kompatibla med och länkar till dokumentation för tidigare versioner.

Komponentversion
AEM 6.4
AEM 6.5
AEM as a Cloud Service
v1
Kompatibel med
version 2.17.4 och tidigare
Kompatibel
Kompatibel

Mer information om versioner och versioner av kärnkomponenter finns i dokumentet Core Components Versions.

Exempel på komponentutdata sample-component-output

Om du vill visa Container-komponenten och exempel på dess konfigurationsalternativ samt HTML och JSON-utdata, går du till komponentbiblioteket.

Teknisk information technical-details

Den senaste tekniska dokumentationen om behållarkomponenten finns på GitHub.

Mer information om hur du utvecklar kärnkomponenter finns i dokumentationen för kärnkomponentutvecklare.

Konfigurera dialogruta configure-dialog

I dialogrutan Konfigurera kan innehållsförfattaren definiera behållarobjektet och hur det fungerar och visas för en besökare på sidan.

Dialogrutan Redigera för behållarkomponenten

  • Layout - Det här alternativet definierar beteendet eller layoutbeteendet för behållarkomponenten.

    • Enkel - Definierar en behållare som en enkel samling komponenter
    • Responsivt stödraster - Definierar en behållare som en AEM responsiv layout
  • Bakgrundsfärg - Definierbar antingen som RGB med valfri form eller med färgväljaren, beroende på konfiguration

  • Bakgrundsbild - Definierar en bakgrundsfärg för behållaren, beroende på konfiguration

  • ID - Med det här alternativet kan du styra den unika identifieraren för komponenten i HTML och i datalagret.

    • Om inget anges genereras ett unikt ID automatiskt åt dig och du hittar det genom att granska den resulterande sidan.
    • Om ett ID anges är det författarens ansvar att se till att det är unikt.
    • Om du ändrar ID:t kan det påverka spårningen av CSS, JS och datalager.

Designdialogruta design-dialog

I designdialogrutan kan mallskaparen definiera de alternativ som är tillgängliga för den innehållsförfattare som använder behållarkomponenten.

Fliken Tillåtna komponenter allowed-components-tab

Fliken Tillåtna komponenter används för att definiera vilka komponenter som kan läggas till som objekt i behållarkomponenten av innehållsförfattaren.

Fliken Tillåtna komponenter fungerar på samma sätt som fliken med samma namn när du definierar principen och egenskaperna för en layoutbehållare i mallredigeraren.

Fliken Standardkomponenter default-components-tab

Fliken Standardkomponenter används för att definiera vilken komponent som läggs till i komponenten när en viss resurstyp släpps i behållaren, på ungefär hur standardkomponenter definieras på sidmallen.

Fliken Responsiva inställningar responsive-settings-tab

Fliken Responsiva inställningar i designdialogrutan för behållarkomponenten

  • Kolumner - Definierar antalet kolumner i rutnätet för den resulterande behållaren.

Fliken Bakgrund background-tab

fliken Bakgrund i designdialogrutan för behållarkomponenten

  • Bakgrundsbild

    • Aktivera bakgrundsbild - Välj det här alternativet om du vill att innehållsförfattaren ska kunna definiera en bakgrundsbild för behållaren.
  • Bakgrundsfärg

    • Aktivera bakgrundsfärg - Välj det här alternativet om du vill att innehållsförfattaren ska kunna definiera en bakgrundsfärg för behållaren.
    • Endast färgrutor - Välj det här alternativet om du bara vill tillåta innehållsförfattaren att välja bland fördefinierade färgrutor för behållarens bakgrundsfärg.
      • Endast tillgängligt när Aktivera bakgrundsfärg har valts
  • Tillåtna färgrutor - Definiera fördefinierade färger från vilka innehållsförfattaren kan välja behållarens bakgrundsfärg

    • Använd knappen Lägg till för att lägga till en fördefinierad färgruta. När du har lagt till en post läggs den till i listan, som innehåller följande kolumner:
    • Värde - Definiera färgen manuellt via RGB-värden
      • Tryck eller klicka på färgväljaren för att enklare välja en färg genom att justera enskilda RGB-värden eller definiera ett hexadecimalt värde.
    • Ta bort - Tryck eller klicka för att ta bort en färgruta.
    • Ordna om - Tryck eller klicka och dra för att ändra ordningen på färgrutorna.

Fliken Format styles-tab

Containerkomponenten stöder AEM Style System.

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c