Container en lay-outmodus configureren configuring-layout-container-and-layout-mode

Responsieve Lay-outis een mechanisme om ontvankelijk Webontwerpte realiseren. Hierdoor kan de gebruiker webpagina's maken met een indeling en afmetingen die afhankelijk zijn van de apparaten die de gebruikers gebruiken.

AEM realiseert responsieve lay-out voor uw pagina's gebruikend een combinatie mechanismen:

Met deze responsieve rastermechanismen kunt u:

De responsieve emulator configureren configuring-the-responsive-emulator

Deze taak laat u de ontvankelijke Mededinger op uw plaats zien.

Uw pagina-componenten registreren voor emulatie register-your-page-components-for-emulation

Als u wilt dat de emulator uw pagina's ondersteunt, moet u de paginacomponenten registreren. Zie Registrerend de Componenten van de Pagina voor Simulatie.

Apparaatgroepen opgeven specify-the-device-groups

Om de apparatengroepen te specificeren die in de lijst van Apparaten van de mededinger verschijnen zie specificerend de Groepen van het Apparaat.

Uw site koppelen aan de opgegeven apparaatgroepen link-your-site-to-the-specified-device-groups

Als u de emulator wilt opnemen, koppelt u uw site aan de apparaatgroepen. Zie Toevoegend de Lijst van Apparaten(voor zowel klassieke als aanraking-geoptimaliseerde UI).

Lay-outmodus voor uw site activeren activate-layout-mode-for-your-site

Deze procedures worden gebruikt om de wijze van de Lay-out op uw plaats toe te laten.

De onderbrekingspunten configureren configure-the-breakpoints

Onderbrekingspunten:

Ze kunnen worden gedefinieerd met behulp van CRXDE Lite of XML.

Onderbrekingspunten configureren met CRXDE Lite configuring-breakpoints-using-crxde-lite

Onderbrekingspunten configureren met XML configuring-breakpoints-using-xml

Onderbrekingspunten bevinden zich in de <jcr:content> -sectie van .context.html onder de toepasselijke sjabloonmap (of inhoudsmap).

Een voorbeelddefinitie:

<cq:responsive jcr:primaryType="nt:unstructured">
  <breakpoints jcr:primaryType="nt:unstructured">
    <phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
    <tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
  </breakpoints>
</cq:responsive>

Een provider van responsieve informatie toevoegen add-a-responsive-information-provider

Kopieer de volgende cq:infoProviders nodestructuur naar de bovenliggende pagina-component:

/libs/foundation/components/page/cq:infoProviders/responsive

Component resizing voor de pagina inschakelen enable-component-resizing-for-the-page

Deze procedures worden vereist zodat kunt u componenten op de wijze van de Lay-out resize.

De container van de Lay-out instellen als HoofdParsys set-layout-container-as-main-parsys

Om hoofdparsys van uw pagina te plaatsen om een lay-outcontainer te zijn, bepaal parsys als:

wcm/foundation/components/responsivegrid

In één van beide:

De volgende twee voorbeelden illustreren de definitie:

Inclusief de responsieve CSS include-the-responsive-css

CSS voor onderbrekingspunten die MINDER gebruiken css-for-breakpoints-using-less

AEM gebruikt LESS om delen van noodzakelijke CSS te produceren, moeten deze voor uw projecten worden omvat.

U zult ook a cliëntbibliotheekmoeten creëren om extra configuratie en functievraag te verstrekken. Het volgende LESS extract is een voorbeeld van het minimum dat u aan uw project moet toevoegen:

@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";

/* maximum amount of grid cells to be provided */
@max_col: 12;

/* default breakpoint */
.aem-Grid {
  .generate-grid(default, @max_col);
}

/* phone breakpoint */
@media (max-width: 768px) {
  .aem-Grid {
    .generate-grid(phone, @max_col);
  }
}

/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
  .aem-Grid {
    .generate-grid(tablet, @max_col);
  }
}

De definitie van het basisraster is te vinden onder:

/libs/wcm/foundation/clientlibs/grid/grid_base.less

Overwegingen bij opmaken styling-considerations

Componenten die in een responsieve container worden vastgehouden, worden vergroot of verkleind (samen met hun respectievelijke HTML DOM-elementen) op basis van de responsieve rastergrootte. Daarom wordt in deze omstandigheden aanbevolen definities van DOM-elementen met een vaste breedte (bevat) te vermijden (of bij te werken).

Bijvoorbeeld:

Compatibiliteit van afbeeldingen vergroten/verkleinen en aanpassen resizing-and-adaptive-image-compliance

Als u de grootte van een component in het raster wijzigt, worden de volgende listeners geactiveerd, indien van toepassing:

Als u de inhoud van een adaptieve afbeelding in een responsief raster op de juiste wijze wilt vergroten of verkleinen en bijwerken, moet u een afterEdit set to REFRESH_PAGE listener toevoegen aan het EditConfig -bestand van elke component in de component.

Bijvoorbeeld:

<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />

Het mechanisme voor adaptieve afbeeldingen is beschikbaar via een script dat de selectie van de juiste afbeelding voor de huidige grootte van het venster bepaalt. De gebeurtenis wordt geactiveerd nadat de DOM gereed is of wanneer een specifieke gebeurtenis wordt ontvangen. De pagina moet momenteel worden vernieuwd om het resultaat van de actie van de gebruiker correct weer te geven.

De Containercomponent voor lay-out inschakelen voor pagina enable-the-layout-container-component-for-page

Deze taken staan auteurs toe om instanties van de component van de Container van de Lay-out op de pagina te slepen.

De Containercomponent voor lay-out inschakelen voor paginabewerking enable-the-layout-container-component-for-page-editing

Auteurs kunnen meer responsieve rasters toevoegen aan de inhoudspagina's als u de component Layout Container voor uw pagina wilt inschakelen. U kunt dit doen door:

Het raster van de container van de layout configureren configure-the-grid-of-the-layout-container

U kunt het aantal beschikbare kolommen voor elke specifieke instantie van lay-outcontainer vormen: