Construção de estilo para formulários adaptáveis styling-constructs-for-adaptive-forms

Pré-requisitos prerequisites

Conhecimento do CSS e da estrutura LESS.

O que pode ser personalizado what-can-be-customized

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 editor de temas.

Personalização de estilos em formulários adaptáveis customizing-styles-in-adaptive-forms

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 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 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:

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 changing-component-style

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 components

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 container-styling

Um contêiner é o componente de nível superior. Outros painéis e campos estão no componente do 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 de Ajuda do campo (ponto de interrogação).

Estilo do rótulo label-styling

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.

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

Estilo de widgets widgets-styling

Dependendo do tipo, os widgets também incluem classes. Geralmente, os widgets incluem o guideFieldWidget classe . Os widgets fornecidos com o 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.

Limitações no estilo de widgets limitations-in-widget-styling

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 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 é 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:

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, o estilo é um pouco diferente dos widgets. Em formulários adaptáveis, qualquer um dos itens a seguir constitui um botão:

Código de HTML para botão:

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

Ponto de interrogação question-mark

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.

Tabela table

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

Anexo de arquivo file-attachment

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

Estilos do Navegador navigator-styles

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.

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

<li>

tab title

</li>

Accordion navigator is an exception, it has following barebone

structure:

<div class="accordion.navigators">

<div>

<div class = "guideHeader">

<a>

<span class = "guideSummary" ></span>

........................... 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 de 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 navegadores de guias de estilo (esquerda e superior) com base em se eles 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.

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. Lá ``não é um componente de estilo separado para o conteúdo. As variáveis descritas são aplicadas no navegador e também no conteúdo.

&Último;O painel mais superior (RootPanel) não tem esta 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 navegadores ao lado e ao verso.

Indicador de rolagem scroll-indicator

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.

Variáveis específicas de layout de 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 para dispositivos móveis.