Zum Hauptinhalt springen

Splitter

In ChatGPT öffnen
Shadow dwc-splitter 24.00
Java API

Die Splitter-Komponente, die zum Teilen und Ändern der Größe von Inhalten in Ihrer App konzipiert ist, fasst zwei Größenänderbare Komponenten zusammen: die Master- und die Detail-Komponenten. Ein Trennzeichen trennt diese Komponenten und ermöglicht es den Benutzern, die Größe jeder Komponente dynamisch nach ihren Vorlieben anzupassen.

Code anzeigen

Minimale und maximale Größe​

Die Splitter-Komponente bietet Methoden zur Festlegung der minimalen und maximalen Größen für ihre Panels, sodass Sie das Größenänderungsverhalten der Komponenten innerhalb des Splitter steuern können. Wenn Benutzer versuchen, Panels über die angegebenen minimalen oder maximalen Größen hinaus zu ändern, erzwingt die Splitter-Komponente diese Einschränkungen, damit die Panels innerhalb der definierten Grenzen bleiben.

Größen festlegen​

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

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

Code anzeigen

Orientierung​

Sie können die Orientierung in der Splitter-Komponente konfigurieren, sodass Sie Layouts erstellen können, die auf bestimmte Designanforderungen zugeschnitten sind. Durch die Angabe der Orientierung arrangiert die Komponente die Panels horizontal oder vertikal und bietet Flexibilität im Layout-Design.

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

Code anzeigen

Relative Position​

Um die Anfangsposition der Trennleiste in der Splitter-Komponente festzulegen, verwenden Sie setPositionRelative. Diese Methode nimmt einen numerischen Wert von 0 bis 100, der den Prozentsatz des angegebenen Raums im Splitter darstellt, und zeigt die Trennleiste beim angegebenen Prozentsatz der Gesamtbreite an:

Code anzeigen

Verschachtelung​

Die Verschachtelung von Splittern ermöglicht es Ihnen, komplexe Layouts mit Ebenen von größenveränderbaren Panels zu erstellen. Sie ermöglicht die Erstellung von anspruchsvollen Benutzeroberflächen mit granularer Kontrolle über die Anordnung und Größenänderung 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 Größenänderungsmöglichkeiten. Das folgende Programm demonstriert dies:

Code anzeigen

Automatisches Speichern​

Die Splitter-Komponente enthält eine AutoSave-Option, mit der der Zustand der Panelgrößen im lokalen Speicher gespeichert wird, um die Abmessungen zwischen Neuladen konsistent zu halten.

Wenn Sie die Auto-Save-Konfiguration festlegen, speichert die Splitter-Komponente automatisch den Zustand der Panelgrößen im lokalen Speicher des Webbrowsers. Dies stellt sicher, dass die Größen, die Benutzer für Panels wählen, über Seitenaktualisierungen oder Browsersitzungen hinweg bestehen bleiben, wodurch die Notwendigkeit manueller Anpassungen verringert wird.

Zustand bereinigen​

Um den Splitter programmgesteuert auf die Standardeinstellungen und Abmessungen zurückzusetzen, rufen Sie die Methode cleanState() auf, um alle gespeicherten Zustanddaten, die mit der Splitter-Komponente im lokalen Speicher des Webbrowsers verbunden sind, zu entfernen.

Code anzeigen

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

Ein Klick auf die Schaltfläche "Zustand löschen" ruft die Methode cleanState() auf und aktualisiert das Browserfenster, um die ursprünglichen Abmessungen anzuzeigen.

Styling​

Loading...

Beste Praktiken​

Um eine optimale Benutzererfahrung bei der Verwendung der Splitter-Komponente sicherzustellen, beachten Sie die folgenden besten Praktiken:

  • Anpassen basierend auf Inhalten: Berücksichtigen Sie beim Festlegen der Orientierung und der Anfangsgrößen der Panels die Priorität des Inhalts. Beispielsweise sollte in einem Layout mit einer Navigationsleiste und einem Hauptinhaltbereich die Leiste typischerweise schmaler bleiben, mit einer festgelegten minimalen Größe für eine klare Navigation.

  • Strategische Verschachtelung: Das Verschachteln von Splittern kann vielseitige Layouts schaffen, kann jedoch die Benutzeroberfläche komplizieren und die Leistung beeinflussen. Planen Sie Ihre verschachtelten Layouts, um sicherzustellen, dass sie intuitiv sind und die Benutzererfahrung verbessern.

  • Benutzereinstellungen beachten: Verwenden Sie die AutoSave-Funktion, um die Anpassungen der Benutzer über Sitzungen hinweg zu speichern und die Benutzererfahrung zu verbessern. Bieten Sie eine Option an, damit Benutzer zu den Standardeinstellungen zurückkehren können.