Estilo em linha dos componentes do formulário adaptável

Você pode definir a aparência e o estilo gerais de um formulário adaptável especificando estilos usando 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 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 lista suspensa de tela > Estilo.

  2. Selecione um componente na página e toque no botão Editar botão editar. 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.

    No Estilo , é possível ver 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 de fontes, peso, cor, tamanho, altura da linha e alinhamento)
    • Histórico (Imagem e gradiente, cor 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, Legendae Ajuda.

  5. Toque Concluído para confirmar as alterações ou 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 em preto 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

Dimension & 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.

Copiar e colar estilos

Também é possível copiar e colar um estilo de um componente para outro componente em um formulário adaptável. No Estilo , toque no componente e no ícone Copiar Copiar.

Toque no outro componente do mesmo tipo e toque no ícone Colar Copiar para colar o estilo copiado. Também é possível tocar no ícone Limpar estilo Copiar para limpar o estilo aplicado.

Definir estilos para diferentes estados de um componente

É possível definir estilos para diferentes estados de um tipo de componente. Os diferentes estados incluem: Foco, Desabilitado, Hover, Erro, Sucessoe Obrigatório.

Para definir o estilo de um estado de um componente:

  1. No Estilo , toque no componente e no ícone Editar Editar.

  2. Selecione o estado do componente usando o Estado lista suspensa.

    Selecionar estado

  3. Defina o estilo do estado selecionado do componente e toque em Salvar para salvar as propriedades.

Também é possível simular os estados de sucesso e erro. Toque no ícone Expandir para exibir o Simular sucesso e Erro Simular opções.

Simular estados

Nesta página