Stil (Style)

Das rote Quadrat ist der Bereich zur Stilsetzung.

Was unter Stil verstanden wird, ist die Dekoration des sichtbaren Aspekts des gewählten Widgets, wie Schriftart, Farbe, Größe, Hintergrund, vertikale und horizontale Breite sowie Abstand und Rahmen.

Auch der Stil wird wie oben anhand des Button-Widgets erklärt.

(1) Typografie

• Familie: Legt die Schriftart fest.

• Größe: Legt die Schriftgröße fest.

• Gewicht: Legt die Schriftstärke fest.

• Transformation: Legt die Groß- und Kleinschreibung fest.

• Stil: Legt die Neigung des Textes fest.

• Dekoration: Fügt dem Text eine Linie hinzu.

• Zeilenhöhe: Passt den Abstand über und unter dem Text an.

• Buchstabenabstand: Passt den seitlichen Abstand zwischen Buchstaben an.

• Wortabstand: Passt den seitlichen Abstand zwischen Wörtern an.

Buchstabenabstand und Wortabstand können etwas verwirrend sein. Wenn Sie sich die tatsächliche Anwendung sehen, wird es leichter verständlich sein.

(2) Textschatten

Ich verwende diese Funktion nicht oft, aber sie fügt dem Text einen Schattierungs-Effekt hinzu. Bitte beachten Sie die untenstehenden Schaltflächen.

Die Einstellungen variieren, aber um einen klaren Unterschied zu zeigen, habe ich die Effekte übertrieben.

(3) Normal / Hover

Haben Sie nicht auch schon oft gesehen, dass die Farben eines Buttons sich ändern oder ein Gefühl des Funktionierens erzeugen, wenn Sie die Maus darüber bewegen? Das ist die Funktion, die hier eingerichtet wird.

Hover bezieht sich normalerweise auf Mouse hover, aber wie bei einem Helikopter, der an einem Ort schwebt, wird es auch als Hovering beschrieben. Wenn die Maus über einen Button bewegt wird, nennen wir es Hover.

Normal bezieht sich auf die Einstellungen, wie der Button angezeigt wird, wenn er nicht berührt wird, während Hover die Veränderungen definiert, wenn die Maus über dem Button schwebt.

• Textfarbe: Legt die Farbe des Textes fest.

• Hintergrundtyp: Legt fest, ob die Hintergrundfarbe einfarbig oder mit einem Verlauf versehen ist.

• Farbe: Definiert die Farbe des Hintergrunds, wenn dieser festgelegt wurde.

• Rahmenfarbe: Definiert die Farbe des Rahmens (Border).

• Hover-Animation: Legt die Effekte für den Hover-Zustand fest.

Jetzt schauen Sie sich die unten eingerichteten Buttons an, um deren Effekte zu überprüfen.

(4) Rahmen

Der Rahmen, den ich oben kurz erwähnt habe, ist einfach gesagt der Rand.

Es handelt sich um die Einstellung des Rahmens des Widgets. Ganz einfach.

• Rahmentyp: Legt fest, wie der Rahmen gestaltet wird. Durchgehende Linie, gestrichelt usw.

• Breite: Legt die Dicke des Rahmens fest.

• Rahmenradius: Bestimmt den Radius der Ecken des Rahmens.

• Box-Schatten: Ähnlich wie die oben beschriebene Schattierungsfunktion.

Überprüfen Sie die Unterschiede mit den unten festgelegten Buttons.

(5) Innenabstand

Ein neues Konzept taucht auf. Innenabstand erinnert vielleicht an die Winterkleidung, nicht wahr? Der Begriff Innenabstand bedeutet in der Tat Füllmaterial, was auch hier zutrifft.

Der Innenabstand ist die Funktion, die zusätzlichen Abstand innerhalb des Rahmens des Widgets hinzufügt.

Es gibt eine nachfolgende Einstellung namens Außenabstand, die sehr ähnlich ist und oft zu Verwirrung führt. Zur Erläuterung: Ich verwende typischerweise den Innenabstand, um die Größe des Widgets zu erhöhen, während ich den Außenabstand verwende, um die Größe des Widgets zu verringern.

Also, wie immer sollten Sie sich die Unterschiede im Bereich unterhalb der Buttons ansehen.

Spüren Sie den Unterschied?

Die Zahl neben den Abständen zeigt an, ob Sie die Einstellungen in Pixel (px) oder in Prozent des Gesamtdesigns vornehmen.

Die Ketten-Symbolfunktion bedeutet einfach, dass es sich um eine Synchronisation (SYNC) Funktion handelt. Ähnlich wie bei der Klimaanlage im Auto, wo man Fahrersitz und Beifahrersitz synchronisieren kann. Wenn Sie diese Option aktivieren, werden die Werte für oben, unten, rechts und links mit derselben Zahl eingestellt.

Damit endet die Erklärung des Stil-Einstellungsbereichs des Button-Widgets.

Erweiterte Einstellungen

– Inhalt wird noch ergänzt –