Zum Hauptinhalt springen

Splitter

In ChatGPT öffnen
Schatten dwc-splitter 24.00
Java API

Die Splitter-Komponente, die dazu konzipiert ist, Inhalte innerhalb Ihrer App zu teilen und zu skalieren, umfasst zwei skalierbare Komponenten: die Master- und die Detailkomponenten. Ein Trennstrich trennt diese Komponenten und ermöglicht es den Benutzern, die Größe jeder Komponente dynamisch nach ihren Wünschen anzupassen.

Erstellung eines Splitters​

Erstellen Sie einen Splitter, indem Sie zwei Komponenten an seinen Konstruktor übergeben. Die erste wird das Master-Panel und die zweite das Detail-Panel.

Code anzeigen

Minimale und maximale Größe​

Die Splitter-Komponente bietet Methoden zum Festlegen von Mindest- und Höchstgrößen für ihre Paneele, wodurch Sie das Skalierungsverhalten der Komponenten innerhalb des Splitters steuern können. Wenn Benutzer versuchen, Paneele über die festgelegten Mindest- oder Höchstgrößen hinaus zu skalieren, erzwingt die Splitter-Komponente diese Einschränkungen, sodass die Paneele innerhalb der definierten Grenzen bleiben.

Größen festlegen​

Die Methode setMasterMinSize(String masterMinSize) gibt die Mindestgröße für das Master-Panel des Splitters an. Ebenso gibt die Methode setMasterMaxSize(String masterMaxSize) die Höchstgröße für das Master-Panel an.

Sie können Größen mit beliebigen gültigen CSS-Einheiten angeben, wie unten gezeigt:

Code anzeigen

Ausrichtung​

Sie können die Ausrichtung in der Splitter-Komponente konfigurieren, um Layouts zu erstellen, die auf spezifische Designanforderungen zugeschnitten sind. Durch Festlegen der Ausrichtung arranges die Komponente die Paneele horizontal oder vertikal, was Flexibilität im Layoutdesign bietet.

Um die Ausrichtung zu konfigurieren, verwenden Sie das unterstützte Ausrichtungs-Enum, um anzugeben, ob der Splitter horizontal oder vertikal gerendert werden soll:

Code anzeigen

Relative Position​

Um die anfängliche Position des Trennstrichs in der Splitter-Komponente festzulegen, verwenden Sie setPositionRelative. Diese Methode nimmt einen numerischen Wert von 0 bis 100, der den Prozentsatz des gegebenen Raums im Splitter darstellt, und zeigt den Trennstrich auf dem gegebenen Prozentsatz der Gesamtbreite an:

Code anzeigen

Verschachtelung​

Die Verschachtelung von Splittern ermöglicht es Ihnen, komplexe Layouts mit mehreren skalierbaren Paneelen zu erstellen. Sie ermöglicht die Erstellung anspruchsvoller Benutzeroberflächen mit granularer Steuerung über das Arrangement und die Skalierung von Inhalten.

Um Splitter-Komponenten zu verschachteln, instanziieren Sie neue Splitter-Instanzen und fügen Sie sie als Kinder zu bestehenden Splitter-Komponenten hinzu. Diese hierarchische Struktur ermöglicht die Erstellung von mehrstufigen Layouts mit flexiblen Skalierungsmöglichkeiten. Das folgende Programm veranschaulicht dies:

Code anzeigen

Automatisches Speichern​

Die Splitter-Komponente umfasst eine AutoSave-Option, die den Zustand der Paneelgrößen im lokalen Speicher speichert, um die Dimensionen zwischen Neuladungen konsistent zu halten.

Wenn Sie die Auto-Save-Konfiguration festlegen, speichert die Splitter-Komponente automatisch den Zustand der Paneelgrößen im lokalen Speicher des Webbrowsers. Dies stellt sicher, dass die Größen, die Benutzer für Paneele auswählen, über Seitenneuladungen oder Browsersitzungen hinweg bestehen bleiben, wodurch der Bedarf an manuellen Anpassungen verringert wird.

Zustand bereinigen​

Um den Splitter programmgesteuert auf die Standardeinstellungen und -dimensionen zurückzusetzen, rufen Sie die Methode cleanState() auf, um alle gespeicherten Zustandsdaten, die sich auf die Splitter-Komponente beziehen, aus dem lokalen Speicher des Webbrowsers zu entfernen.

Code anzeigen

Im vorhergehenden Demo aktiviert jede Splitter-Instanz die AutoSave-Funktion, indem sie die Methode setAutosave aufruft. Dies stellt sicher, dass die Paneelgrößen automatisch im lokalen Speicher gespeichert werden. Wenn der Browser neu geladen wird, bleiben die Größen dieser Splitter gleich.

Durch Klicken auf die Schaltfläche "Zustand zurücksetzen" wird die Methode cleanState() aufgerufen und das Browserfenster aktualisiert, um die ursprünglichen Dimensionen anzuzeigen.

Stil​

Loading...

Best Practices​

Um ein optimales Benutzererlebnis beim Verwenden der Splitter-Komponente sicherzustellen, berücksichtigen Sie die folgenden Best Practices:

  • Anpassung basierend auf Inhalt: Berücksichtigen Sie bei der Entscheidung über die Ausrichtung und die anfänglichen Größen der Paneele die Priorität des Inhalts. In einem Layout mit einer Navigationsleiste und einem Hauptinhaltbereich sollte die Navigationsleiste typischerweise schmaler bleiben und eine feste Mindestgröße aufweisen, um eine klare Navigation zu gewährleisten.

  • Strategische Verschachtelung: Die Verschachtelung von Splittern kann vielseitige Layouts schaffen, aber die Benutzeroberfläche komplizieren und die Leistung beeinträchtigen. Planen Sie Ihre verschachtelten Layouts so, dass sie intuitiv sind und die Benutzererfahrung verbessern.

  • Benutzerpräferenzen im Gedächtnis behalten: Verwenden Sie die AutoSave-Funktion, um Benutzereinstellungen über Sitzungen hinweg zu speichern, was die Benutzererfahrung verbessert. Bieten Sie eine Option an, die es den Benutzern ermöglicht, auf die Standardeinstellungen zurückzusetzen.