Passen Sie Ihre Qodly-Oberflächen mit CSS an



Tipps

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.

This is a login page for a "Performance Review" system. The design is split into two sections: Left Side (Red Background) Displays the Performance Review title with an icon of a building and a person. Right Side (White Background) Contains a "Welcome!" message. Two input fields for Email and Password, with the password field having an eye icon to toggle visibility. A "Forgot your password?" link. A red "Sign in" button for user authentication. It has a clean and modern design with a red and white color scheme. Let me know if you need any insights or modifications!

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“.

blank

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.

blank

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

blank

Dunkles Thema

blank

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.

A dark-themed user interface panel labeled "Display," containing various layout configuration options. The "Direction" dropdown is set to "Row." Below it, there is a "Gap" input field with "PX" as the unit. Several sets of alignment controls are displayed, including: - "Justify" with multiple icons representing different content positioning options. - "Align" with icons for vertical alignment choices. - "Wrap" with toggle icons for wrapping behavior. - "Content" with additional alignment options.

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:

A login form for a "Performance Review" system with a red header containing an icon of a building and a person. Below the header, "Welcome!" is displayed in bold text. The form includes two labeled input fields: "Email" and "Password," with the password field featuring a visibility toggle icon. A "Forgot your password?" link is present below the input fields. At the bottom, a red "Sign in" button is centered.

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.

blank

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!

Discuss

Tags , , , , , ,

Vanessa Talbot
Product Owner - Vanessa Talbot kam im Juni 2014 zum 4D Programmteam. Als Product Owner ist sie für das Schreiben der User Stories und deren Umsetzung in funktionale Spezifikationen zuständig. Ihre Aufgabe ist es auch, sicherzustellen, dass die Implementierung der Funktionen den Anforderungen des Kunden entspricht. Seit ihrer Ankunft hat sie an der Definition der wichtigsten Funktionen in 4D gearbeitet. Sie hat an den meisten der neuen Funktionen für präemptives Multi-Threading gearbeitet und auch an einem sehr komplexen Thema: der neuen Architektur für erstellte Anwendungen. Vanessa hat einen Abschluss von der Telecom Saint-Etienne. Sie begann ihre Karriere am Criminal Research Institute als Entwicklerin für die audiovisuelle Abteilung. Sie hat auch in den Bereichen Medien und Medizin als Expertin für technischen Support, Produktion und die Dokumentation neuer Funktionen gearbeitet.