Démarrage rapide

FlexLayout gère essentiellement l'affichage fractionné dans une direction.

Fractionnement de ligne de base

tsx

<FlexLayout layoutName="basic-row_1" direction="row">
  <FlexLayoutContainer containerName="basic-row_1-left" isResizePanel>
    <div>Left</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="basic-row_1-mid" isResizePanel>
    <div>Mid</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="basic-row_1-right">
    <div>Right</div>
  </FlexLayoutContainer>
</FlexLayout>

Notes

isResizePanel = trueDans ce cas, le resizePanel sera rendu comme un frère du conteneur. Par exemple, la propriété du resizePanel entre le conteneur Mid et le conteneur Right appartient à Mid, mais le mid-resizePanel gère ses frères de chaque côté.

Avertissement

Dans la plupart des cas d'utilisation, il n'est pas nécessaire d'ajouter isResizePanelà l'élément final. Si vous l'ajoutez à l'élément final, cela peut interférer avec la fonction de redimensionnement du navigateur lui-même et nuire à l'expérience utilisateur.

Lorsque vous devez rendre dynamiquement comme ci-dessous, isResizePanelil est recommandé d'utiliser l'état plutôt que de rendre préalablement true.

tsx

<FlexLayout layoutName="basic-row_2" direction="row">
  <FlexLayoutContainer containerName="basic-row_2-mid" isResizePanel>
    <div>
      <div>Mid</div>
      <button onClick={() => startTransition(() => setIsTwoRight(prev => !prev))}>ToggleIsTwoRight</button>
    </div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="basic-row_2-right" isResizePanel={isTwoRight}>
    <div>Right</div>
  </FlexLayoutContainer>

  {isTwoRight ? 
    <FlexLayoutContainer containerName="basic-row_2-right2">
      <div>Right To Right</div>
    </FlexLayoutContainer> : <></>
  }
</FlexLayout>

Fractionnement de colonne + croissance

Attribuer à l'avance un ratio de zone spécifique dans le fractionnement vertical

tsx


  <FlexLayout layoutName="basic-column_3" direction="column">
    <FlexLayoutContainer containerName="basic-column_3-top" isResizePanel grow={0.45}>
      <div>Left</div>
    </FlexLayoutContainer>
    <FlexLayoutContainer containerName="basic-column_3-mid">
      <div>Mid</div>
    </FlexLayoutContainer>

    <FlexLayoutContainer containerName="basic-column_3-right">
      <div>Right</div>
    </FlexLayoutContainer>
  </FlexLayout>

Notes

Si vous ne spécifiez pas de croissance, les valeurs restantes, à l'exception de la valeur de croissance explicitement spécifiée, seront réparties uniformément entre les conteneurs sans croissance spécifiée.
Ainsi, dans le code ci-dessus, le conteneur supérieur reçoit grow = 0.45, tandis que les conteneurs mid et right reçoivent grow = 1.275.

Attention

Il est recommandé que la valeur de croissance spécifiée par props ne dépasse pas le nombre de conteneurs.

Multi-Cross (imbriqué)

Les fractionnements dans plus d'une direction sont créés en superposant FlexLayout.

tsx


  <FlexLayout layoutName="basic-row_4" direction="row">
    <FlexLayoutContainer containerName="basic-row_4-left" isResizePanel>
      <div>
        <FlexLayout layoutName="basic-row_4-basic-column-left" direction="column">
          <FlexLayoutContainer containerName="basic-row_4-left-top" isResizePanel>
            <div>left-top</div>
          </FlexLayoutContainer>
          <FlexLayoutContainer containerName="basic-row_4-left-bottom">
            <div>left-bottom</div>
          </FlexLayoutContainer>
        </FlexLayout>
      </div>
    </FlexLayoutContainer>

    <FlexLayoutContainer containerName="basic-row_4-right">
      <div >
        <FlexLayout layoutName="basic-row_4-basic-column-right" direction="column">
          <FlexLayoutContainer containerName="basic-row_4-right-top" isResizePanel>
            <div>right-top</div>
          </FlexLayoutContainer>
          <FlexLayoutContainer containerName="basic-row_4-right-bottom">
            <div>right-bottom</div>
          </FlexLayoutContainer>
        </FlexLayout>
      </div>
    </FlexLayoutContainer>
  </FlexLayout>

