Passen Sie Ihre Qodly-Oberflächen mit CSS an

April 3, 2025 6 Lesezeit

In Qodly Studio kann jedes Widget direkt über seine Eigenschaften gestylt werden. Um jedoch ein einheitliches Erscheinungsbild in Ihrer gesamten Anwendung zu erhalten und um globale Stile (wie Schriftfarbe, Textgröße oder das Aussehen von Auswahlen) einfach anzuwenden, ist CSS Ihr bester Verbündeter.

In diesem Artikel werden wir die Grundlagen der Verwendung von CSS in Qodly Studio anhand von Beispielen aus der Anwendung Performance Review erläutern.

Anwendung Leistungsüberprüfung

Was ist CSS?

CSS (Cascading Style Sheets) ist eine Stilsprache zur Steuerung des visuellen Erscheinungsbildes von HTML-Elementen auf einer Webseite. Sie werden verwendet, um Farben, Schriftarten, Ränder, Animationen und vieles mehr zu definieren, um konsistente, ästhetisch ansprechende und anpassungsfähige Oberflächen zu schaffen.

In diesem Blog zeigen wir Ihnen, wie Sie eine CSS-Klasse in Qodly Studio verwenden und erstellen können, und geben Ihnen ein paar einfache Beispiele. Wenn Sie lernen wollen, wie man CSS schreibt, gibt es zahlreiche Dokumentationsquellen, Schulungen und Videos zu diesem Thema.

So verwenden Sie eine CSS-Klasse in Qodly

Erstellen einer CSS-Klasse

Mit Qodly können Sie CSS-Klassen direkt zu Ihrem Projekt hinzufügen. So geht’s:

Gehen Sie zum Menü „Styling“ in Qodly Studio.
Erstellen Sie eine CSS-Klasse.
Legen Sie fest, ob sie lokal oder gemeinsam genutzt werden soll.
Schreiben Sie die CSS-Definition.

CSS-Typen in Qodly

Qodly bietet drei Arten von CSS für maximale Flexibilität:

Lokal: Wird nur auf eine bestimmte Komponente oder Seite angewendet.
Themenbasiert: Wird von mehreren Komponenten gemeinsam genutzt, um die Konsistenz innerhalb eines Abschnitts Ihrer Anwendung zu wahren.
Gemeinsam genutzt: Global für das gesamte Projekt verfügbar.

Diese Optionen bieten Ihnen große Flexibilität bei der Strukturierung und Verwaltung Ihrer Stile.

Anwenden einer CSS-Klasse

Sobald Sie Ihre CSS erstellt haben, können Sie in wenigen Schritten eine Klasse auf verschiedene Widgets anwenden:

Wählen Sie das Widget in Qodly Studio aus.
Gehen Sie auf die Registerkarte Eigenschaften.
Suchen Sie nach der Option CSS-Klasse und geben Sie den Namen der Klasse ein, die Sie in Ihrer CSS-Datei definiert haben.

Anwendungsfälle aus der Praxis

Nehmen wir als Beispiel die Login-Seite der Anwendung Performance Review.

Beispiel 1: Gestalten einer Anmeldeschaltfläche

Wir möchten die Anmeldeschaltfläche wie folgt gestalten:

Weißem Text
rotem Hintergrund
Abgerundete Ecken
Hover-Effekt mit einem dunkleren Rot

Wir erstellen eine Klasse „button-full“.

Wir geben die folgende CSS-Beschreibung ein:

self {
  border-radius: 4px;
  border: 1px solid #dd3c4c;
  background-color: #dd3c4c;
  color: #FFFFFF;
  transition-duration: 0.4s;
}

self:hover {
  border: 1px solid #c32232;
  background-color: #c32232;
  color: #FFFFFF;
}

In Qodly Studio wenden Sie diesen Stil mit der Klasse „button-full“ auf Ihre Schaltflächen an.

Beispiel 2: Adaptive Buttons für helle und dunkle Modi

Mit Media-Queries können Sie adaptive Stile erstellen, die sich automatisch an das helle oder dunkle Thema des Benutzers anpassen.

Für den dunklen Modus wollen wir ein dunkleres Rot mit einem helleren Hover-Effekt. Dies lässt sich leicht mit dem @media (prefers-color-scheme: dark) Selektor erreichen:

