Estilo em linha de componentes de formulário adaptáveis inline-styling-of-adaptive-form-components

O Adobe recomenda o uso de Componentes principaisde captura de dados moderna e extensível para criar um novo Forms Adaptávelou adicionar o Forms Adaptável às páginas do AEM Sites. Esses componentes representam um avanço significativo na criação do Forms adaptável, garantindo experiências de usuário impressionantes. Este artigo descreve a abordagem mais antiga para criar o Forms adaptável usando componentes de base.

Versão
Link do artigo
AEM as a Cloud Service
Clique aqui
AEM 6.5
Este artigo

Você pode definir a aparência geral e o estilo de um formulário adaptável especificando estilos com o editor de temas. Além disso, você pode aplicar estilos CSS em linha a componentes de formulário adaptáveis individuais e visualizar as alterações em tempo real. Os estilos embutidos substituem o estilo fornecido no tema.

Aplicar propriedades CSS em linha apply-inline-css-properties

Para adicionar estilos em linha a um componente:

  1. Abra o formulário no editor de formulários e altere o modo para o modo de estilo. Para alterar o modo para o modo de estilo, na barra de ferramentas da página, selecione tela suspensa > Estilo.

  2. Selecione um componente na página e selecione o botão de edição botão de edição . As propriedades de estilo são abertas na barra lateral.

    Você também pode selecionar componentes da árvore de hierarquia de formulários na barra lateral. A árvore de hierarquia de formulários está disponível como Objetos de formulário na barra lateral.

    Você também pode selecionar um componente na barra lateral. No modo Estilo, você pode ver os componentes listados em Objetos de formulário. No entanto, a lista Objetos de formulário na barra lateral lista componentes como campos e painéis. Campos e painéis são componentes genéricos que podem conter componentes como caixa de texto e botões de opção.

    Ao selecionar um componente na barra lateral, você verá todos os subcomponentes listados e as propriedades do componente selecionado. É possível selecionar um subcomponente específico e estilizá-lo.

  3. Clique em uma guia na barra lateral para especificar as propriedades de CSS. É possível especificar propriedades como:

    • Dimension e Posição (configuração de exibição, preenchimento, altura, largura, margem, posição, índice z, flutuação, limpar, estouro)
    • Texto (Família da fonte, peso, cor, tamanho, altura da linha e alinhamento)
    • Plano de fundo (imagem e gradiente, cor do plano de fundo)
    • Borda (largura, estilo, cor, raio)
    • Efeitos (sombra, opacidade)
    • Avançado (permite escrever CSS personalizado para o componente)
  4. Da mesma forma, é possível aplicar estilos a outras partes de um componente, como Widget, Legenda e Ajuda.

  5. Selecione Concluído para confirmar as alterações ou Cancelar para descartar as alterações.

Exemplo: estilos em linha para um componente de campo example-inline-styles-for-a-field-component

As imagens a seguir representam um campo de texto antes e depois que estilos em linha são aplicados a ele.

Componente de caixa de texto antes da aplicação do estilo embutido

Componente Caixa de texto antes de aplicar propriedades de estilo em linha

Observe a alteração no estilo da caixa de texto, como mostrado na imagem a seguir, após aplicar as seguintes propriedades CSS.

Seletor
Propriedade CSS
Valor
Efeito
Texto
borda

Largura da borda =2px

Estilo da borda=Sólido

Cor da borda=#1111

Cria uma borda preta com 2 px de largura em torno do campo
Caixa de texto
background-color
#6495ED

Altera a cor de fundo para CornflowerBlue (#6495ED)

Observação: você pode especificar um nome de cor ou seu código hexadecimal no campo de valor.

Rótulo
Dimensões e posição > largura
100px
Corrige a largura como 100px para o rótulo
Ícone da ajuda do campo
Texto > Cor da fonte
#2ECC40
Altera a cor da face do ícone de ajuda.
Descrição longa
text-align
centro
Alinha a descrição longa da ajuda para centralizar

Estilo da caixa de texto após a aplicação do estilo incorporado

Componente Caixa de texto após aplicar propriedades de estilo em linha

Seguindo as etapas acima, você pode selecionar e estilizar outros componentes, como painéis, botões de envio e botões de opção.

NOTE
As propriedades de estilo variam de acordo com o componente selecionado.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2