Layout und Stil

App Studio bietet für das Layout der Apps umfangreiche Möglichkeiten der Anpassung, wobei verschiedene Container-Steuerelemente und Formgebungsmöglichkeiten für jedes Steuerelement verwendet werden

Anordnung Ihrer Steuerelemente

Ein individuelles Seitenlayout kann ganz einfach mithilfe des Steuerelements Containerlayout erstellt werden. Auf diese Weise können Sie mehrere Steuerelemente mit einer bestimmten Positionierung gruppieren, während Sie das Layout und die Ausrichtung eines einzelnen Steuerelements (d. h. des Containers) konfigurieren.

So passen Sie die Position der Steuerelemente innerhalb einer Seite oder eines Containers an:

1. Wählen Sie die Seite oder den Container aus, in dem sich das gewünschte Steuerelement befindet.

2. Wählen Sie im Bereich Stil das Layout (Vertikal, Horizontal) aus sowie die Steuerelementausrichtung (Links, Mitte, Rechts, Strecken, Oben, Mitte, Unten, Verteilen).

   Hinweis:

   Standardmäßig fügen sich Steuerelemente in eine Zeile ein und übernehmen die Ausrichtung des übergeordneten Containers.

3. (Optional) Überschreiben Sie für das gewünschte Steuerelement die geerbte Ausrichtung, indem Sie eine der verfügbaren Optionen auswählen. Um die Standardausrichtung des Containers wiederherzustellen, heben Sie die Markierung jeder überschriebenen Ausrichtung auf.
4. (Optional) Wählen Sie für den gewünschten Container oder die gewünschte Seite die Option Umbrechen zulassen aus, um die Steuerelemente auf mehrere Zeilen umzubrechen.

Ändern der Größe Ihrer Steuerelemente

Die Größe der Steuerelemente wird standardmäßig automatisch angepasst. Mit „Auto“ kann das Steuerelement die Größe des Inhalts annehmen. Wenn beispielsweise Breite und Höhe eines Schaltflächensteuerelements auf auto festgelegt sind, wird die Größe der Schaltfläche basierend auf dem Text in der Schaltfläche vergrößert oder verkleinert.

Die spezifische Höhe und Breite kann ebenfalls festgelegt werden. Die Optionen Min. Breite/Höhe und Max. Breite/Höhe sind unter dem Drei-Punkte-Symbol (…) im Abschnitt Größe des Bereichs Stil verfügbar.

Die Maßeinheiten sind %, px (Pixel) und em (relativ zur Schriftgröße des Elements). 3em bedeutet z. B. die dreifache Größe der aktuellen Schriftart.

Um die Maßeinheiten auszuwählen, verwenden Sie die Dropdownmenüs der Größenfelder oder geben Sie die Einheit ein. Um beispielsweise eine Breite von 100 Pixeln festzulegen, geben Sie 100px in das Feld Breite ein.

Hinweis:

Wenn keine Maßeinheiten angegeben sind, wird das System standardmäßig Pixel (px) festlegen.

Anpassen der Schriftart

Um die Art und Weise zu ändern, wie Text in Ihrer App angezeigt wird, passen Sie die Attribute im Abschnitt Schriftart an, z. B. Schriftfamilie, Größe, Farbe oder Stil.

Sie können zwischen RGB-, HEX- und HSL-Farbformaten wechseln, indem Sie auf die Pfeile neben dem Farbwert klicken.

Arbeiten mit Rahmen

Der Abschnitt „Rahmen‟ verfügt über drei Eigenschaften:

• Rahmenstärke
• Rahmenfarbe
• Eckenradius.

Pixel sind die Maßeinheit für diese Attribute.

Einrichten von Abständen bei Steuerelementen

Die Abstände von Steuerelementen und Containern können mithilfe der Attribute in den Abschnitten Seitenrand und Abstand erfolgen.

Mit der Option „Seitenränder“ wird der Abstand um die Steuerelemente eingerichtet.

Mit der Option „Abstände“ wird ein Freiraum zwischen dem Steuerelement und dem darin enthaltenen Inhalt eingerichtet.

Um die Werte Oben/Unten und Links/Rechts zu trennen und sie unabhängig festzulegen, klicken Sie auf die Schaltfläche Link rechts neben dem Abschnitt Seitenrand/Abstand.

Hinweis:

Sie können den Seitenrand und den Abstand von Containersteuerelementen festlegen, während Sie für die meisten Steuerelemente nur den Seitenrand festlegen können.

Ändern der Hintergrundfarbe

Sie können die Hintergrundfarbe Ihrer Steuerelemente mithilfe eines der drei Farbformate ändern:

• RGB
• HEX

• HSL

  Klicken Sie dazu auf die Pfeile neben den Farbwerten.