self {
  border-radius: 4px;
  border: 1px solid #dd3c4c;
  background-color: #dd3c4c;
  color: #FFFFFF;
  transition-duration: 0.4s;
}

self:hover {
  border: 1px solid #c32232;
  background-color: #c32232;
  color: #ffffff;
}

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

Das Ergebnis in Bildern:

Helles Thema

Dunkles Thema

Beispiel 3: Verwendung von CSS-Variablen

Mit CSS-Variablen können Sie wiederverwendbare Konstanten definieren, die die Stilverwaltung einfacher und dynamischer machen.

So können Sie beispielsweise das Farbmanagement zentralisieren und dynamisch auf der Grundlage des hellen oder dunklen Modus anwenden.

Schritt 1: Definieren Sie ein gemeinsames Stylesheet

Erstellen Sie ein gemeinsames Stylesheet und definieren Sie alle Ihre Konstanten:

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

  @media (bevorzugt-Farbschema: dunkel) {
    --main-bg-color: #121212;
    --main-fg-color: #E0E0E0;
    --accent-color1: #c32232;
    --accent-color2: #dd3c4c;
  }
}

Schritt 2: Wenden Sie die Variable auf die Klasse button-full an.

Um eine Variable in einer CSS-Klasse zu verwenden, benutzen Sie einfach die var()-Funktion:

self {
  border-radius: 4px;
  border: 1px solid var(--accent-color1);
  background-color: var(--accent-color1);
  Farbe: var(--text-color1);
  transition-duration: 0.4s;
}

self:hover {
  border: 1px solid var(--accent-color2);
  background-color: var(--accent-color2);
  Farbe: var(--text-color1);
}

Wenn Sie nun die Farbvariablen aktualisieren, werden alle gestylten Elemente automatisch aktualisiert, wodurch ein einheitliches Design in der gesamten Anwendung gewährleistet wird.

Beispiel 4: Responsive Component Styling

Das folgende Beispiel zeigt, wie man ein responsives Design erstellt, das sich je nach Bildschirmbreite anpasst.

Das Anmeldefeld besteht aus drei Style Boxes:

Eine Box für den Titel der Anwendung.
Eine Box für die Anmelde- und Passwortfelder.
Einem Container, der beide Boxen umschließt.

Der Container verwendet display: flex; und flex-wrap: wrap;, um die Reaktionsfähigkeit zu gewährleisten. Wenn die Boxen zu breit werden, stapeln sie sich vertikal, anstatt nebeneinander zu liegen.

Für die beiden anderen Boxen wird die Breite je nach Bildschirmgröße zwischen 50 % und 100 % geändert. Aus ästhetischen Gründen wird auch der Rahmen geändert.

Hier das CSS-Beispiel für den Kasten, der je nach Bildschirmgröße links oder oben positioniert ist:

self {
    border-radius: 10px 0 0 10px;
    Breite: 50%;
    Höhe: 100%;
}

@media screen and (max-width: 800px) {
    selbst {
      border-radius: 10px 10px 0 0;
      Breite: 100%;
      Höhe: fit-content;
    }
}

Das Ergebnis in Bildern:

Ein schneller Tipp für den Anfang

Wenn Sie unsicher sind, wie Sie Ihr CSS strukturieren sollen, bietet Qodly eine praktische Funktion. Sie können Stile über Widget-Eigenschaften definieren und sie als CSS exportieren.

So können Sie sehen, wie eine CSS-Regel aussieht und Ihre eigenen CSS-Klassen leicht erstellen und ändern.

Weiter gehen

Wir hoffen, dass diese Beispiele die Leistungsfähigkeit und Flexibilität von CSS in Qodly Studio verdeutlicht haben. Wenn Sie noch mehr erfahren möchten, sehen Sie sich diese zusätzlichen Ressourcen an:

Mit CSS können Sie Ihre Qodly-Anwendungen in einzigartige, professionelle visuelle Erlebnisse verwandeln und gleichzeitig die Verwaltung Ihrer Stile vereinfachen. Legen Sie los und teilen Sie Ihre Kreationen oder stellen Sie Ihre Fragen im Forum!