Estilo em linha dos componentes do formulário adaptável 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 individuais do Formulário adaptável 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.
No modo Style, é possível 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 (Exibir configuração, preenchimento, altura, largura, margem, posição, índice z, flutuante, 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 gravar CSS personalizado para o componente)
-
Da mesma forma, você pode aplicar estilos a outras partes de um componente, como o 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.
Copiar e colar estilos copy-paste-styles
Também é possível copiar e colar um estilo de um componente para outro em um Formulário adaptável. No modo Estilo, selecione o componente e o ícone Copiar
Selecione o outro componente do mesmo tipo e selecione o ícone Colar
Definir estilos para diferentes estados de um componente set-styles-for-states
É possível definir estilos para diferentes estados de um tipo de componente. Os diferentes estados incluem: Foco, Desabilitado, Foco, Erro, Sucesso e Obrigatório.
Para definir o estilo para o estado de um componente:
-
No modo Estilo, selecione o componente e o ícone Editar
-
Selecione o estado do componente usando a lista suspensa Estado.
-
Defina o estilo para o estado selecionado do componente e selecione
Também é possível simular os estados de sucesso e erro. Selecione o ícone Expandir para exibir as opções Simular Êxito e Simular Erro.
Consulte também see-also
- Criar um formulário adaptável de AEM
- Adicionar um formulário adaptável de AEM à página do AEM Sites
- Aplicar temas a um formulário adaptável de AEM
- Adicionar componentes a um Formulário adaptável para AEM
- Usar CAPTCHA em um formulário adaptável de AEM
- Gerar versão do PDF (DoR) de um formulário adaptável AEM
- Traduzir um formulário adaptável de AEM
- Ativar o Adobe Analytics para um formulário adaptável para rastrear o uso do formulário
- Conectar o formulário adaptável ao Microsoft SharePoint
- Conectar o formulário adaptável ao Microsoft Power Automate
- Conectar o formulário adaptável ao Microsoft OneDrive
- Conectar o formulário adaptável ao armazenamento de blobs do Microsoft Azure
- Conectar o formulário adaptável ao Salesforce
- Usar o Adobe Sign em um formulário adaptável AEM
- Adicionar uma nova localidade para um Formulário adaptável
- Enviar dados do Formulário adaptável a um banco de dados
- Enviar dados do formulário adaptável para um endpoint REST
- Enviar dados do formulário adaptável para o fluxo de trabalho do AEM
- Usar o Forms Portal para listar AEM Adaptive Forms em um site de AEM
- Adicionar versões, comentários e anotações a um Formulário adaptável
- Comparar Forms adaptável