Estilo em linha de componentes de formulário adaptáveis inline-styling-of-adaptive-form-components

CAUTION
AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.

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:

  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.

    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 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 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
centro
Alinha a descrição longa para a ajuda do centro

Estilo da caixa de texto após a aplicação do estilo em linha
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.

NOTE
As propriedades de estilo variam de acordo com o componente selecionado.
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da