Configurar o contêiner de layout e o modo de layout configuring-layout-container-and-layout-mode

Saiba como configurar o Contêiner de layout e o Modo de layout.

Visão geral overview

Layout Responsivo é um mecanismo para realizar o design responsivo da Web. Isso permite que o usuário crie páginas da Web com um layout e dimensões dependentes dos dispositivos que seus usuários usam.

O AEM permite um layout responsivo para suas páginas usando uma combinação de mecanismos:

Com esses mecanismos de grade responsivos, você pode:

Ativar modo de layout para o site activate-layout-mode-for-your-site

Estes procedimentos são usados para habilitar o modo Layout no site.

Configurar os pontos de interrupção configure-the-breakpoints

Pontos de interrupção:

Eles podem ser definidos usando CRXDE Lite ou XML.

Configurar pontos de interrupção usando o CRXDE Lite configuring-breakpoints-using-crxde-lite

Configurar pontos de interrupção usando XML configuring-breakpoints-using-xml

Os pontos de interrupção estão localizados dentro da seção <jcr:content> de .context.html na pasta de modelo (ou conteúdo) apropriada.

Um exemplo de definição:

<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>

Adicionar um provedor de informações responsivo add-a-responsive-information-provider

Copie a seguinte estrutura de nó cq:infoProviders no componente da página pai:

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

Ativar o redimensionamento de componentes para a página enable-component-resizing-for-the-page

Esses procedimentos são necessários para que você possa redimensionar componentes no modo Layout.

Definir contêiner de layout como parsys principal set-layout-container-as-main-parsys

Para definir o parsys principal da página para ser um contêiner de layout, defina o parsys como:

wcm/foundation/components/responsivegrid

Em:

Os dois exemplos a seguir ilustram a definição:

Incluir o CSS responsivo include-the-responsive-css

CSS para pontos de interrupção usando MENOS css-for-breakpoints-using-less

O AEM usa MENOS para gerar partes do CSS necessário, que precisam ser incluídas nos projetos.

Você também deverá criar uma biblioteca do cliente para fornecer configuração e chamadas de função adicionais. A seguinte extração MENOS é um exemplo do mínimo que você deve adicionar ao seu projeto:

@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);
  }
}

A definição da grade base pode ser encontrada em:

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

Considerações sobre estilo styling-considerations

Os componentes mantidos em um contêiner responsivo são redimensionados (juntamente com seus respectivos elementos DOM do HTML) de acordo com o tamanho da grade responsiva. Portanto, nessas circunstâncias, é recomendável evitar (ou atualizar) definições de elementos DOM de largura fixa (contidos).

Por exemplo:

Conformidade com redimensionamento e imagem adaptável resizing-and-adaptive-image-compliance

Qualquer redimensionamento de um componente na grade acionará os seguintes ouvintes, conforme apropriado:

Para redimensionar e atualizar corretamente o conteúdo de uma imagem adaptável incluída em uma grade responsiva, é necessário adicionar um conjunto afterEdit definido como ouvinte REFRESH_PAGE no arquivo EditConfig de cada componente contido.

Por exemplo:

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

O mecanismo de imagem adaptável é disponibilizado por meio de um script que controla a seleção da imagem correta para o tamanho atual da janela. Ela é ativada depois que o DOM está pronto ou ao receber um evento dedicado. Atualmente, a página deve ser atualizada para refletir corretamente o resultado da ação do usuário.

Ativar o componente de Contêiner de layout para a página enable-the-layout-container-component-for-page

Essas tarefas permitem que os autores arrastem instâncias do componente Contêiner de layout para a página.

Ativar o componente de Contêiner de layout para edição de página enable-the-layout-container-component-for-page-editing

Para permitir que os autores adicionem outras grades responsivas às páginas de conteúdo, é necessário ativar o componente Contêiner de layout para a página. Você pode fazer isso usando:

Configurar a grade do contêiner de layout configure-the-grid-of-the-layout-container

Você pode configurar o número de colunas disponíveis para cada instância específica do container de layout:

Grades Responsivas Aninhadas nested-responsive-grids

Pode haver ocasiões em que você ache necessário aninhar grades responsivas para suportar as necessidades do seu projeto. No entanto, lembre-se de que a prática recomendada pela Adobe é manter a estrutura o mais plana possível.

Quando não for possível evitar o uso de grades responsivas aninhadas, verifique se:

Isso inclui todos os containers estruturais do modelo de página.

O número da coluna do contêiner interno nunca deve ser maior que o do contêiner externo. O exemplo a seguir satisfaz essa condição. Embora o número da coluna do contêiner externo seja 8 para a tela padrão (desktop), o número da coluna do contêiner interno é 4.

container
  @layout = responsiveGrid
  cq:responsive
    default
      @offset = 0
      @width = 8
  container
  @layout = responsiveGrid
    cq:responsive
      default
        @offset = 0
        @width = 4
    text
      @text =" Text Column 1"

<div class="container responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--8 aem-GridColumn--offset--default--0">
  <div id="container-c9955c233c" class="cmp-container">
    <div class="aem-Grid aem-Grid--8 aem-Grid--default--8 ">
      <div class="container responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--offset--default--0 aem-GridColumn--default--4">
        <div id="container-8414e95866" class="cmp-container">
          <div class="aem-Grid aem-Grid--4 aem-Grid--default--4 ">
            <div class="text aem-GridColumn aem-GridColumn--default--4">
              <div data-cmp-data-layer="..." id="text-1234567890" class="cmp-text">
                <p>Text Column 1</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>