Écran partagé

Configurez l'écran partagé avec un glisser-déposer, un alignement des onglets au centre, et une personnalisation de l'interface utilisateur pour le titre/l'aide/Plus.

Écran partagé par défaut

FlexLayoutSplitScreenGère les zones avant/centre/après dans le store en fonction du composant central. Lorsque le DragBox est déposé sur cet écran, une division en ligne ou en colonne est créée selon la position, et les écrans arrivés au centre sont gérés comme des onglets.

tsx

navigationTitle et rendu du titre

navigationTitleest la donnée d'étiquette de l'écran, navigationTitleComponentest un wrapper commun utilisé lorsque l'écran partagé rend chaque étiquette en tant qu'interface utilisateur de titre réelle. Le DragBox ne transmet que la chaîne navigationTitle et ne déplace pas le navigationTitleComponent.

Utilise le design de l'écran partagé arrivé.

Lorsque l'écran est déplacé vers un autre écran partagé, les données d'étiquette du titre sont conservées, mais le design de rendu suit le navigationTitleComponent de l'écran partagé arrivé.

tsx

Instructions de division et personnalisation de l'interface utilisateur Plus

titleWrapperComponent

Un wrapper commun qui enveloppe navigationTitleComponent et titleCloseButtonComponent. S'il est omis, aucun wrapper DOM séparé ne sera créé.

titleCloseButtonComponent

Remplace l'interface utilisateur de fermeture de l'onglet central. Si undefined, le bouton X par défaut est utilisé, et si null, le bouton de fermeture est masqué.

dropGuideComponent

Remplace l'interface utilisateur d'instructions par défaut affichée lors du glissement dans une zone divisible. Si omis, le message d'instructions par défaut est utilisé.

titleMoreButtonComponent

Remplace uniquement le déclencheur ... à droite du titre. Si undefined, le bouton par défaut est utilisé et si null, Plus est masqué.

renderTitleMoreMenuItems

Ajoute des éléments de menu utilisateur en dessous tout en conservant le menu Plus par défaut.

renderTitleMoreMenu

Remplace tout le contenu du menu par défaut. Le portail, le calcul de position, le clic extérieur et la fermeture par Échap sont toujours gérés par la bibliothèque.

tsx

Menu Plus par défaut et contexte étendu

Le menu Plus par défaut propose de fermer l'onglet actuel, de fermer tous les autres onglets, de fermer tous les onglets à droite, de fermer tous les onglets de la division actuelle, et d'ouvrir dans une nouvelle fenêtre si openUrl est présent.

identity

rootName, layoutName, containerName, screenKey

active tab

activeItem, activeIndex

tabs

items

actions

closeMenu(), closeCurrentTab(), closeOtherTabs(), closeTabsToRight(), closeAllTabs(), openInNewWindow()

availability

canCloseOtherTabs, canCloseTabsToRight, canOpenInNewWindow

Le menu est rendu dans document.body en tant que portail React. Il est positionné dans le viewport en fonction de la taille réelle du déclencheur et du menu, et recalculé lors du défilement/redimensionnement, donc il ne sera pas coupé par le débordement à l'intérieur de l'écran partagé.

Modifier l'ordre des titres des onglets centraux

Les titres des onglets centraux du même écran partagé peuvent être réorganisés par glisser-déposer. Si vous placez sur la moitié gauche du titre cible, il se déplace vers l'avant, et si vous le placez sur la moitié droite, il se déplace vers l'arrière, tout en maintenant l'onglet actif selon screenKey.

Le réordonnancement des titres et la division de l'écran sont séparés par la zone de dépôt.

La zone de titre ne gère que l'alignement des onglets, donc les instructions de division ne sont pas affichées. Si vous faites glisser un titre en dehors de la zone réelle de l'écran partagé, vous pouvez utiliser le comportement de glissement existant.

Annuler le glissement avec Échap

Si vous appuyez sur Échap pendant que vous faites glisser le DragBox, cela nettoie le clone de glissement actuel et l'état de glissement en attente, et propage isDragging false / isDrop false. L'interface utilisateur d'instructions de division disparaît immédiatement et aucun dépôt n'est exécuté même après la fin de la souris/tactile.

Écran de dépôt via URL dans Next.js

v1.0.0 Entrée Next.js

FlexLayoutSplitScreen gère la division de l'écran tel quel. Pour effectuer un rendu côté serveur de page.tsx uniquement avec l'URL dans Next.js, utilisez DragBox de @byeolnaerim/flex-layout/next et le FlexLayoutNextSplitScreen généré.

tsx

Options de cycle de vie de l'état

preserveStateOnUnmount

true면 FlexLayoutSplitScreen이 언마운트되어도 현재 JavaScript runtime의 in-memory split store를 유지합니다. 브라우저 새로고침 persistence와는 별개이며 기본값은 false입니다.

screenKey

split screen 내 화면을 식별하는 key입니다. 생략하면 내부에서 생성됩니다.

Propriétés de cycle de vie obsolètes.

isResetOnChildrenChange n'est plus utilisé dans le comportement d'exécution et sera supprimé. isRemoveStoreOnUnmount a également été remplacé par preserveStateOnUnmount, et seul un alias obsolète pour la compatibilité reste.

Rafraîchissement et restauration de l'URL du navigateur.

Persistance du panneau URL de Next.js.

Pour restaurer l'état de partition jusqu'au rafraîchissement du navigateur, spécifiez la persistance dans le FlexLayoutNextSplitScreen généré. Aucune ReactElement n'est stockée, seules les métadonnées du panneau URL de Next pouvant être recréées sont stockées.

tsx