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.
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:
-
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
-
Selecione um componente na página e selecione o botão de edição
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.
-
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)
-
Da mesma forma, é possível aplicar estilos a outras partes de um componente, como Widget, Legenda e Ajuda.
-
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 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.
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.