Construção de estilo para formulários adaptáveis

Pré-requisitos

Conhecimento do CSS e da estrutura LESS.

O que pode ser personalizado

O artigo lista as classes css de formulários adaptáveis disponíveis publicamente. Você pode aproveitar essas classes para criar um estilo em vários componentes de um formulário adaptável. O estilo de componentes de criação, como caixas de diálogo e barras de status que exibem avisos, está além do escopo deste artigo. Use essas construções de estilo para criar estilos (usando CSS ou Menos) somente quando não for possível criar estilo de componentes usando o editor de temas.

Personalização de estilos em formulários adaptáveis

A estrutura MENOS 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 empacotado e aumenta sua capacidade de reutilização.

Você pode personalizar estilos de formulário adaptáveis das seguintes maneiras:

  • Alterar o tema
  • Alterar o estilo do componente

Alterar tema

É 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 em que o formulário adaptável está incorporado.

As alterações na aparência geral do formulário adaptável usando propriedades de CSS normalmente fazem parte de alterações de tema. Alterações importantes no lo "ok e comportamento do formulário adaptável, como alterações no layout e no posicionamento dos componentes, não são consideradas alterações de tema.

Com base no bootstrap, o seguinte conjunto de propriedades de CSS define o tema de uma página da Web:

  • Cor do plano de fundo
  • Borda (tipo, cor, espessura)
  • Cor da fonte
  • Preenchimento
  • Imagem
  • Tamanho da Fonte
  • LineHeight

Atualmente, as variáveis MENOS são definidas apenas para essas propriedades dos vários elementos em um formulário adaptável.

Alteração do estilo do componente

Você pode fazer alterações na aparência, layout, posicionamento e 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ásica. O estilo padrão é construído do formulário adaptável e substituído pelas construções listadas no arquivo .css personalizado.

Componentes

Os componentes discutidos neste artigo têm classes CSS predefinidas. É possível 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 nos componentes e estilos que você pode modificar usando variáveis.

Estilo do contêiner

Um contêiner é o componente de nível superior. Outros painéis e campos estão no componente do contêiner.

Classe CSS

guideContainerNode

Descrição das variáveis

Descrição das variáveis

container-bgColor

Cor do plano de fundo do contêiner

container-padding

Preenchimento do contêiner

container-margin

Margem do contêiner

container-fontColor

Cor da fonte do contêiner

Estilo de campo

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 de Ajuda do campo (ponto de interrogação).

Classe CSS

guideFieldNode

Variáveis

Descrição

field-padding

Preenchimento do campo

field-error-font-color

Cor da fonte da mensagem de erro do campo

field-error-font-size

Tamanho da fonte da mensagem de erro do campo

Estilo do rótulo

O elemento HTML label usado para o campo inclui as classes left ou top, dependendo se o rótulo está na parte superior ou à esquerda.

Classe CSS

guideFieldLabel

Variáveis

Descrição

label-font-color

Cor da fonte para o rótulo do campo

label-font-size

Tamanho da fonte para o rótulo do campo

label-line-height

 Propriedade CSS line height para rótulo de campo

label-font-weight

 Propriedade de peso da fonte CSS para o rótulo do campo

label-margin

Margem para o rótulo do campo

As regras de CSS para o rótulo são aplicadas usando o rótulo guideFieldLabel. Se você for um autor, substitua essa regra para tornar suas alterações personalizadas visíveis.

Estilo de widgets

Dependendo do tipo, os widgets também incluem classes. Geralmente, os widgets incluem a classe guideFieldWidget. Os widgets fornecidos com HTML normalmente usam a entrada de elemento HTML padrão e selecionam. O estilo é feito adequadamente. Não é possível criar um estilo de widget personalizado alterando as variáveis.

Classe CSS

guideFieldWidget

Variáveis

Descrição

widgets-bg-color

 Cor do plano de fundo dos widgets (Não funciona para a caixa de seleção e o botão de opção)

widgets-border-color

Cor da borda dos widgets

widgets-border-thickness

Tamanho da borda dos widgets

widgets-border-radius

Raio da borda dos widgets

widgets-border-type

Tipo de borda dos widgets

widget-border-focus-type

Tipo de foco para bordas de widget

widgets-border

Estilo de borda consolidado de widgets

widgets-font-color

Cor do texto dentro do widget

widgets-font-size

Tamanho do texto dentro do widget

widgets-line-height

 Propriedade CSS lineheight para widget

widgets-padding

Propriedade de preenchimento CSS para o widget

widgets-focus-border-color

Cor da borda quando o widget está em foco

widgets-mandatory-border-color