Notes

Étant donné que FlexLayout est basé sur le flex de CSS, lorsque la direction est définie sur colonne, le redimensionnement peut ne pas fonctionner si la hauteur du parent de référence n'est pas déterminée (ex : auto).
(Dans ce document, CodeBlock joue implicitement le rôle de hauteur.)
De même, le redimensionnement ne fonctionnera pas s'il n'y a pas d'espace libre redimensionnable.

Notes

FlexLayoutContainer transmet les configurations de style nécessaires pour que le redimensionnement fonctionne, comme width: 100%, height: 100%, à ses descendants directs.
Si vous ne souhaitez pas que cela affecte, il est recommandé d'envelopper d'abord un div comme descendant direct.
Pour la même raison, il est recommandé de ne pas créer plus de deux descendants directs si vous souhaitez éviter un comportement différent de celui prévu.

min/max + isFitContent

Limite de la plage de redimensionnement + Limite basée sur la taille du contenu

En spécifiant la taille minimale/maximale avec CSS dans FlexLayoutContainer, vous pouvez contrôler la plage de redimensionnement.

tsx

const [handleSizeTarget, setHandleSizeTarget] = useState<HTMLElement|null>(null);

useEffect(()=>{
  const layoutSubscribe = getLayoutInfos('basic-row_7').subscribe((layout)=>{
    const leftContainer = layout.container?.['basic-row_7-left']?.current;
    if(leftContainer){
      setHandleSizeTarget(leftContainer);
    }
  });
  return ()=>{
    layoutSubscribe.unsubscribe();
  }
},[])

useEffect(()=>{
  if(!handleSizeTarget) return;
  handleSizeTarget.style.minWidth = '25px';
  handleSizeTarget.style.maxWidth = '180px';
},[handleSizeTarget])

Ou vous pouvez l'utiliser de cette manière.

tsx

const { layout: containers, container, resizePanel } = useDecompositionLayout({
  layoutName: 'basic-row_7',
  containerName: 'basic-row_7-left',
});

useEffect(()=>{
  if(!container) return;
  container.style.minWidth = '25px';
  container.style.maxWidth = '180px';
},[container])

Le résultat de l'exécution est le suivant.

tsx

<FlexLayout layoutName="basic-row_7" direction="row">
  <FlexLayoutContainer containerName="basic-row_7-left" isResizePanel>
    <div>Left</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="basic-row_7-mid" isResizePanel>
    <div>Mid</div>
  </FlexLayoutContainer>
  <FlexLayoutContainer
    containerName="basic-row_7-right"
    isFitContent
  >
    <div
      style={{
        whiteSpace: "nowrap",
        textWrapMode: "nowrap",
        paddingRight:'1rem'
      }}
    >
      I'm Using Fit Content{" "}
    </div>
  </FlexLayoutContainer>
</FlexLayout>

Notes

Après useEffect, le conteneur gauche ne peut pas être réduit en dessous de 25px et ne peut pas être agrandi au-delà de 180px.
Si vous souhaitez définir la taille dynamique du contenu interne comme taille maximale <FlexLayoutContainer isFitContent>...</FlexLayoutContainer>vous pouvez utiliser. Un conteneur utilisant isFitContent ne sera pas redimensionné au-delà de la taille de ses éléments enfants.

Avertissement

Dans cet exemple, si vous attribuez à Mid Container isFitContentcela
le valeur de l'espace libre pour le mouvement est plus petite que la valeur de l'espace déplaçable, ce qui rend la mise en page complètement non redimensionnable. Si ce n'est pas ce que vous souhaitez, ne donnez pas de valeur de taille maximale à tous les conteneurs. Au moins un conteneur ne doit pas avoir de taille maximale.

