Passer au contenu principal

Splitter

Ouvrir dans ChatGPT
Shadow dwc-splitter 24.00
Java API

Le composant Splitter, conçu pour diviser et redimensionner le contenu de votre application, encapsule deux composants redimensionnables : le composant maître et le composant de détail. Un diviseur sépare ces composants, permettant aux utilisateurs d'ajuster dynamiquement la taille de chaque composant selon leurs préférences.

Création d'un splitter​

Créez un Splitter en passant deux composants à son constructeur. Le premier devient le panneau maître et le second devient le panneau de détail.

Afficher le code

Taille minimale et maximale​

Le composant Splitter fournit des méthodes pour définir les tailles minimales et maximales pour ses panneaux, vous permettant de contrôler le comportement de redimensionnement des composants au sein du Splitter. Lorsque les utilisateurs tentent de redimensionner des panneaux au-delà des tailles minimales ou maximales spécifiées, le composant splitter impose ces contraintes, garantissant que les panneaux restent dans les limites définies.

Définition des tailles​

La méthode setMasterMinSize(String masterMinSize) spécifie la taille minimale pour le panneau maître du splitter. De même, la méthode setMasterMaxSize(String masterMaxSize) spécifie la taille maximale pour le panneau maître.

Vous pouvez spécifier les tailles en utilisant n'importe quelle unité CSS valide, comme montré ci-dessous :

Afficher le code

Orientation​

Vous pouvez configurer l'orientation dans le composant Splitter, vous permettant de créer des mises en page adaptées à des exigences de conception spécifiques. En spécifiant l'orientation, le composant dispose les panneaux horizontalement ou verticalement, offrant une flexibilité dans la conception de la mise en page.

Pour configurer l'orientation, utilisez l'énumération des orientations prises en charge pour spécifier si le Splitter doit être rendu horizontalement ou verticalement :

Afficher le code

Position relative​

Pour définir la position initiale de la barre de division dans le composant Splitter, utilisez setPositionRelative. Cette méthode prend une valeur numérique de 0 à 100 représentant le pourcentage de l'espace donné dans le Splitter, et affiche le diviseur au pourcentage donné de la largeur totale :

Afficher le code

Imbrication​

L'imbrication de splitters vous permet de créer des mises en page complexes avec des niveaux de panneaux redimensionnables. Cela permet de créer des interfaces utilisateur sophistiquées avec un contrôle granulaire sur l'arrangement et le redimensionnement du contenu.

Pour imbriquer des composants Splitter, créez de nouvelles instances de Splitter et ajoutez-les en tant qu'enfants aux composants Splitter existants. Cette structure hiérarchique permet de créer des mises en page multi-niveaux avec des capacités de redimensionnement flexibles. Le programme ci-dessous démontre cela :

Afficher le code

Sauvegarde automatique​

Le composant Splitter comprend une option de Sauvegarde Automatique, qui enregistre l'état des tailles de panneaux dans le stockage local pour maintenir des dimensions cohérentes entre les rechargements.

Lorsque vous définissez la configuration de sauvegarde automatique, le composant Splitter stocke automatiquement l'état des tailles de panneaux dans le stockage local du navigateur web. Cela garantit que les tailles choisies par les utilisateurs pour les panneaux persistent lors des rechargements de page ou des sessions de navigateur, réduisant le besoin d'ajustements manuels.

Nettoyer l'état​

Pour réinitialiser par programme le Splitter aux paramètres et dimensions par défaut, appelez la méthode cleanState() pour supprimer toute donnée d'état enregistrée liée au composant Splitter du stockage local du navigateur web.

Afficher le code

Dans la démo précédente, chaque instance de Splitter active la fonction de Sauvegarde Automatique en appelant la méthode setAutosave. Cela garantit que les tailles des panneaux sont automatiquement enregistrées dans le stockage local. Ainsi, lors du rechargement du navigateur, les tailles de ces splitters restent les mêmes.

Cliquer sur le bouton "Effacer l'état" appelle la méthode cleanState() et rafraîchit la fenêtre du navigateur pour afficher les dimensions d'origine.

Style​

Loading...

Meilleures pratiques​

Pour garantir une expérience utilisateur optimale lors de l'utilisation du composant Splitter, considérez les meilleures pratiques suivantes :

  • Ajuster en fonction du contenu : Lors de la décision sur l'orientation et les tailles initiales des panneaux, tenez compte de la priorité du contenu. Par exemple, dans une mise en page avec une barre de navigation latérale et une zone de contenu principal, la barre latérale doit généralement rester plus étroite avec une taille minimale définie pour une navigation claire.

  • Imbrication stratégique : Imbriquer des splitters peut créer des mises en page polyvalentes mais peut compliquer l'interface utilisateur et affecter les performances. Planifiez vos mises en page imbriquées pour vous assurer qu'elles sont intuitives et améliorent l'expérience utilisateur.

  • Se souvenir des préférences des utilisateurs : Utilisez la fonction de Sauvegarde Automatique pour mémoriser les ajustements des utilisateurs entre les sessions, améliorant l'expérience utilisateur. Fournissez une option permettant aux utilisateurs de réinitialiser aux paramètres par défaut.