Cor da borda do widget para os campos obrigatórios

widgets-mandatory-bg-color

Cor do plano de fundo do widget para os campos obrigatórios

widgets-disabled-bg-color

Cor do plano de fundo do widget quando o campo está desativado

widgets-disabled-font-color

Cor da fonte do widget quando o campo está desativado

widgets-disabled-border-color

Cor da Borda do widget quando o campo está desativado

widget-height

 Altura do widget (não funciona para a caixa de seleção e o botão de opção)

checkbutton-height

Altura para caixa de seleção e botão de opção.

listboxwidget-height

Altura máxima para uma lista suspensa de várias seleções

Limitações no estilo de widget

O estilo de campos focados, obrigatórios e desativados é restrito com o uso de variáveis. No entanto, é possível alterá-la substituindo os estilos. A restrição que usa 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

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 é incluído 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:

Variáveis

Descrição

widgets-help-long-bg-color

Cor do plano de fundo da longa Ajuda dos widgets

widgets-help-long-border-color

Cor da borda da longa Ajuda dos widgets

widgets-help-long-border-indicator-color

Cor da borda do indicador esquerdo da longa Ajuda dos widgets

widgets-help-short-bg-color

Cor do plano de fundo da Ajuda curta dos widgets

widgets-help-short-color

Cor da fonte da Ajuda curta dos widgets

widgets-help-short-tooltip-bg-color

Cor do fundo da Ajuda da dica de ferramenta curta dos widgets

widgets-help-short-tooltip-color

Cor da fonte da ajuda da dica de ferramenta curta dos widgets

Termos e condições

O widget Termos e condições (TnC ) permite que você especifique termos e condições. Você pode personalizar o widget usando as variáveis descritas na tabela a seguir.

Variáveis

Descrição
tnc-unvisited Cor da fonte do link tnc não visitado.
tnc-visited Cor da fonte do link tnc visitado.

Botão

Os botões também são widgets. No entanto, o estilo é um pouco diferente dos widgets. Em formulários adaptáveis, qualquer um dos itens a seguir constitui um botão:

  • input[type = text]
  • botão
  • elemento com class .button

Código HTML do botão:

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

Classe CSS

Descrição

iconButton-icon

Fornece ícones para o botão

iconButton-label

Rótulo/legenda do botão Estilos

Variáveis

Descrição

button-border-size

Tamanho da borda dos botões

button-border-type

Tipo de borda

button-padding

Propriedade de preenchimento CSS do botão

button-font-size

Tamanho da fonte para o botão

button-background-color

Cor do plano de fundo do botão

button-font-color

Cor da fonte do botão

button-border-color

Cor da borda do botão

button-large-padding

Preenchimento dos botões grandes (botões com classe .buttonlarge)

button-large-font-size

Tamanho da fonte para botões grandes

button-small-padding

Preenchimento dos botões pequenos (botões com classe .buttonsmall)

button-small-font-size

Tamanho da fonte para botões pequenos

button-info-background-color

Cor do plano de fundo para botões informativos (botões com classe .buttoninformative)

button-info-font-color

Cor da fonte para botões informativos

button-info-border-color

Cor da borda para botões informativos

button-warning-background-color

Cor do plano de fundo para botões com estilo de aviso (botões com classe .buttonwarning)

button-warning-font-color

Cor da fonte para botões com estilo de aviso

button-warning-border-color

Cor da borda para botões com estilo de aviso

button-alert-background-color

Cor do plano de fundo para botões de alerta (botões com classe .buttonalert)

button-alert-font-color

Cor da fonte para botões de alerta

button-alert-border-color

Cor da borda para botões de alerta

Ponto de interrogação

Para os widgets, um ponto de interrogação é exibido quando um autor adiciona uma descrição longa no conteúdo da Ajuda. O ícone padrão fornecido no bootstrap é usado. Para usar um ícone personalizado, você pode personalizar os ícones do bootstrap.

Classe CSS

guideHelpQuestionMark

Variáveis

Descrição

questionmark-font-color

Cor do ícone

questionmark-hover-font-color

Cor do ícone quando o mouse está sobre ele

Table

Você pode alterar o tema de cor para linhas de cabeçalho e de corpo em uma tabela usando as seguintes variáveis.

Variáveis

Descrição

table-header-bg-color

Cor do plano de fundo da linha de cabeçalho. O valor padrão é #333.

table-odd-row-bg-color

Cor do plano de fundo para a linha de corpo ímpar. O valor padrão é rgb(255, 255, 255).

table-even-row-bg-color

Cor do plano de fundo para a linha de corpo par. O valor padrão é #eee.

