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:
- Personalização do estilo de botões
- Personalização de estilos de caixas de verificação
- Personalização do estilo de DataTable
- Personalização de estilos de matriz
- Personalização de estilos de caixa de seleção
- Personalização de estilos de rádio
- Personalização de estilos de entrada de texto
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!