Mode de déplacement du panneau (panelMovementMode)

Mode d'interaction avec les panneaux adjacents lors du redimensionnement

panelMovementModeest une propriété qui contrôle comment les panneaux adjacents se déplacent lors du redimensionnement. La valeur par défaut est divorceet les modes suivants peuvent être utilisés.

bulldozer

Repousse les panneaux adjacents mais ne s'accroche pas.

divorce (기본값)

Repousse les panneaux adjacents et s'accroche, mais se sépare à nouveau lorsque vous revenez à la position de départ du redimensionnement.

stalker

Les panneaux adjacents s'accrochent complètement mais se séparent à nouveau lorsqu'ils atteignent la fin.

tsx

const [mode, setMode] = useState<"bulldozer" | "divorce" | "stalker">("bulldozer");

<ButtonGroup variant="outlined" size="small">
  {["bulldozer", "divorce", "stalker"].map((m) => (
    <Button
      key={m}
      onClick={() => setMode(m)}
      variant={mode === m ? "contained" : "outlined"}
    >
      {m}
    </Button>
  ))}
</ButtonGroup>

<Box
  sx={{
    height: "100%",
    "& [data-container_name]": {
      minHeight: "2rem",
    },
  }}
>
  <FlexLayout
    layoutName={`panel-movement-demo-${mode}`}
    direction="column"
    panelMovementMode={mode}
  >
    <FlexLayoutContainer containerName="panel-top" isResizePanel>
      <div>Top</div>
    </FlexLayoutContainer>
    <FlexLayoutContainer containerName="panel-mid1" isResizePanel>
      <div>Mid 1</div>
    </FlexLayoutContainer>
    <FlexLayoutContainer containerName="panel-mid2" isResizePanel>
      <div>Mid 2</div>
    </FlexLayoutContainer>
    <FlexLayoutContainer containerName="panel-bottom">
      <div>Bottom</div>
    </FlexLayoutContainer>
  </FlexLayout>
</Box>

Dernière vérification

layoutName / containerName

layoutName / containerNameest utilisé comme iddans l'élément DOM rendu, et également getLayoutInfos, useDecompositionLayout dans des hooks tels que le Store/Subject interne. Cléest utilisé.

La valeur doit être unique dans la page. UniqueSi elle est dupliquée, la clé interne peut entrer en conflit, entraînant des comportements inattendus tels que le mélange des cibles de redimensionnement/abonnement.
La valeur doit être Stableunique. Si elle change à chaque rendu ou en fonction des conditions, l'état/abonnement existant peut être interrompu et être reconnu comme "une autre mise en page".
Évitez les espaces et les caractères spéciaux, privilégiez les valeurs en anglais/nombres et les caractères -, _.
isResizePanel Identifiant dérivé lors de l'utilisation${ContainerName} + '_resize_panel' sera créé en plus. Veuillez maintenir une nomenclature de conteneur cohérente et unique.

isResizePanel

Le panneau de redimensionnement sera rendu comme un frère du conteneur.

Ex : Entre Mid et Right, le panneau de redimensionnement appartient à Mid, mais il gère les frères de chaque côté.

grow

"Spécifie" le ratio initial d'un conteneur spécifique.

Les conteneurs sans grow se répartissent également le reste, à l'exception du grow spécifié.

isFitContent

Limite le redimensionnement du conteneur pour qu'il ne soit pas plus grand que la taille des éléments enfants internes.

panelMovementMode

Définit la manière d'interagir avec les panneaux adjacents lors du redimensionnement.

"bulldozer": Pousse les panneaux adjacents mais ne s'accroche pas.

"divorce": Pousse les panneaux adjacents et s'accroche, mais se sépare en revenant (valeur par défaut).

"stalker": Les panneaux adjacents s'accrochent complètement mais se séparent lorsqu'ils atteignent la fin.