Anexo de arquivo

O widget Anexo de arquivo de formulários adaptáveis permite carregar arquivos. Também é possível personalizar o widget usando as variáveis.

Variáveis

Descrição

fileItemPadding

Preenchimento dos arquivos exibidos no widget

fileItemBackground

Cor do plano de fundo do item de arquivo

fileItemBorderColor

Cor da borda da borda superior

fileItemColor

Cor da fonte para o item de arquivo

filePreviewIconColor

Cor do ícone de Visualização (ícone de Bootstrap) no widget

fileItemCommentHeight

Altura do comentário para o item de arquivo

Há quatro tipos de guias de navegador. Isso inclui guias à esquerda, na parte superior, no assistente e na opção . Cada navegador tem uma classe diferente.

Naviagador

Classe CSS

Accordion

.acordion-navigators

tabs on the left

.tab-navigators-vertical

tabs on the top

.tab-navigators

Wizard

.wizard-navigators

Este é o código HTML para o elemento do navegador de guias (semelhante às guias do bootstrap):

<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 seletores descendente. 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 navegadores de guias de estilo (esquerda e superior) com base em se eles têm navegadores aninhados/filhos/subnavegadores.

Classe CSS

Descrição

nested_true

Navegadores de guias (à esquerda e à parte superior) com navegadores aninhados/filhos/subnavegadores

nested_false

Navegadores de guias (esquerda e superior) que não têm navegadores aninhados/filhos/subnavegadores

A classe guideNavigationIcon fornece um ícone padrão para navegadores de tabulação (esquerda e superior) e navegadores de assistente.

Classe CSS

guideNavIcon
OBSERVAÇÃO

Você pode alterar o ícone de um determinado navegador fornecendo uma classe CSS no painel em criação, no exemplo de formulário <CLASS_NAME>. Você adiciona um <CLASS_NAME>_nav para o ícone do navegador.

Variáveis

Descrição

Navegadores de guias

navigator-bg-color

Cor do plano de fundo do navegador da guia inteira

tabs-bg-color

Cor do plano de fundo da guia

tabs-font-color

Cor da fonte da guia

tabs-hover-bg-color

Cor do plano de fundo da guia ao passar o mouse

tabs-hover-font-color

Cor da fonte da guia ao passar o mouse

tabs-active-bg-color

Cor do plano de fundo quando o painel está em foco (ativo)

tabs-active-font-color

Cor da fonte quando o painel está em foco

tabs-completed-bg-color

Cor do plano de fundo quando a expressão de conclusão do painel retorna true

tabs-completed-font-color

Cor da fonte quando a expressão de conclusão do painel retorna true

tabs-stepped-bg-color

 Cor do plano de fundo quando o painel estava em foco uma vez, mas a expressão de conclusão retorna false

tabs-stepped-font-color

 Cor da fonte quando o painel está em foco uma vez, mas a expressão de conclusão retorna false

tabs-border-color

Cor da borda da guia

tabs-font-size

Tamanho da fonte da guia

tabs-padding

Preenchimento da guia

tabs-margin

Margem para a guia

tabs-vertical-margin

Margem para as guias verticais

tabs-border-thickness

Tamanho da borda das guias

tabs-min-height

Altura mínima das guias

heirarichal-indent

Recuo para as guias aninhadas

Navegadores do Assistente

wizard-navigator-bg-color

 Cor do plano de fundo para todo o navegador do assistente

wizard-tabs-bg-color

Cor do fundo do assistente

wizard-tabs-font-color

Cor da fonte do assistente

wizard-tabs-active-bg-color

Cor do plano de fundo quando o painel está em foco (ativo)

wizard-tabs-active-font-color

Cor da fonte quando o painel está em foco (focalizado)

wizard-tabs-completed-bg-color

Cor do plano de fundo quando a expressão de conclusão do painel retorna true

wizard-tabs-completed-font-color

Cor da fonte quando a expressão de conclusão do painel retorna true

wizard-tabs-stepped-bg-color

 Cor do plano de fundo quando o painel estava em foco uma vez, mas a expressão de conclusão retorna falso

wizard-tabs-stepped-font-color

Cor da fonte quando o painel é focado uma vez, mas a expressão de conclusão retorna false

wizard-tabs-border-color

Cor do assistente

wizard-tabs-font-size

Tamanho da fonte do assistente

wizard-tabs-padding

Preenchimento do assistente

wizard-tabs-border-thickness

Tamanho da borda do assistente

wizard-nav-bullet-border

Cor da borda do marcador do navegador do assistente (prefixo da legenda/rótulo)

wizard-progress-bg-color

