Estilo em linha dos componentes do formulário adaptável inline-styling-of-adaptive-form-components
O Adobe recomenda o uso da captura de dados moderna e extensível Componentes principaispara criação de um novo Forms adaptávelou adição de 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 usando editor de tema. 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 > Estilo.
-
Selecione um componente na página e clique no botão editar . 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.
No 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)
- Histórico (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.
-
Selecionar 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 Estilo , selecione o componente e selecione o ícone Copiar .
Selecione o outro componente do mesmo tipo e selecione o ícone Colar para colar o estilo copiado. Também é possível selecionar o ícone Limpar estilo para limpar o estilo aplicado.
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, Hover, Erro, Sucesso, e Obrigatório.
Para definir o estilo para o estado de um componente:
-
No Estilo , selecione o componente e selecione o ícone Editar .
-
Selecione o estado do componente usando a variável Estado lista suspensa.
-
Defina o estilo para o estado selecionado do componente e selecione para salvar as propriedades.
Também é possível simular os estados de sucesso e erro. Selecione o ícone Expandir para exibir a Simular o sucesso e Simular Erro opções.
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 de 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