Pontos de interrupção responsivos
Saiba como configurar novos pontos de interrupção responsivos para o Editor de página responsivo para AEM.
Criar pontos de interrupção de CSS
Primeiro, crie pontos de interrupção de mídia no CSS da Grade responsiva AEM que o site AEM responsivo segue.
No arquivo /ui.apps/src/main/content/jcr_root/apps/[app name]/clientlibs/clientlib-grid/less/grid.less
, crie seus pontos de interrupção para serem usados junto com o emulador móvel. Anote o max-width
para cada ponto de interrupção, pois isso mapeia os pontos de interrupção de CSS para os pontos de interrupção responsivos do Editor de página do AEM.
Personalizar os pontos de interrupção do modelo
Abra o arquivo ui.content/src/main/content/jcr_root/conf/<app name>/settings/wcm/templates/page-content/structure/.content.xml
e atualize cq:responsive/breakpoints
com suas novas definições de nó de ponto de interrupção. Cada ponto de interrupção de CSS deve ter um nó correspondente em breakpoints
com sua propriedade width
definida como max-width
do ponto de interrupção de CSS.
Criar emuladores
Os emuladores de AEM devem ser definidos para permitir que os autores selecionem a visualização responsiva a ser editada no Editor de páginas.
Criar nós de emuladores em /ui.apps/src/main/content/jcr_root/apps/<app name>/emulators
Por exemplo, /ui.apps/src/main/content/jcr_root/apps/wknd-examples/emulators/phone-landscape
. Copie um nó do emulador de referência de /libs/wcm/mobile/components/emulators
em CRXDE Lite para e atualize a cópia para expedir a definição do nó.
Criar grupo de dispositivos
Agrupar os emuladores para disponibilizá-los no Editor de Páginas AEM.
Crie a estrutura do nó /apps/settings/mobile/groups/<name of device group>
em /ui.apps/src/main/content/jcr_root
.
Crie um arquivo .content.xml
em /apps/settings/mobile/groups/<device group name>
e defina
os novos emuladores usando um código semelhante ao abaixo:
Atualizar o grupo de dispositivos do modelo
Por fim, mapeie o grupo de dispositivos de volta ao modelo de página para que os emuladores estejam disponíveis no Editor de páginas para páginas criadas com base nesse modelo.
Abra o arquivo ui.content/src/main/content/jcr_root/conf/[app name]/settings/wcm/templates/page-content/structure/.content.xml
e atualize a propriedade cq:deviceGroups
para fazer referência ao novo grupo móvel (por exemplo, cq:deviceGroups="[mobile/groups/customdevices]"
)