Show Menu
TÓPICOS×

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

É possível definir a aparência geral e o estilo de um formulário adaptável especificando estilos usando o editor de temas. Além disso, é possível aplicar estilos CSS em linha a componentes de formulário adaptáveis individuais e visualizar 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 > Estilo .
  2. Selecione um componente na página e toque no botão editar, botão . 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:
    • Dimensões 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 em Cancelar para descartar 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 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 2x 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
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
center
Alinha a descrição longa da ajuda ao centro
Estilo da caixa de texto depois que o estilo incorporado é aplicado ​Figura: componente de caixa de texto após a aplicação de propriedades de estilo em linha
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.
As propriedades de estilo variam com base no componente selecionado.