Container

Die Container-Komponente ist ein vielseitiger Baustein für Ihre Dynamic Components. Sie dient als Grundlage zur Organisation und Gestaltung anderer Komponenten.

Combobox-Tutorial-Beispiele

User Activity Report

---

Einrichtung Ihr Container

1. Ziehen Sie den Container und ziehen Sie andere Komponenten hinein

Die Container-Komponente hat einen einzelnen Slot, in den Sie jede andere Avonni-Dynamische Komponente per Drag & Drop einfügen können. Dadurch können Sie komplexe Layouts erstellen und verwandte Komponenten gruppieren. Zum Beispiel könnten Sie mehrere Komponenten in einen Container ziehen, um einen Abschnitt mit einer bestimmten Hintergrundfarbe oder einem Bild zu erstellen.

Wie man eine andere Komponente in den Container platziert

2. Passen Sie den Container an

• Variante: Wählen Sie einen visuellen Stil für den Container:

  • Standard: Ein einfacher Container ohne zusätzliche Gestaltung.

  • Box: Fügt einen dezenten Rand und Innenabstand hinzu.

  • Karte: Erstellt einen kartenähnlichen Container mit Schatteneffekt.

• Hintergrundbild: Laden Sie ein Bild für den Hintergrund des Containers hoch.

• Überlagerungsfarbe: Fügen Sie dem Hintergrundbild eine halbtransparente Überlagerungsfarbe hinzu, um die Lesbarkeit zu verbessern oder einen bestimmten visuellen Effekt zu erzielen.

Warum die Container-Komponente verwenden?

Die Container-Komponente ist ein hervorragendes Baustein-Element, um gut strukturierte und optisch ansprechende Layouts für Avonni-Dynamische Komponenten zu erstellen. Sie fungiert als Hülle für andere Komponenten und bietet mehrere wichtige Vorteile:

Organisation und Struktur

• Gruppierung: Gruppieren Sie logisch verwandte Komponenten. Dies verbessert die Organisation Ihrer Dynamischen Komponente und erleichtert das Verstehen und Pflegen.

• Visuelle Hierarchie: Erstellen Sie eine klare visuelle Hierarchie, indem Sie Elemente innerhalb von Containern gruppieren. Dies hilft den Benutzern, die Beziehungen zwischen verschiedenen Teilen Ihrer Benutzeroberfläche zu verstehen.

Stil und Layout

• Konsistente Gestaltung: Wenden Sie Stile (Farben, Ränder, Innenabstände usw.) auf den Container an, die angewendet werden auf alle Komponenten innerhalb des Containers. Dies gewährleistet visuelle Konsistenz und erspart Ihnen, jede Komponente einzeln zu gestalten.

• Layout-Steuerung: Steuern Sie das Layout der enthaltenen Komponenten. Oft können Sie Eigenschaften am Container festlegen, um Ausrichtung, Abstände und andere Layout-Aspekte zu kontrollieren.

• Hintergrund und Ränder: Fügen Sie einfach Hintergrundfarben oder Rahmen um eine Gruppe von Komponenten hinzu.

Flexibilität und Wiederverwendbarkeit

• Einfaches Verschieben/Duplizieren: Verschieben oder duplizieren Sie eine gesamte Gruppe von Komponenten einfach durch Ziehen oder Kopieren des Containers. Das ist viel einfacher, als jede Komponente einzeln zu verschieben.

• Verschachtelung von Komponenten: Sie können sogar Container verschachteln innerhalb andere Container, um komplexe und hierarchische Layouts zu erstellen.

Vererbte Sichtbarkeit

• Vereinfachte Sichtbarkeitssteuerung: Ein entscheidendes Merkmal des Containers ist, dass es die Sichtbarkeit steuert seiner enthaltenen Komponenten. Wenn Sie die Sichtbarkeit des Containers Sichtbar Eigenschaft des Range-Sliders an false (oder sie an eine Bedingung binden, die zu false), werden alle Komponenten innerhalb des Containers ausgeblendet, unabhängig von ihren individuellen Sichtbar Einstellungen. Dies vereinfacht die Verwaltung der Sichtbarkeit ganzer Abschnitte Ihrer Benutzeroberfläche.

Im Wesentlichen bietet die Container-Komponente eine leistungsstarke Möglichkeit, mehrere Komponenten zu gruppieren, zu gestalten, zu organisieren und deren Sichtbarkeit zu steuern, was zu besser wartbaren und optisch ansprechenderen Dynamischen Komponenten führt.