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.

Nota

Copie um tema se desejar manter suas alterações durante uma atualização. Se estiver usando um tema para fins de página ou painel, deixe o tema base em branco. Defini-lo como o tema do aplicativo carregará o CSS do tema do aplicativo duas vezes.

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.

Fig. 2

Fig 3

Fig 4

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

| Nome do tipo de valor | Descrição da entrada | Texto de ajuda |TABLEROWEND| ...TABLEROWEND | 1 Gradiente de fundo | Um desbotamento de cor de um valor de cor para outro | Valor1 e 2 são usados para as cores Para e De. Valor3 é para a cor da borda. | | 2 Cor de fundo | Código de cor ou valor nomeado usado para preencher todo o elemento | Valor1 é usado para a cor de fundo. Pode ser um código HTML ou usar {PrimaryColor} por exemplo para usar a cor do tema. | | 3 Imagem de fundo | Valor de imagem de URL ou Base64 | Valor1 é uma URL ou uma imagem codificada em base64. Clique com o botão direito em qualquer App Builder imagem e copiar URL para usar App Builder imagens hospedadas. O valor2 é usado para esticar a imagem ou repeti-la. Para esticar, insira 'cover', caso contrário, deixe em branco para repetir (ficha) a imagem. | | 4 Cor da borda | Código de cor ou valor nomeado | Valor1 é usado para a cor da borda. | | 5 Ícone - Glifo | Código Glyphicon, valor não nomeado | Valor1 é usado para o código Glyphicon. | | 6 Cor da fonte | Código de cor ou valor nomeado | Valor1 é usado para a cor da fonte. Valor2 precisa estar em um formato específico: 0 1px 1px #222. Altere o código de cor para afetar a cor real. | | 7 Estilos Avançados | Defina valores CSS mais avançados para as propriedades Display, Opacity e Transition | Value1 oculta elementos definindo o valor como 'none'. Value2 define a margem do elemento, enquanto Value3 define o preenchimento. Opacity é usado para especificar a opacidade ou transparência de um elemento. Os valores esperados são 0,1 - 0,9. Por exemplo: 0,5 | | 8 Plano de fundo avançado | Todas as opções relacionadas ao plano de fundo | Valor1 representa a forma abreviada do plano de fundo. Com isso, você pode especificar todas as opções de plano de fundo de uma vez. Valor2 é a propriedade do tamanho do plano de fundo. | | 9 Sombra da Box | Efeito de sombra em caixas | Valor1 representa os valores de sombra da caixa, enquanto Valor2 é usado para a cor da sombra. | | 10 Fonte Avançada | Definindo vários estilos de fonte, como tipo, tamanho e negrito | Valor1 é usado para os nomes de fonte. Use uma lista separada por vírgulas. Valor2 é o tamanho da fonte. Pode ser qualquer unidade de medida. Valor3 é o negrito. Você pode inserir um valor ou usar 'negrito' ou outras palavras reservadas. | | 11 Raio da Borda | A curva de uma borda. Use 100% para criar um círculo. | Valor1 é usado para arredondar os cantos de um elemento. | | 12 Flex box ficha | Definindo estilos que afetam os tiles do painel Board. | Os valores 1 e 2 controlam o tamanho dos tiles. | | 13 Texto avançado | Modificações no texto | Valor1 define text-decoration, usado para adicionar sublinhado e outras propriedades. Valor2 define text-transform, usado para texto em caixa alta. Valor3 define font-style, usado para itálico. | | 14 Alinhamento | Define o alinhamento para diferentes elementos em uma área especificada | Valor1 define especifica o alinhamento vertical de um contêiner em linha, por exemplo: meio. Valor2 é usado para definir o alinhamento horizontal do texto, por exemplo: centro. | | 15 Fonte | Defina várias informações de estilo de fonte, como tipo de fonte, tamanho e quão grossos ou finos (negrito) os caracteres devem ser exibidos | O valor 1 é usado para especificar o tipo de fonte para um elemento. Use uma lista separada por vírgulas. Por exemplo: Calibri, Arial, sans-serif. O valor 2 é usado para definir o tamanho da fonte. As opções de tamanho da fonte variam de xx-small a xx-large. Por exemplo: small. O valor 3 é usado para definir o peso da fonte, ou quão grossos ou finos os caracteres da fonte aparecem na página. As opções de peso da fonte variam de normal a mais negrito. Um peso de fonte de 400 é o mesmo que normal, 700 é o mesmo que negrito. Por exemplo: negrito. | | 16 Espaçamento | Especificar valores de espaçamento para conteúdo que aparece em um contêiner | Valor1 define Altura da Linha. A propriedade Altura da Linha especifica a altura de um elemento. Valores negativos não são permitidos. Por exemplo: 1,4em. Valor2 é usado para definir Margem. A propriedade Margem é usada para criar espaço ao redor de elementos. Valores negativos não são permitidos. 4 lados de um elemento podem ter Margem definida: superior, direita, inferior, esquerda. Valor 3 é usado para definir Padding. A propriedade Padding é usada para gerar espaço ao redor do conteúdo de um elemento. 4 lados de um elemento podem ter Padding definido: superior, direita, inferior, esquerda. |