Estilo em linha de componentes de formulário adaptáveis inline-styling-of-adaptive-form-components
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 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 apply-inline-css-properties
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
-
Selecione um componente na página e toque no botão Editar
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.
-
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)
-
Da mesma forma, é possível aplicar estilos para outras partes de um componente, como Widget, Legenda e Ajuda.
-
Toque Concluído para confirmar as alterações ou Cancelar para descartar as alterações.
Exemplo: estilos em linha para um componente de campo example-inline-styles-for-a-field-component
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.
Figura: 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.