Puntos de interrupción interactivos

Aprenda a configurar nuevos puntos de interrupción adaptables para el editor de páginas adaptable de AEM.

Crear puntos de interrupción CSS

En primer lugar, cree puntos de interrupción de medios en la cuadrícula adaptable CSS de AEM a la que se adhiere el sitio de AEM adaptable.

En el archivo /ui.apps/src/main/content/jcr_root/apps/[app name]/clientlibs/clientlib-grid/less/grid.less, cree los puntos de interrupción para usarlos junto con el emulador móvil. Tome nota de max-width para cada punto de interrupción, ya que asigna los puntos de interrupción CSS a los puntos de interrupción del editor de páginas adaptable de AEM.

Personalizar los puntos de interrupción de la plantilla

Abra el archivo ui.content/src/main/content/jcr_root/conf/<app name>/settings/wcm/templates/page-content/structure/.content.xml y actualice cq:responsive/breakpoints con las nuevas definiciones de nodo de punto de interrupción. Cada punto de interrupción CSS debe tener un nodo correspondiente en breakpoints con su propiedad width establecida en max-width del punto de interrupción CSS.

Creación de emuladores

Se deben definir emuladores de AEM que permitan a los autores seleccionar la vista adaptable para editarla en el Editor de páginas.

Crear nodos de emuladores en /ui.apps/src/main/content/jcr_root/apps/<app name>/emulators

Por ejemplo, /ui.apps/src/main/content/jcr_root/apps/wknd-examples/emulators/phone-landscape. Copie un nodo de emulador de referencia de /libs/wcm/mobile/components/emulators en CRXDE Lite y actualice la copia para acelerar la definición del nodo.