Containercomponent container-component
Met de component Core Component Container kunt u een container maken voor meerdere aanvullende componenten op een pagina.
Gebruik usage
Met de component Core Component Container kunt u een container maken voor meerdere aanvullende componenten op een pagina. U kunt deze component gebruiken om andere componenten te groeperen en een algemene stijl of lay-out toe te passen.
- De eigenschappen van de container kunnen worden geselecteerd in het dialoogvenster dialoogvenster configureren.
- De standaardinstellingen voor de Container-component wanneer deze aan een pagina wordt toegevoegd, kunnen worden gedefinieerd in het dialoogvenster ontwerpdialoogvenster.
Versie en compatibiliteit version-and-compatibility
De huidige versie van de Container Component is v1, die in juni 2019 met versie 2.5.0 van de Core Components is geïntroduceerd, en in dit document wordt beschreven.
In de volgende tabel staan alle ondersteunde versies van de component, de AEM versies waarmee de versies van de component compatibel zijn en koppelingen naar documentatie voor vorige versies.
Raadpleeg het document voor meer informatie over versies en releases van de Core Component Core Components-versies.
Uitvoer van voorbeeldcomponent sample-component-output
Als u de Container-component wilt ervaren en voorbeelden wilt zien van de configuratieopties en van de HTML- en JSON-uitvoer, gaat u naar de Componentbibliotheek.
Technische details technical-details
De meest recente technische documentatie over de Container Component kan op GitHub worden gevonden.
Meer informatie over het ontwikkelen van kerncomponenten vindt u in de Documentatie voor ontwikkelaars van kerncomponenten.
Dialoogvenster configureren configure-dialog
In het dialoogvenster configureren kan de auteur van de inhoud het containeritem definiëren en bepalen hoe het zich gedraagt en wordt weergegeven voor een bezoeker van de pagina.
-
Layout - Met deze optie definieert u het gedrag of het lay-outgedrag van de Container-component.
- Eenvoudig - Definieert een container als een eenvoudige verzameling componenten
- Responsief raster - Definieert een container als een Responsieve lay-out AEM
-
Achtergrondkleur - Definieerbaar als vrije-vorm RGB-waarden of met de kleurkiezer, afhankelijk van de configuratie
-
Achtergrondafbeelding - Definieert een achtergrondkleur voor de container. afhankelijk van de configuratie
-
ID - Met deze optie kunt u de unieke id van de component in de HTML en in de Gegevenslaag.
- Als deze leeg blijft, wordt automatisch een unieke id voor u gegenereerd. U kunt deze vinden door de resulterende pagina te inspecteren.
- Als een id is opgegeven, is het de verantwoordelijkheid van de auteur om ervoor te zorgen dat deze uniek is.
- Het wijzigen van de id kan gevolgen hebben voor het bijhouden van CSS-, JS- en gegevenslagen.
Ontwerpdialoogvenster design-dialog
In het ontwerpdialoogvenster kan de sjabloonauteur de opties definiëren die beschikbaar zijn voor de auteur van de inhoud die de Container-component gebruikt.
Tabblad Toegestane componenten allowed-components-tab
De Toegestane componenten wordt gebruikt om te definiëren welke componenten door de auteur van de inhoud als items aan de Container-component kunnen worden toegevoegd.
Het tabblad Toegestane componenten werkt op dezelfde manier als het tabblad met dezelfde naam wanneer het definiëren van het beleid en de eigenschappen van een container voor layout in de Sjablooneditor.
Tabblad Standaardcomponenten default-components-tab
Het tabblad Standaardcomponenten wordt gebruikt om te definiëren welke component aan de component wordt toegevoegd wanneer een bepaald elementtype op de container wordt neergezet, vergelijkbaar met hoe standaardcomponenten op de paginasjabloon worden gedefinieerd.
Tab Instellingen voor responsief responsive-settings-tab
- Kolommen - Hiermee definieert u het aantal kolommen in het raster van de resulterende container.
Tabblad Achtergrond background-tab
-
Achtergrondafbeelding
- Achtergrondafbeelding inschakelen - Selecteer deze optie als u wilt dat de auteur van de inhoud een achtergrondafbeelding voor de container kan definiëren.
-
Achtergrondkleur
- Achtergrondkleur inschakelen - Selecteer deze optie als u wilt dat de auteur van de inhoud een achtergrondkleur voor de container kan definiëren.
- Alleen stalen - Selecteer deze optie als u wilt dat de auteur van de inhoud alleen uit vooraf gedefinieerde kleurstalen voor de achtergrondkleur van de container kan kiezen.
- Alleen beschikbaar als Achtergrondkleur inschakelen is geselecteerd
-
Toegestane stalen - Vooraf gedefinieerde kleuren definiëren waaruit de auteur van de inhoud de achtergrondkleur van de container kan selecteren
- Gebruik de Toevoegen om een vooraf gedefinieerde kleurstaal toe te voegen. Nadat een item is toegevoegd, wordt het toegevoegd aan de lijst met de volgende kolommen:
- Waarde - De kleur handmatig definiëren met behulp van RGB-waarden
- Tik of klik op de kleurkiezer om een kleur eenvoudiger te selecteren door afzonderlijke RGB-waarden aan te passen of een hexadecimale waarde te definiëren.
- Verwijderen - Tik of klik om een staal te verwijderen.
- Opnieuw rangschikken - Tik of klik en sleep om de volgorde van de stalen te wijzigen.
Tabblad Stijlen styles-tab
De component Container ondersteunt de AEM Stijlsysteem.