Containerlayout

Verwenden Sie Containerlayouts, um ein komplexes App-Layout zu erstellen.

Wenn ein Containerlayout-Steuerelement hinzugefügt wird, ist standardmäßig ein einzelner Container verfügbar. Um weitere einfache Container hinzuzufügen, klicken Sie auf das Symbol „+“ neben den vorhandenen Containern.

Um einen Container innerhalb des Layouts neu zu positionieren, ziehen Sie den Container an die gewünschte Position.

Ziehen Sie zum Ändern der Größe von Containern an der Containerecke.

Um einen Container zu löschen, wählen Sie ihn aus und verwenden Sie die Entf-Taste auf Ihrer Tastatur. Klicken Sie alternativ in der Strukturansicht mit der rechten Maustaste auf den Container und wählen Sie Löschen aus.

Das Containerlayout-Steuerelement hat zwei Arten von Eigenschaften:

• Einen Satz für das Containerlayout

• Einen Satz für jeden Container innerhalb des Layouts

Hinweis:

Wir empfehlen die Verwendung von Containerlayout-Steuerelementen auf Seitenebene, um die Seite in verschiedene Abschnitte zu strukturieren.

Verwenden Sie zum Ausrichten und Positionieren von Steuerelementen innerhalb einer Seite Container-Steuerelemente.

Wichtig: Für eine einfache Wartung und Konsistenz zwischen Entwurfszeit und Laufzeit vermeiden Sie die Verschachtelung von Containerlayouts.

Eigenschaften Containerlayout

Allgemein

• Ausgeblendet – Bei „true“ wird das Steuerelement während der Runtime ausgeblendet.

• Deaktiviert – Bei „true“ wird das Steuerelement während der Laufzeit deaktiviert.

Events

Keine Ereignisse.

Stil

• Hintergrundfarbe – Die Hintergrundfarbe des Layouts.
• Schriftart – Legt die Schriftfamilie für das Containerlayout fest. Alle Container innerhalb des Layouts verwenden dieselbe Schriftfamilie.
• Seitenrand – Der Rand des Layouts. Standardmäßig ist ein Seitenrand von 0px festgelegt. Die Randeigenschaften Oben/Unten und Links/Rechts werden kombiniert. Diese Eigenschaften können mit der Schaltfläche Link rechts neben dem Abschnitt Seitenrand getrennt werden.
• Abstand – Der Abstand des Layouts. Standardmäßig ist ein Abstand von 0px festgelegt. Die Randeigenschaften Oben/Unten und Links/Rechts werden kombiniert. Diese Eigenschaften können mit der Schaltfläche Link rechts neben dem Abschnitt Abstand getrennt werden.
• Größe – Die Breite und Höhe des Layouts. Standardmäßig ist die Breite auf 100px festgelegt, während die Höhe auf auto festgelegt ist, damit das Layout basierend auf den darin enthaltenen Containern erweitert werden kann.

Containereigenschaften

Allgemein

• Tooltip – Kurzinfo, die am Container angezeigt wird. Verwenden Sie diese Option, um zusätzliche Informationen über das Steuerelement bereitzustellen.

• Ausgeblendet – Bei „true“ wird das Steuerelement während der Runtime ausgeblendet.

• Deaktiviert – Bei „true“ wird das Steuerelement während der Laufzeit deaktiviert.

Events

• Angeklickt – Konfigurieren Sie, was passieren soll, wenn auf den Container geklickt wird.

Stil

• Layout – Legen Sie fest, wie die Steuerelemente innerhalb des Containers positioniert werden:

  • Horizontal/Vertikal – Die Ausrichtung der Steuerelemente.
  • Ausrichtung – Die Ausrichtung der Steuerelemente innerhalb des Containers.
  • Umbrechen zulassen – Wenn diese Option ausgewählt ist, werden die Steuerelemente im Container umgebrochen.

  • Bildlauf zulassen – Wenn diese Option ausgewählt ist, kann innerhalb des Containers gescrollt werden.

• Hintergrundfarbe – Die Hintergrundfarbe des Containers.
• Rahmen – Der Rahmen für das Steuerelement. Rahmenstärke, Farbe und Radius können konfiguriert werden.
• Schriftart – Legt die Schriftfamilie für das Containerlayout fest. Alle Steuerelemente innerhalb des Containers haben dieselbe Schriftfamilie. Standardmäßig erbt das Steuerelement die Schriftfamilie des unmittelbar übergeordneten Containers, der durch das Schlüsselwort „Geerbt“ angegeben wird.
• Seitenrand – Der Rand des Layouts. Standardmäßig ist ein Seitenrand von 0px festgelegt. Die Randeigenschaften Oben/Unten und Links/Rechts werden kombiniert. Diese Eigenschaften können mit der Schaltfläche Link rechts neben dem Abschnitt Seitenrand getrennt werden.
• Abstand – Der Abstand des Layouts. Standardmäßig ist ein Abstand von 0px festgelegt. Die Randeigenschaften Oben/Unten und Links/Rechts werden kombiniert. Diese Eigenschaften können mit der Schaltfläche Link rechts neben dem Abschnitt Abstand getrennt werden.

• Erweitert – Zeigt die Flex-Eigenschaften des Steuerelements an.

  • Flex-Basis – Legt die ursprüngliche Größe eines flexiblen Elements fest, bevor der zusätzliche Platz verteilt oder entfernt wird (px, %, em, auto).

  • Flexzunahme – Wenn zusätzlicher Platz verfügbar ist, bestimmt dieser Wert, wie stark ein Flex-Element im Verhältnis zu den restlichen Elementen wachsen soll.

  • Flexzunahme – Wenn der Platz nicht ausreicht, gibt dieser Wert an, wie stark ein Flex-Element im Vergleich zu den anderen Elementen verkleinert werden soll.

    Weitere Informationen finden Sie in der Dokumentation zum Mozilla Developer Network.