Splitter

Openen in ChatGPT

Shadow dwc-splitter 24.00

Java API

De Splitter component, ontworpen om inhoud binnen uw app te verdelen en te schalen, encapsuleert twee schaalbare componenten: de master- en detailcomponenten. Een scheidingslijn scheidt deze componenten, waardoor gebruikers de grootte van elke component dynamisch kunnen aanpassen aan hun voorkeuren.

Toon Code

Java

Min en max grootte

De Splitter component biedt methoden om minimum- en maximumgroottes voor zijn panelen in te stellen, waardoor u het schalingsgedrag van de componenten binnen de Splitter kunt beheersen. Wanneer gebruikers proberen panelen buiten de opgegeven min- of max-groottes te schalen, handhaaft de splittercomponent deze beperkingen, zodat panelen binnen de gedefinieerde grenzen blijven.

Groottes instellen

De setMasterMinSize(String masterMinSize) methode specificeert de minimumgrootte voor het masterpaneel van de splitter. Evenzo specificeert de setMasterMaxSize(String masterMaxSize) methode de maximumgrootte voor het masterpaneel.

U kunt groottes opgeven met behulp van geldige CSS-eenheden, zoals hieronder weergegeven:

Toon Code

Java

Oriëntatie

U kunt de oriëntatie in de Splitter component configureren, waardoor u lay-outs kunt creëren die zijn afgestemd op specifieke ontwerpeisen. Door de oriëntatie op te geven, rangschikt de component panelen horizontaal of verticaal, wat veelzijdigheid in lay-outontwerp biedt.

Om de oriëntatie te configureren, gebruikt u de ondersteunde oriëntaties Enum om te specificeren of de Splitter horizontaal of verticaal moet worden weergegeven:

Toon Code

Java

Relatieve positie

Om de initiële positie van de scheidingslijn in de Splitter component in te stellen, gebruikt u setPositionRelative. Deze methode neemt een numerieke waarde van 0 tot 100 die het percentage van de gegeven ruimte in de Splitter vertegenwoordigt en toont de scheidingslijn op het opgegeven percentage van de totale breedte:

Toon Code

Java

Nesting

Nesting van Splitters stelt u in staat om complexe lay-outs te creëren met niveaus van schaalbare panelen. Het maakt de creatie van geavanceerde gebruikersinterfaces mogelijk met granulaire controle over de rangschikking en schaling van inhoud.

Om Splitter-componenten te nesten, instantiëert u nieuwe Splitter instanties en voegt u ze als kinderen toe aan bestaande Splitter componenten. Deze hiërarchische structuur maakt de creatie van multi-niveau lay-outs met flexibele schalingsmogelijkheden mogelijk. Het onderstaande programma demonstreert dit:

Toon Code

Java

Autosave

De Splitter component bevat een AutoSave-optie, die de status van panelgroottes opslaat in de lokale opslag om de afmetingen consistent te houden tussen herlaadacties.

Wanneer u de auto-save configuratie instelt, slaat de Splitter component automatisch de status van de panelgroottes op in de lokale opslag van de webbrowser. Dit zorgt ervoor dat de groottes die gebruikers voor panelen kiezen, persistent zijn tijdens het herladen van de pagina of browser sessies, waardoor de behoefte aan handmatige aanpassingen wordt verminderd.

Het wissen van de status

Om de Splitter programatisch terug te zetten naar de standaardinstellingen en afmetingen, roept u de cleanState() methode aan om eventuele opgeslagen statusgegevens met betrekking tot de Splitter component uit de lokale opslag van de webbrowser te verwijderen.

Toon Code

Java

In de voorgaande demo activeert elke Splitter-instantie de AutoSave-functie door de setAutosave methode aan te roepen. Dit zorgt ervoor dat de panelgroottes automatisch worden opgeslagen in de lokale opslag. Wanneer de browser wordt herladen, blijven de groottes van deze splitters hetzelfde.

Klikken op de knop "Status wissen" roept de cleanState() methode aan en ververst het browservenster om de oorspronkelijke afmetingen weer te geven.

Stijl

Loading...

Best practices

Om een optimale gebruikerservaring te garanderen bij het gebruik van de Splitter component, houd rekening met de volgende best practices:

• Aanpassen op basis van inhoud: Bij het bepalen van de oriëntatie en initiële groottes van panelen, houdt rekening met de prioriteit van de inhoud. Bijvoorbeeld, in een lay-out met een navigatiesidebar en een hoofdinhoudsgebied, moet de sidebar meestal smaller blijven met een ingestelde minimumgrootte voor duidelijke navigatie.

• Strategisch nesting: Nesting van splitters kan veelzijdige lay-outs creëren, maar kan de UI compliceren en de prestaties beïnvloeden. Plan uw geneste lay-outs om ervoor te zorgen dat ze intuïtief zijn en de gebruikerservaring verbeteren.

• Vergeet gebruikersvoorkeuren niet: Gebruik de AutoSave-functie om gebruikersaanpassingen over sessies heen te onthouden, wat de gebruikerservaring verbetert. Bied een optie om gebruikers toe te staan om terug te keren naar de standaardinstellingen.