Cor do plano de fundo da barra de progresso do navegador do assistente

wizard-progress-color

Cor de preenchimento da barra de progresso

Navegadores acordeão

accordion-tabs-padding

Preenchimento para opção de acordeão

Estilo do painel

Um Painel inclui uma barra de ferramentas opcional e seu conteúdo.

Classe CSS

guidePanelNode

Variáveis

Descrição

panel-background-color

Cor do plano de fundo do painel

panel-font-size

Tamanho da fonte para o texto do painel

panel-font-color

Cor da fonte para o texto do painel

panel-padding

Preenchimento dentro do painel

panel-description-font-size

Tamanho da fonte da descrição do painel

panel-description-padding

Preenchimento da descrição do painel

panel-help-bg-color

Cor do plano de fundo para a ajuda do painel

panel-help-border-indicator-color

Cor da borda do indicador para a ajuda do painel

O nó do painel é dividido em navegadores e conteúdo. não há um componente de estilo separado para o conteúdo. As variáveis descritas são aplicadas no navegador e também no conteúdo.

O painel mais superior (RootPanel) não tem essa classe.

Estilo móvel

Barra de cabeçalho

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 navegadores ao lado e ao verso.

Classe CSS

guide-header-bar

Variáveis

Descrição

headerbar-background-color

Cor do plano de fundo da barra de cabeçalho

headerbar-font-color

Cor da fonte do texto dentro da barra de cabeçalho

headerbar-padding

Preenchimento da barra de cabeçalho

Indicador de rolagem

Essas variáveis influenciam o indicador de Rolagem, que é uma seta laranja que aparece 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. Quando você atinge o fim do conteúdo, a seta desaparece.

Classe CSS

mobileScrollIndicator

Variáveis

Descrição

scrollIndicatorBottom

Posição fixa do indicador de rolagem na parte inferior

scrollIndicatorRight

Posição fixa do indicador de rolagem à direita

scrollIndicatorWidth

Largura do indicador de rolagem

scrollIndicatorHeight

Altura do indicador de rolagem

Variáveis específicas do layout da barra de ferramentas fixa para dispositivos móveis

Essas variáveis na tabela a seguir influenciam o layout da barra de ferramentas fixa para dispositivos móveis.

Classe CSS

mobileToolbar

Variáveis

Descrição

mobileToolbarBottom

Posição fixa da barra de ferramentas, no dispositivo móvel, na parte inferior

mobileToolbarTop

Posição fixa da barra de ferramentas, no dispositivo móvel, na parte superior

mobileToolbarLeft

Posição fixa da barra de ferramentas, no dispositivo móvel, à esquerda

mobileToolbarRight

Posição fixa da barra de ferramentas, no dispositivo móvel, à direita

mobileButtonIconTopMargin

Posição fixa do ícone dos botões da barra de ferramentas, na parte superior

mobileButtonIconWidth

Largura do ícone dos botões da barra de ferramentas no dispositivo móvel

mobileButtonIconHeight

Altura do ícone dos botões da barra de ferramentas no dispositivo móvel

mobilefixedtoolbarbgcolor

Cor do plano de fundo da barra de ferramentas no dispositivo móvel

Variável específica do tema

O tema Simple enrollment em /etc/clientlibs/fd/af/guidetheme/simpleEnrollment e a categoria guide.theme.simpleEnrollment também apresentam algumas variáveis. Se quiser criar um tema que aprimore a inscrição simples, você pode usar as seguintes "variáveis extras:

Variáveis

Descrição

button-focus-bg-color

Cor do plano de fundo do botão em foco

button-hover-bg-color

Cor do plano de fundo do botão ao passar o mouse

button-radius

Raio do botão

navigation-button-bg-color

Cor do plano de fundo para botões de navegação (voltar/próximo)

navigation-button-bg-hover-color

Cor do plano de fundo para botões de navegação (voltar/próximo) ao passar o mouse

initial-nav-color

Cor do plano de fundo para navegadores do assistente e barra de progresso correspondente, quando renderizados pela primeira vez.

active-nav-color

 Cor do plano de fundo do navegador atual / ativo do assistente e barra de progresso correspondente

visited-nav-color

Cor do plano de fundo para navegadores do assistente e barra de progresso correspondente, que foram visitados.

tabs-bifercating-border-color

Contêiner de bifurcação de cores da borda em navegadores e painéis

tabs-navigator-separator-color

Guias separadoras de cores da borda inferior para guias à esquerda (navegadores de guias).

tabs-child-nav-bg-color

Cor do plano de fundo para navegadores aninhados/filhos/subnavegadores

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now