Estilos

Com o painel "Estilo", você personaliza a aparência do app. É possível definir temas, escolher uma das variantes de widgets e até mesmo criar os próprios estilos.

Estilo global: defina o estilo de vários widgets de uma só vez

Definir um estilo geral do aplicativo com os temas

Com o seletor de tema, localizado na parte superior da guia "Estilos", você controla a aparência padrão dos widgets no aplicativo. No momento, o App Maker tem dois temas:

  • Material: um tema que implementa o Material Design (em inglês), o estilo visual padrão do Google. Use-o para criar aplicativos com o mesmo estilo dos principais apps do Google, como o Inbox ou o Keep.

  • Simples: um tema mais simples que fornece uma aparência genérica. Use-o para desenvolver seu próprio estilo visual exclusivo.

Personalizar widgets com o CSS

Se você quer ajustar widgets com o tema "Material" ou personalizar a opção "Simples", basta escrever seu próprio Cascading Style Sheets ou CSS.

Os widgets do App Maker e os subcomponentes deles têm classes CSS integradas, com o prefixo app- seguido pelo nome do widget. Para alterar a aparência dos widgets, adicione o próprio CSS a essas classes usando a área de texto abaixo do seletor de tema. Por exemplo:

/* Adds rounded corners to button widgets */
    .app-Button {
      border-radius: 10px;
    }

    /* Sets font size for rows in list panels */
    .app-ListPanelRow {
      font-size: 1.2em;
    }
    

Também é possível usar toda a variedade de seletores CSS para definir o estilo do aplicativo:

/* Turns off link underlines. */
    .app-Link:link {
      text-decoration: none;
    }

    /* Changes color of disabled buttons. */
    .app-Button[disabled] {
      background-image: none;
      background-color: white;
    }
    

Estilos para diferentes tamanhos de tela

Os usuários podem acessar o aplicativo usando dispositivos com telas grandes ou pequenas. É possível aprimorar a experiência deles no seu aplicativo ao incluir um design responsivo, que altera o layout dependendo do tamanho da tela, ou resolução.

Para ajustar automaticamente o layout em diferentes tamanhos de tela, use as consultas de mídia no CSS global. Para ver uma introdução sobre o design responsivo, consulte Noções básicas do Web design responsivo. Para ver um exemplo, consulte a Grade de layout responsivo.

Testar estilos específicos de tamanho no Editor de página

Para testar seu estilo, é possível redimensionar a tela manualmente ou aplicar uma resolução específica. Alterar a resolução no Editor de página não afeta os aplicativos publicados e outros desenvolvedores não verão as mudanças. Atualize a página para colocar a tela no tamanho personalizado original.

Para selecionar uma resolução de tela específica, clique em "Resoluções de dispositivo", , na parte superior do Editor de página.

A resolução da tela aparece no canto superior à direita, a menos que a resolução Personalizada esteja selecionada. Nesse caso, o tamanho personalizado está no Editor de propriedade nos valores da dimensão.

Gerenciar resoluções de tela

Para adicionar uma resolução de tela, clique em "Resoluções de dispositivo" e em Adicionar resolução. Outra opção é clicar em "Configurações" Configurações do aplicativo Adicionar resolução.

Para editar e excluir resoluções de tela, acesse "Configurações" Configurações do aplicativo e localize a seção Resoluções da janela de visualização. Selecione a resolução que você quer editar ou excluir e clique em "Editar", , ou "Excluir", .

Estilo do widget: defina o estilo de um único widget

Temas de widget

Use o seletor de tema para aplicar estilos aos widgets com facilidade. Selecione um widget e escolha uma opção em uma lista de temas no menu suspenso localizado na barra de ações.

Seletor de tema

O tema "Material" oferece muitas variantes para a maioria dos widgets. Por exemplo, os widgets de painel têm uma variante Paper que se parece com um pedaço de papel, outra Transparent que mostra os widgets abaixo do painel e muito mais.

CSS específico do widget

A guia "Estilo" tem uma área de texto para inserir CSS personalizado. Assim, é possível ajustar o estilo de um widget selecionado de acordo com suas especificações exatas. Os estilos também têm o prefixo .app- seguido pelo nome da página em que o widget está localizado e o nome do próprio widget. Quando o widget é selecionado, ele é exibido na parte superior do pop-up de preenchimento automático.

Exemplos:

/* Changes color of SampleButton1 to yellow */
    .app-NewPage-SampleButton1 {
      background-image: none;
      background-color: yellow;
    }

    /* Sets font in SampleListPanel1's rows to bold */
    .app-NewPage-SampleListPanel1Row {
      font-weight: bold;
    }
    

Opções personalizadas

Com o App Maker, também é possível criar as próprias variantes. Para fazer isso, use a seção do CSS da guia "Estilos" e crie uma classe com um nome no formato app-[WidgetType]--[VariantName]. Por exemplo:

.app-Button--RedButton {
      background-image: none;
      background-color: red;
    }
    

Depois de criar uma classe com o nome correto, a variante é exibida na lista suspensa Variante, localizada na barra de ações quando o widget é selecionado.

Estilos extras com a propriedade "styles"

É possível adicionar estilos a widgets fora do painel "Estilo". Basta usar a propriedade styles em Display no Editor de propriedade. Defina uma classe em "Estilo" e adicione-a à propriedade. Os estilos atribuídos dessa forma não precisam do prefixo comum app-. Por exemplo:

.specialSubmitButton {
      background-image: none;
      background-color: red;
    }