Sobre Temas de Estilo

Os temas têm uma função de Visualização, onde você pode obter uma representação visual rápida de exatamente como as diferentes telas e painéis em App Builder ficará com o Tema selecionado aplicado. Este guia descreve a implementação atual de Temas.

Visão Geral

App Builder permite a personalização de como um aplicativo aparece visualmente na Camada de Aplicação por meio do aproveitamento de Temas de Estilo. Em App Builder, Os temas são pares definidos de Componentes e Tipos de Valor que permitem que você controle a aparência de áreas definidas da UI e UX da Camada de Aplicativo. Um Componente aqui representa uma área na UI da Camada de Aplicativo que pode ter suas propriedades alteradas, por exemplo, Página é um Componente. Os Tipos de Valor representam as propriedades específicas que podem ser alteradas ou definidas, por exemplo, Cor de fundo é um Tipo de Valor.

Por exemplo: Defina a Cor de fundo [Value type] dos Links [Interface] para ser roxo.

Vários Temas Base predefinidos são enviados com App Builder que pode ser facilmente usado pelo seu aplicativo como está, ou aproveitado como um Tema Base que você pode personalizar ainda mais. Além disso, as seguintes opções estão disponíveis por meio de Temas:

• Os tipos de configuração de tema estão disponíveis para configurar Alinhamento, Espaçamento e Transições CSS
• As seguintes novas áreas de Páginas de App Builder são expostos para serem personalizados via Temas:
  • Gráfico, Mapa e Calendário Áreas imobiliárias
  • Margem de bloco em Quadros/Faixas, Centralização de bloco em um Painel
  • Conjuntos de controle de painel de várias linhas, cabeçalhos e células (permitindo linhas MRP maiores)
  • Validações (erros, avisos, prompts e exceções apresentados ao usuário)
  • Botão Voltar
  • Botão Carregar mais linhas
• Capacidade de ocultar a barra de ferramentas se todos os controles intrínsecos estiverem ocultos, incluindo desabilitar a contagem
• O botão Fechar ('x') agora faz parte do Painel e pode ser estilizado de forma semelhante
• Suporte à visibilidade do painel que oculta o Painel, mas reserva o espaço (valor de "3")
• Agora é possível ocultar os Cabeçalhos do Painel ou ajustar seu tamanho via Formatos
• Nível do site fontes podem ser carregadas remotamente

Estado Sem Tema

Sem nenhuma informação de tema definida e aplicada, App Builder no nível da Camada de Aplicação aparece em um estado sem tema com estilização mínima. Com o uso de Temas, um designer pode melhorar rapidamente a aparência geral de um aplicativo.

Interfaces

Criar um novo tema e atribuí-lo a um aplicativo não resultará em nenhuma alteração visível, pois o novo tema não tem Implementações. As cores escolhidas em um nível de tema não são aplicadas automaticamente a nenhuma parte da interface do usuário da camada de aplicativo. Para ver cores personalizadas por meio da camada de aplicativo, você precisa configurar as configurações do componente. A Fig. 2 tem a Cor de fundo do componente da barra de título da página definida como roxo para a área Links.

Os componentes são partes da IU que podem receber implementações de estilo.

Tipos de Valor

Com um Componente especificado, você pode selecionar um Tipo de Valor para aplicar uma propriedade. Tipos de Valor podem se referir a cores de fonte, cores de fundo, imagens, alinhamento, informações de gradiente, informações de tamanho, etc. dependendo de qual área específica de Imóveis você selecionou para personalizar. Na página do tema, cada Tipo de Valor tem informações de texto de Ajuda correspondentes que contêm dicas e instruções úteis sobre quais informações específicas fornecer.

Referenciando Cores por Sintaxe Reservada

Ao especificar cores na área Temas de App Builder, (cor da borda, cor do plano de fundo, etc.) você pode referenciar o nome de uma das três cores definidas no nível do Tema. Isso permite uma personalização mais rápida ao usar o recurso Copiar.

Os termos de sintaxe reservados que você pode especificar são:

• {PrimaryColor}
• {SecondaryColor}
• {ComplementaryColor}

Ajustando Cores

Ao usar nomes reservados, as cores também podem ser ajustadas para brilho ou escuridão e opacidade.

As cores podem ser ajustadas para brilho ou escuridão e opacidade. Esta personalização está disponível para os seguintes termos reservados:

• {PrimaryColor}
• {SecondaryColor}
• {ComplementaryColor}

Para ajustar o brilho e a escuridão da cor, adicione um caractere de pipe junto com um valor decimal numérico (valor positivo para aumentar ou valor negativo para escurecer a cor). Os valores esperados são -.9- .9.

Sintaxe: {PrimaryColor|.25} ou {PrimaryColor|-.25}

Para ajustar a opacidade da cor, adicione o caractere til junto com um valor decimal numérico. Os valores esperados são .1- .9.

Sintaxe: {PrimaryColor~.25}

Botão Copiar

Qualquer tema pode ser copiado. Use este recurso se quiser começar a usar um tema rapidamente e apenas definir as três cores para Primário, Secundário e Complementar. Há muitos temas predefinidos disponíveis que podem ser selecionados e usados como estão ou personalizados ainda mais para começar a usar rapidamente.

App Builder temas Predefinidos

App Builder vem com vários Temas predefinidos. Embora sejam tecnicamente editáveis, quando você atualiza, quaisquer alterações serão perdidas.

Sugestões

Se você especificar uma Cor de Fundo escura, certifique-se de usar uma Cor de Fonte que seja legível para todo o texto. Aproveite a propriedade text-shadow incluída em Cor de Fonte para adicionar contraste extra.

Apêndice

Componentes

Tipos de Valor