Personalize as suas interfaces Qodly com CSS

Abril 3, 2025 6 Tempo de leitura

No Qodly Studio, cada widget pode ser estilizado diretamente utilizando as suas propriedades. No entanto, para manter um aspeto consistente em toda a aplicação e para aplicar facilmente estilos globais (como a cor do tipo de letra, o tamanho do texto ou o aspeto das selecções), o CSS é o seu melhor aliado.

Neste artigo, exploraremos as noções básicas de utilização de CSS no Qodly Studio, com exemplos da aplicação Análise de desempenho.

Aplicação de análise de desempenho

O que é CSS?

CSS (Cascading Style Sheets) é uma linguagem de estilo para controlar o aspeto visual dos elementos HTML numa página Web. São utilizadas para definir cores, tipos de letra, margens, animações e muito mais, para criar interfaces consistentes, esteticamente agradáveis e adaptáveis.

Neste blogue, vamos apenas mostrar-lhe como utilizar e criar uma classe CSS no Qodly Studio, bem como alguns exemplos simples. Se quiser aprender a escrever CSS, existem inúmeras fontes de documentação, cursos de formação e vídeos sobre o assunto.

Como utilizar uma classe CSS na Qodly

Criar uma classe CSS

A Qodly permite-lhe adicionar classes CSS diretamente ao seu projeto. Veja como:

Aceda ao menu Estilos no Qodly Studio.
Crie uma classe CSS.
Especifique se é local ou partilhada.
Escreva a definição CSS.

Tipos de CSS na Qodly

A Qodly oferece três tipos de CSS para máxima flexibilidade:

Local: Aplicado apenas a um componente ou página específica.
Baseado em temas: Partilhado entre vários componentes para manter a consistência dentro de uma secção da sua aplicação.
Partilhado: Disponível globalmente em todo o projeto.

Estas opções dão-lhe uma grande flexibilidade na estruturação e gestão dos seus estilos.

Aplicar uma classe CSS

Depois de ter criado o seu CSS, pode aplicar uma classe a diferentes widgets em apenas alguns passos:

Selecione o widget no Qodly Studio.
Vá para o separador Propriedades.
Procure a opção Classe CSS e introduza o nome da classe definida no seu ficheiro CSS.

Casos de utilização na vida real

Tomemos como exemplo a página de início de sessão da aplicação Avaliação de desempenho.

Exemplo 1: Estilizar um botão de início de sessão

Queremos estilizar o botão de início de sessão com:

Texto branco
Fundo vermelho
Cantos arredondados
Efeito de pairar com um vermelho mais escuro

Criamos uma classe “button-full”.

Introduzimos a seguinte descrição CSS:

self {
  border-radius: 4px;
  border: 1px solid #dd3c4c;
  cor de fundo: #dd3c4c;
  color: #FFFFFF;
  duração da transição: 0.4s;
}

self:hover {
  border: 1px solid #c32232;
  cor de fundo: #c32232;
  color: #FFFFFF;
}

No Qodly Studio, aplique este estilo utilizando a classe “button-full” nos seus botões.

Exemplo 2: Botões adaptáveis para modos claro e escuro

Com as media queries, pode criar estilos adaptativos que se ajustam automaticamente com base no tema claro ou escuro do utilizador.

Para o modo escuro, queremos um vermelho mais escuro com um efeito de foco mais claro. Isto é facilmente conseguido utilizando o seletor @media (prefers-color-scheme: dark):

self {
  border-radius: 4px;
  border: 1px solid #dd3c4c;
  cor de fundo: #dd3c4c;
  color: #FFFFFF;
  duração da transição: 0.4s;
}

self:hover {
  border: 1px solid #c32232;
  cor de fundo: #c32232;
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  self {
    border-radius: 4px;
    border: 1px solid #c32232;
    cor de fundo: #c32232;
    color: #ffffff;
    transition-duration: 0.4s;
  }
	
  self:hover {
    border: 1px solid #dd3c4c;
    cor de fundo: #dd3c4c;
    color: #ffffff;
    }
}

O resultado em imagens:

Tema claro

Tema escuro

Exemplo 3: Utilização de variáveis CSS

As variáveis CSS permitem-lhe definir constantes reutilizáveis, tornando a gestão de estilos mais fácil e dinâmica.

Por exemplo, pode centralizar a gestão de cores e aplicá-las dinamicamente com base no modo claro ou escuro.

Passo 1: Definir uma folha de estilos partilhada

Crie uma folha de estilo partilhada e defina todas as suas constantes:

:root {
   --main-bg-color: #FFFFFF;
   --main-fg-color: #000000;
   --accent-color1: #dd3c4c;
   --accent-color2: #c32232;

  @media (prefers-color-scheme: dark) {
    --main-bg-color: #121212;
    --main-fg-color: #E0E0E0;
    --accent-color1: #c32232;
    --accent-color2: #dd3c4c;
  }
}

Etapa 2: aplique a variável à classe button-full.

Para usar uma variável em uma classe CSS, basta usar a função var():

self {
  border-radius: 4px;
  border: 1px solid var(--accent-color1);
  cor de fundo: var(--accent-color1);
  cor: var(--text-color1);
  duração da transição: 0.4s;
}

self:hover {
  border: 1px solid var(--accent-color2);
  cor de fundo: var(--accent-color2);
  color: var(--text-color1);
}

Agora, sempre que atualizar as variáveis de cor, todos os elementos estilizados serão atualizados automaticamente, garantindo um tema consistente em toda a aplicação.

Exemplo 4: Estilo de componente responsivo

O exemplo a seguir demonstra como criar um design responsivo que se ajusta com base na largura do ecrã.

O painel de início de sessão é composto por três caixas de estilo:

Uma caixa para o título da aplicação.
Uma caixa para os campos de início de sessão e palavra-passe.
Um contentor que envolve ambas as caixas.

O contentor utiliza display: flex; e flex-wrap: wrap; para garantir a capacidade de resposta. Se as caixas ficarem demasiado largas, empilham-se verticalmente em vez de ficarem lado a lado.

Então, para as outras duas caixas, a largura é alterada entre 50% e 100%, dependendo do tamanho do ecrã. Por razões estéticas, o rebordo também é modificado.

Eis o exemplo CSS da caixa posicionada à esquerda ou em cima, dependendo do ecrã:

self {
    border-radius: 10px 0 0 10px;
    largura: 50%;
    height: 100%;
}

@media screen and (max-width: 800px) {
    self {
      raio da margem: 10px 10px 0 0;
      largura: 100%;
      height: fit-content;
    }
}

O resultado em imagens:

Uma dica rápida para começar

Se não tiver a certeza de como estruturar o seu CSS, o Qodly fornece uma funcionalidade útil. Pode definir estilos através de propriedades de widgets e exportá-los como CSS.

Isto permite-lhe ver o aspeto de uma regra CSS e criar e modificar facilmente as suas próprias classes CSS.

Ir mais longe

Esperamos que estes exemplos tenham demonstrado o poder e a flexibilidade do CSS no Qodly Studio. Para explorar mais, consulte estes recursos adicionais:

Com CSS, pode transformar as suas aplicações Qodly em experiências visuais únicas e profissionais, ao mesmo tempo que simplifica a gestão dos seus estilos. Comece e partilhe as suas criações ou faça as suas perguntas no Fórum!