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.
Para adicionar estilos em linha a um componente:
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 > Estilo.
Selecione um componente na página e toque no 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.
Clique em uma guia na barra lateral para especificar as propriedades de CSS. É possível especificar propriedades, como:
Da mesma forma, é possível aplicar estilos para outras partes de um componente, como Widget, Legendae Ajuda.
Toque Concluído para confirmar as alterações ou Cancelar para descartar as alterações.
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 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 |
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.
As propriedades de estilo variam de acordo com o componente selecionado.
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 .
Toque no outro componente do mesmo tipo e toque no ícone Colar para colar o estilo copiado. Também é possível tocar no ícone Limpar estilo
para limpar o estilo aplicado.
É 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:
No Estilo , toque no componente e no ícone Editar .
Selecione o estado do componente usando o Estado lista suspensa.
Defina o estilo do estado selecionado do componente e toque em 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.