Referência sobre CSS

O Cascading Style Sheets ou CSS controla o estilo e o layout de sites e apps. No App Maker, é possível usá-lo para especificar cores, fontes, bordas e outros atributos de widgets para personalizar a aparência do aplicativo.

Adicione o CSS na guia Estilo, localizada no menu à direita do Editor de página. Por exemplo, para definir a cor do botão Button1 como laranja, basta selecioná-lo na sua página e adicionar o código a seguir na guia Estilo:

.app-NewPage-Button1 {
      background-color: orange;
    }

CSS básico

Fontes

Efeito CSS/estilo Original Com estilo aplicado Valores possíveis
Negrito font-weight: bold; texto de amostra texto de amostra normal, negrito
Itálico font-style:italic; texto de amostra texto de amostra normal, itálico
Tachado text-decoration: line-through; texto de amostra texto de amostra sublinhado, tachado, linha sobreposta
Cor do texto color: red;
color: #ff0000;		 texto de amostra texto de amostra nome ou código HTML da cor
Tamanho do texto font-size:20px; texto de amostra texto de amostra tamanho em pixel ou unidades "em"
Alinhamento do texto text-align: right; texto de amostra texto de amostra esquerda, centro, direita

Painéis, botões etc.

Bordas

Efeito CSS/estilo Original Com estilo aplicado
Adicionar ou alterar bordas border: 1px red solid;
Remover bordas border: none;

Bordas arredondadas

Efeito CSS/estilo Original Com estilo aplicado
Arredondar todos os cantos border-radius:5px;
Arredondar cantos individualmente border-top-right-radius: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;
texto de amostra
texto de amostra

Cor de fundo

Efeito CSS/estilo Original Com estilo aplicado
**Adicionar ou alterar cor** background-color: lightgreen;
Remover cor background: none;

Cursor

Efeito CSS/estilo Original Com estilo aplicado
Ponteiro (elementos clicáveis) cursor: pointer; texto de amostra texto de amostra
Seta (elementos não clicáveis) cursor: default; amostra de link amostra de link

Processar conteúdo em excesso

Às vezes, o conteúdo do aplicativo é muito grande para o contêiner dele. Com o CSS, é possível definir a resposta do aplicativo quando o conteúdo excede o contêiner, seja ele um texto muito longo para um widget de rótulo ou um grupo de widgets que não se encaixa em um painel.

Ocultar conteúdo em excesso

Efeito CSS/estilo Original Com estilo aplicado
Cortar conteúdo em excesso
 overflow: hidden;
O CSS É INCRÍVEL
O CSS É INCRÍVEL
Ativar rolagem
 overflow: auto;
O CSS É INCRÍVEL
O CSS É INCRÍVEL
Cortar conteúdo muito grande
 overflow-x: hidden;
O CSS É INCRÍVEL
O CSS É INCRÍVEL
Ativar rolagem em conteúdo muito longo
 overflow-y: auto;
O CSS É INCRÍVEL
O CSS É INCRÍVEL

Usar reticências no texto em excesso

Efeito CSS/estilo Original Com estilo aplicado
Reticências overflow: hidden;
text-overflow: ellipsis;
Internacionalização
Internacionalização

Alterar os efeitos padrão do navegador

O navegador tem uma maneira padrão de exibir a maioria dos elementos interativos. Por exemplo, os links que você já visitou geralmente aparecem sublinhados e em roxo. Para redefinir esses estilos, use pseudosseletores do CSS.

Passar o cursor do mouse

O atributo a seguir é ativado quando você passa o cursor do mouse sobre um elemento. Os botões e links têm efeitos integrados para essa ação. No entanto, é possível adicionar esses efeitos a qualquer widget do App Maker, incluindo painéis e campos de entrada.

CSS/estilo Original Com estilo aplicado
.blueButton {background-color: blue;}
.blueButton:hover {background-color: pink;}
.testClass {}
.testClass:hover {background-color: #FFA500;}
texto de amostra
texto de amostra

Foco e modificador !important

Quando você interage com um elemento, ele é colocado em foco. Por exemplo, ao clicar em uma caixa de entrada, um cursor de texto aparece. Com esse recurso, todas as entradas do teclado vão diretamente para o elemento em foco.

Às vezes, seus estilos entram em conflito com aqueles definidos pelo navegador ou por temas do App Maker. Se o CSS não renderizar, adicione o modificador !important ao seu estilo para garantir que ele não seja modificado por estilos de navegador ou tema. Tenha cautela ao aplicar o modificador: ele pode modificar estilos integrados importantes.

CSS/estilo Original Com estilo aplicado
.inputClass {}
.inputClass:focus {border:1px solid red;}
.inputClass1 {}
.inputClass1:focus {border:1px solid red !important;}

Próximas etapas