Estilo em linha de componentes de formulário adaptáveis

Você pode definir a aparência geral e o estilo de um formulário adaptável especificando estilos usando editor de temas. Além disso, é possível aplicar estilos CSS em linha a componentes de formulário adaptáveis individuais e pré-visualização as alterações dinamicamente. Os estilos incorporados substituem o estilo fornecido no tema.

Aplicar propriedades CSS em linha

Para adicionar estilos incorporados a um componente:

  1. Abra o formulário no editor de formulários e altere o modo para o modo de estilização. Para alterar o modo para o modo de estilização, na barra de ferramentas da página, toque em menu suspenso da tela > Estilo.

  2. Selecione um componente na página e toque no botão de edição edit-button. As propriedades de estilo são abertas na barra lateral.

    Também é possível selecionar componentes da árvore de hierarquia do formulário na barra lateral. A árvore da hierarquia do formulário está disponível como Objetos de formulário na barra lateral.

    Você também pode selecionar um componente na barra lateral. No modo Estilo, é possível ver os componentes listados em Objetos de formulário. Entretanto, 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. Você pode selecionar um subcomponente específico e estilizá-lo.

  3. Clique em uma guia na barra lateral para especificar as propriedades CSS. Você pode especificar propriedades como:

    • Dimension e posição (configuração de exibição, preenchimento, altura, largura, margem, posição, índice z, flutuante, claro, sobrefluxo)
    • 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)
  4. Da mesma forma, você pode aplicar estilos para outras partes de um componente, como Widget, Legenda e Ajuda.

  5. Toque em Concluído para confirmar as alterações ou Cancelar para eliminar as alterações.

Exemplo: estilos incorporados para um componente de campo

As imagens a seguir representam um campo de texto antes e depois da aplicação de estilos incorporados a ele.

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

Componente da 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 de CSS.

Seletor

Propriedade CSS

Valor

Efeito

Texto

border

Largura da borda = 2px

Estilo de borda=Sólido

Cor da borda=#1111

Cria uma borda preta com largura de 2 px ao redor do campo

Caixa de texto

background-color

#6495ED

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

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

Etiqueta

Dimensões e posição > largura

100 px

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

center

Alinha a descrição longa da ajuda ao centro

Estilo de caixa de texto depois que o estilo incorporado é
aplicadoFigura:componente de caixa de texto depois de aplicar propriedades de estilo embutido

Siga as etapas acima para selecionar e criar um estilo para outros componentes, como painéis, botões de envio e botões de opção.

OBSERVAÇÃO

As propriedades de estilo variam com base no componente selecionado.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free