Personalizzare le interfacce Qodly con i CSS

Aprile 3, 2025 5 Tempo di lettura

In Qodly Studio, ogni widget può essere stilizzato direttamente utilizzando le sue proprietà. Tuttavia, per mantenere un aspetto coerente in tutta l’applicazione e per applicare facilmente stili globali (come il colore dei caratteri, la dimensione del testo o l’aspetto delle selezioni), i CSS sono i vostri migliori alleati.

In questo articolo esploreremo le basi dell’uso dei CSS in Qodly Studio, con esempi tratti dall’applicazione Performance Review.

Applicazione Performance Review

Che cos’è il CSS?

I CSS (Cascading Style Sheets) sono un linguaggio di stile per controllare l’aspetto visivo degli elementi HTML in una pagina web. Vengono utilizzati per definire colori, caratteri, margini, animazioni e molto altro, per creare interfacce coerenti, esteticamente gradevoli e adattabili.

In questo blog vi mostreremo come utilizzare e creare una classe CSS in Qodly Studio, oltre ad alcuni semplici esempi. Se volete imparare a scrivere i CSS, esistono numerose fonti di documentazione, corsi di formazione e video sull’argomento.

Come utilizzare una classe CSS in Qodly

Creare una classe CSS

Qodly consente di aggiungere classi CSS direttamente al progetto. Ecco come fare:

Andate nel menu Styling di Qodly Studio.
Create una classe CSS.
Specificate se è locale o condivisa.
Scrivete la definizione CSS.

Tipi di CSS in Qodly

Qodly offre tre tipi di CSS per la massima flessibilità:

Locale: Applicato solo a un componente o a una pagina specifica.
A tema: Condiviso tra più componenti per mantenere la coerenza all’interno di una sezione dell’applicazione.
Condiviso: Disponibile a livello globale per l’intero progetto.

Queste opzioni offrono una grande flessibilità nella strutturazione e nella gestione degli stili.

Applicare una classe CSS

Una volta creato il CSS, è possibile applicare una classe a diversi widget in pochi passaggi:

Selezionare il widget in Qodly Studio.
Andare alla scheda Proprietà.
Cercate l’opzione Classe CSS e inserite il nome della classe definita nel vostro file CSS.

Casi d’uso reali

Prendiamo come esempio la pagina di login dell’applicazione Performance Review.

Esempio 1: stilizzazione di un pulsante di accesso

Vogliamo creare uno stile per il pulsante di accesso con:

Testo bianco
Sfondo rosso
Angoli arrotondati
Effetto Hover con un rosso più scuro

Creiamo una classe “button-full”.

Inseriamo la seguente descrizione CSS:

self {
  raggio del bordo: 4px;
  bordo: 1px solid #dd3c4c;
  colore di sfondo: #dd3c4c;
  colore: #FFFFFF;
  durata della transizione: 0.4s;
}

self:hover {
  bordo: 1px solido #c32232;
  colore di sfondo: #c32232;
  colore: #FFFFFF;
}

In Qodly Studio, applicare questo stile utilizzando la classe “button-full” sui pulsanti.

Esempio 2: Pulsanti adattivi per modalità chiare e scure

Con le media query, è possibile creare stili adattivi che si regolano automaticamente in base al tema chiaro o scuro dell’utente.

Per la modalità scura, vogliamo un rosso più scuro con un effetto hover più chiaro. Questo si ottiene facilmente utilizzando il selettore @media (prefers-color-scheme: dark):

self {
  bordo-raggio: 4px;
  bordo: 1px solid #dd3c4c;
  colore di sfondo: #dd3c4c;
  colore: #FFFFFF;
  durata della transizione: 0.4s;
}

self:hover {
  bordo: 1px solido #c32232;
  colore di sfondo: #c32232;
  colore: #ffffff;
}

@media (prefers-color-scheme: dark) {
  self {
    bordo-raggio: 4px;
    bordo: 1px solid #c32232;
    colore di sfondo: #c32232;
    colore: #ffffff;
    durata della transizione: 0.4s;
  }
	
  self:hover {
    bordo: 1px solid #dd3c4c;
    colore di sfondo: #dd3c4c;
    colore: #ffffff;
    }
}

Il risultato in immagini:

Tema chiaro

Tema scuro

Esempio 3: Utilizzo delle variabili CSS

Le variabili CSS consentono di definire costanti riutilizzabili, rendendo la gestione dello stile più semplice e dinamica.

Ad esempio, è possibile centralizzare la gestione dei colori e applicarli dinamicamente in base alla modalità chiara o scura.

Passo 1: Definire un foglio di stile condiviso

Creare un foglio di stile condiviso e definire tutte le costanti:

: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;
  }
}

Passo 2: applicare la variabile alla classe button-full.

Per usare una variabile in una classe CSS, basta usare la funzione var():

self {
  raggio del bordo: 4px;
  bordo: 1px solid var(--accent-color1);
  colore di sfondo: var(--accent-color1);
  colore: var(--text-color1);
  durata della transizione: 0.4s;
}

self:hover {
  bordo: 1px solid var(--accent-color2);
  colore di sfondo: var(--accent-color2);
  colore: var(--text-color1);
}

Ora, ogni volta che si aggiornano le variabili di colore, tutti gli elementi con stile si aggiorneranno automaticamente, garantendo un tema coerente in tutta l’applicazione.

Esempio 4: Stilizzazione di un componente reattivo

L’esempio seguente mostra come creare un design reattivo che si adatta alla larghezza dello schermo.

Il pannello di login è composto da tre caselle di stile:

Un riquadro per il titolo dell’applicazione.
Un riquadro per i campi di login e password.
Un contenitore che avvolge entrambe le caselle.

Il contenitore utilizza display: flex; e flex-wrap: wrap; per garantire la reattività. Se i riquadri diventano troppo larghi, si impilano verticalmente invece di essere affiancati.

Quindi, per gli altri due riquadri, la larghezza viene modificata tra il 50% e il 100% a seconda delle dimensioni dello schermo. Per motivi estetici, viene modificato anche il bordo.

Ecco l’esempio CSS del box posizionato a sinistra o in alto, a seconda dello schermo:

self {
    raggio del bordo: 10px 0 0 10px;
    larghezza: 50%;
    altezza: 100%;
}

@media screen and (max-width: 800px) {
    self {
      raggio del bordo: 10px 10px 0 0;
      larghezza: 100%;
      height: fit-content;
    }
}

Il risultato in immagini:

Un consiglio veloce per iniziare

Se non siete sicuri di come strutturare il vostro CSS, Qodly offre una comoda funzione. È possibile definire gli stili tramite le proprietà dei widget ed esportarli come CSS.

In questo modo è possibile vedere l’aspetto di una regola CSS e creare e modificare facilmente le proprie classi CSS.

Andare oltre

Speriamo che questi esempi abbiano dimostrato la potenza e la flessibilità dei CSS in Qodly Studio. Per approfondire, consultate queste risorse aggiuntive:

Con i CSS, potete trasformare le vostre applicazioni Qodly in esperienze visive uniche e professionali, semplificando al contempo la gestione degli stili. Iniziate a condividere le vostre creazioni o a porre le vostre domande sul Forum!