Construtores de estilo para formulários adaptáveis styling-constructs-for-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 a abordagem mais antiga para criar o Forms adaptável usando componentes de base.
Pré-requisitos prerequisites
Conhecimento de CSS e da estrutura LESS.
O que pode ser personalizado what-can-be-customized
O artigo lista classes css de formulários adaptáveis disponíveis publicamente. Você pode usar essas classes para estilizar vários componentes de um formulário adaptável. O estilo dos componentes de criação, como caixas de diálogo e barras de status que exibem avisos, está fora do escopo deste artigo. Use essas construções de estilo para criar estilos (usando CSS ou Menos) somente quando não for possível estilizar componentes usando editor de tema.
Personalização de estilos em formulários adaptáveis customizing-styles-in-adaptive-forms
A estrutura LESS simplifica o caso de uso para personalizar estilos em formulários adaptáveis. A estrutura permite definir estilos usando um conjunto de variáveis e funções (mixins). A estrutura LESS ajuda a reduzir o tamanho do código incorporado e aumenta sua reutilização.
É possível personalizar estilos de formulário adaptável das seguintes maneiras:
- Alterar o tema
- Alterar estilo do componente
Alteração de tema changing-theme
É possível alterar o tema de um formulário adaptável para garantir que sua aparência seja consistente com as páginas da Web nas quais o formulário adaptável está incorporado.
As alterações na aparência geral do formulário adaptável usando propriedades CSS normalmente fazem parte das alterações de tema. Alterações importantes no registro "ok e sentir" do formulário adaptável, como alterações no layout e na colocação dos componentes, não são consideradas alterações de tema.
Com base na inicialização, o seguinte conjunto de propriedades CSS define o tema de uma página da Web:
- Cor do plano de fundo
- Borda (tipo, cor, espessura)
- Cor da Fonte
- Preenchimento
- Margem
- Tamanho da Fonte
- AlturaDaLinha
Atualmente, as variáveis LESS são definidas apenas para essas propriedades dos vários elementos em um formulário adaptável.
Alteração do estilo do componente changing-component-style
É possível alterar a aparência, o layout, o posicionamento e a visibilidade dos elementos. Para realizar essa tarefa, crie ou atualize seus arquivos .css personalizados para incluir as construções de estilo listadas neste artigo.
Para aplicar um estilo a um formulário adaptável, abra o formulário adaptável no para edição, abra as propriedades do contêiner de formulário adaptável e especifique o caminho do Arquivo CSS personalizado na guia básico. Construtores de estilo padrão do formulário adaptável e substituídos pelas construções listadas no arquivo .css personalizado.
Componentes components
Os componentes discutidos neste artigo têm suas classes CSS predefinidas. Você pode editar as variáveis para modificar os estilos nas classes CSS. Como alternativa, você pode reescrever a classe inteira. Esta seção descreve as classes em componentes e estilos que você pode modificar usando variáveis.
Estilo do contêiner container-styling
Um contêiner é o componente de nível superior. Outros painéis e campos estão abaixo do componente de contêiner.
Estilo do campo field-styling
Os formulários adaptáveis incluem vários tipos de campos. Cada campo tem um nome de classe exclusivo, que é o nome do campo. O campo também tem um nome de classe comum guideFieldNode.
Os campos incluem rótulos, widgets, descrição da Ajuda (descrição longa e curta) e ícones da Ajuda do campo (ponto de interrogação).
Estilo do rótulo label-styling
O elemento HTML rótulo usado para o campo inclui as classes left ou top dependendo se o rótulo está na parte superior ou à esquerda.
As regras CSS para o rótulo são aplicadas usando o guideFieldLabel rótulo. Se você for um autor, substitua essa regra para tornar visíveis as alterações personalizadas.
Estilo dos widgets widgets-styling
Dependendo do tipo, os widgets também incluem classes. Geralmente, os widgets incluem o guideFieldWidget classe. Os widgets enviados com o HTML normalmente usam a entrada de elemento de HTML padrão e selecionam. O estilo é feito de acordo. Não é possível estilizar um widget personalizado alterando as variáveis.
Limitações no estilo de widget limitations-in-widget-styling
O estilo de campos focalizados, obrigatórios e desativados é restrito usando variáveis. No entanto, é possível alterá-la substituindo os estilos. A restrição usando variáveis é fornecida principalmente para manter o número de variáveis sob controle. A restrição pode ser relaxada se a aparência de um campo mudar drasticamente porque está em qualquer um dos estados discutidos anteriormente.
Descrição da ajuda help-description
Um autor pode especificar o conteúdo da Ajuda nos campos usando componentes de descrição Curta e Longa. Ambos os componentes têm uma classe comum .guideHelpDescription e outra classe .long/ .short, dependendo do tipo de descrição. O conteúdo da Ajuda está delimitado em um elemento de parágrafo para substituir o estilo da descrição. A descrição da Ajuda (longa e curta) é modificada usando variáveis que começam com widgetshelp, como mencionado na tabela a seguir:
Termos e condições terms-and-conditions
Os Termos e Condições (TnC ``) permite especificar termos e condições. Você pode personalizar o widget usando as variáveis descritas na tabela a seguir.
Botão button
Os botões também são widgets. No entanto, seu estilo é um pouco diferente dos widgets. Nos formulários adaptáveis, qualquer uma das seguintes opções constitui um botão:
- entrada[tipo = texto]
- botão
- elemento com class .button
Código HTML do botão:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
Ponto de interrogação question-mark
Para os widgets, um questionMark é exibido quando um autor adiciona uma descrição longa no conteúdo da Ajuda. O ícone padrão fornecido na inicialização é usado. Para usar um ícone personalizado, é possível personalizar os ícones de inicialização.
Tabela table
Você pode alterar o tema de cores das linhas de cabeçalho e corpo em uma tabela usando as variáveis a seguir.
Anexo de arquivo file-attachment
O widget Anexo de arquivo de formulários adaptáveis permite fazer upload de arquivos. Você também pode personalizar o widget usando as variáveis.
Estilos do Navegador navigator-styles
Há quatro tipos de guias do navegador. Isso inclui guias à esquerda, na parte superior, no assistente e na opção. Cada navegador tem uma classe diferente.
O código de HTML a seguir para o elemento tab navigator é (semelhante às guias de inicialização):
<li>
<a>tab title</a>
</li>
Accordion navigator is an exception, it has following barebone
structure:
<div class="accordion.navigators">
<div>
<div class = "guideHeader">
<a>
<span class = "guideSummary" ></code>
........................... repeatable buttons, if the repeatable configuration is set ................................
<div class = "repeatableButtons">
<button name="Add" class="Add"/>
<button name="Remove" class="Remove"/>
</div>
</a>
</div>
................................ panel content ..................................
</div>
</div>
Você pode alterar o estilo do navegador usando regras CSS que selecionam os elementos usando descendente seletores. Por exemplo, para adicionar um estilo de decoração de texto à tag de âncora:
Navegador de guias na parte superior:
.tab-navigators
li a {
text-decoration:
underline;
}
Tab navigator on left:
.tab-navigators-vertical
li a {
text-decoration:
underline;
}
Accordion navigator:
.accordion-navigators .guideHeader a .guideSummary {
text-decoration:
underline;
}
Wizard navigator:
.wizard-navigators
li a {
text-decoration:
underline;
}
Além disso, há classes para estilizar os navegadores de guia (à esquerda e na parte superior) com base no fato de eles terem navegadores aninhados/secundários/secundários.
A classe guideNavIcon fornece um ícone padrão para os navegadores de guia (à esquerda e acima) e os navegadores do assistente.
Estilo do painel panel-styling
Um Painel inclui uma barra de ferramentas opcional e seu conteúdo.
O nó do painel é dividido em navegadores e conteúdo. Há ``não é um componente de estilo separado para o conteúdo. As variáveis descritas são aplicadas no navegador e no conteúdo.
O painel mais acima (RootPanel) não tem essa classe.
Estilo móvel mobile-styling
Barra de cabeçalho header-bar
Essas variáveis influenciam a barra de cabeçalho visível em um dispositivo móvel ou em dispositivos de tela pequena que contêm o título do painel e os navegadores próximo e posterior.
Indicador de rolagem scroll-indicator
Essas variáveis influenciam o indicador de rolagem, que é uma seta laranja exibida em um dispositivo móvel ou em dispositivos de tela pequena. Um indicador de Rolagem indica que há conteúdo além da parte visível da tela. Você pode rolar para baixo para vê-lo. Ao atingir o fim do conteúdo, a seta desaparece.
Variáveis específicas do layout da barra de ferramentas fixa para dispositivos móveis mobile-fixed-toolbar-layout-specific-variables
Essas variáveis na tabela a seguir influenciam o layout da barra de ferramentas fixa móvel.
Variável específica do tema theme-specific-variable
A variável Inscrição simples theme em /etc/clientlibs/fd/af/guidetheme/simpleEnrollment e a categoria guide.theme.simpleEnrollment também introduzem algumas variáveis. Se você quiser criar um tema que melhore a inscrição simples, poderá usar as seguintes "variáveis adicionais: