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:
- Personalizzazione dello stile dei pulsanti
- Personalizzazione degli stili delle caselle di controllo
- Personalizzazione dello stile DataTable
- Personalizzazione degli stili di matrice
- Personalizzazione degli stili di casella di selezione
- Personalizzazione degli stili radio
- Personalizzazione degli stili di input di testo
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!