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

Você pode definir a aparência e o estilo gerais de um formulário adaptável especificando estilos usando 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 dinamicamente. Os estilos em linha substituem o estilo fornecido no tema.

Aplicar propriedades CSS em linha

Para adicionar estilos em linha a um componente:

  1. Abra o formulário no editor de formulário 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, toque em tela suspensa > Estilo.

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

    Você também pode 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. 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. Você pode selecionar um subcomponente específico e estilizá-lo.

  3. Clique em uma guia na barra lateral para especificar as propriedades de CSS. É possível especificar propriedades, como:

    • Dimension & Posição (Configuração de exibição, preenchimento, altura, largura, margem, posição, índice z, flutuante, limpar, 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, é possível 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 em linha para um componente de campo

As imagens a seguir representam um campo de texto antes e depois da aplicação dos estilos em linha.

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

Componente de caixa de texto antes de aplicar as 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 da borda=Sólido

Cor da borda=#1111

Cria uma borda larga de 2px preta em torno 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 para a ajuda do centro

Estilo da caixa de texto após a aplicação do estilo em linha

Componente de caixa de texto após aplicar as propriedades de estilo em linha

Após as etapas acima, você pode selecionar e criar um estilo para outros componentes, como painéis, botões Enviar e botões de opção.

OBSERVAÇÃO

As propriedades de estilo variam de acordo com o componente selecionado.

Nesta página