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 |
|
Ativar rolagem |
overflow: auto; | O CSS É INCRÍVEL |
O CSS É INCRÍVEL |
Cortar conteúdo muito grande |
overflow-x: hidden; | 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 |
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;} |