Componente separador em formulários adaptáveis separator-component-in-adaptive-forms
O Adobe recomenda o uso da captura de dados moderna e extensível Componentes principaispara criação de um novo Forms adaptávelou adição de Forms adaptável às páginas do AEM Sites. Esses componentes representam um avanço significativo na criação do Forms adaptável, garantindo experiências de usuário impressionantes. Este artigo descreve uma abordagem mais antiga para a criação do Forms adaptável usando componentes de base.
Você pode usar o componente separador para segregar visualmente os painéis de um formulário. Você pode definir a aparência geral e o estilo de um componente separador especificando as seguintes propriedades do componente separador:
-
Nome do elemento: Especifica o nome do componente. As expressões SOM endereçam o componente com um valor especificado no campo Nome do elemento.
-
Espessura: Especifica a espessura do componente separador em pixels.
-
Classe CSS: Especifica a classe CSS personalizada para o componente separador
-
Estilos em linha: Com o AEM Forms, agora é possível aplicar estilos CSS em linha a componentes de formulário adaptáveis individuais e visualizar as alterações em tempo real.
Você pode usar o modo Layout para definir o número de colunas ao qual o componente separador se estende. Para obter mais informações, consulte Usar o modo Layout para redimensionar componentes.
Para especificar as propriedades de um componente separador:
- Selecione um componente separador e selecione
- Clique em uma guia na seção Propriedades CSS em linha para especificar propriedades CSS. Por exemplo: a. Na guia Campo, clique em Adicionar item. Uma linha com dois campos é adicionada.
- No primeiro campo à esquerda, especifique uma propriedade CSS3 que deseja aplicar. Por exemplo, borda. Você também pode selecionar uma propriedade clicando no botão de seta para baixo. A lista suspensa não é exaustiva e você pode especificar qualquer nome de propriedade CSS3 compatível nesse campo.
- No campo adjacente, especifique um valor válido para a propriedade CSS3 especificada. Por exemplo, 3 px preto sólido.
- Clique em Adicionar item para especificar outra propriedade e seu valor.
- Clique em Visualizar para que você possa visualizar as alterações no formulário.
- Clique em OK se desejar confirmar as alterações ou Cancelar para sair da caixa de diálogo sem alterações.