Schnellstart

FlexLayout ist grundsätzlich für die Aufteilung des Bildschirms in eine Richtung zuständig.

Basiszeilenaufteilung

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>

Notizen

isResizePanel = trueIn diesem Fall wird resizePanel als Geschwister des Containers gerendert. Zum Beispiel gehört das resizePanel zwischen dem Mid-Container und dem Right dem Mid, aber mid-resizePanel verwaltet seine Geschwister auf beiden Seiten.

Warnung

In den meisten Anwendungsfällen ist es nicht notwendig, an das letzte Element isResizePanelanzuhängen. Wenn Sie es an das letzte Element anhängen, kann dies die Benutzererfahrung beeinträchtigen, da es mit der Resize-Funktion des Webbrowsers selbst kollidiert.

Wenn es dynamisch gerendert werden muss, wie unten gezeigt, isResizePanelwird empfohlen, den Zustand zu verwenden, anstatt es im Voraus auf true zu rendern.

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>

Spaltenaufteilung + wachsen

Vordefinierte Flächenverhältnisse in vertikalen Aufteilungen

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>

Notizen

Wenn grow nicht angegeben ist, wird der Restwert, der nicht explizit angegeben ist, gleichmäßig auf die Container verteilt, für die grow nicht angegeben ist.
Das bedeutet, dass im obigen Code der Top-Container grow = 0.45 und die restlichen Mid- und Right-Container grow = 1.275 zugewiesen bekommen.

Achtung

Es wird empfohlen, dass der Wert von grow, der über Props angegeben wird, die Anzahl der Container nicht überschreitet.

Multi-Cross (Verschachtelung)

Aufteilungen in mehr als zwei Richtungen werden durch Überlappen von FlexLayout erstellt.

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>

Notizen

Da FlexLayout auf dem CSS-Flex basiert, kann es sein, dass die Resize-Funktion nicht funktioniert, wenn die Höhe des übergeordneten Elements nicht festgelegt ist (z. B. auto), wenn die Richtung auf column gesetzt ist.
(In diesem Dokument übernimmt CodeBlock implizit die Rolle der Höhe.)
Ebenso wird die Resize-Funktion nicht funktionieren, wenn kein resize-fähiger Freiraum vorhanden ist.

Notizen

FlexLayoutContainer überträgt die erforderlichen Stilkonfigurationen, damit width: 100%, height: 100% usw. für seine direkten Nachkommen funktionieren.
Wenn Sie nicht möchten, dass etwas in diesen Einflussbereich fällt, wird empfohlen, zuerst ein div als direkten Nachkommen zu umwickeln.
Aus demselben Grund wird empfohlen, nicht mehr als zwei direkte Nachkommen zu erstellen, wenn Sie unerwünschte Verhaltensweisen vermeiden möchten.

min/max + isFitContent

Resize-Bereichsbeschränkung + Inhaltsgrößenbeschränkung

Durch die Angabe von minimalen/maximalen Größen in FlexLayoutContainer mit CSS können Sie den Resize-Bereich steuern.

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])

Oder so kann es verwendet werden.

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])

Das Ergebnis ist wie folgt.

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>

Notizen

Nach useEffect wird der linke Container nicht kleiner als 25px und nicht größer als 180px.
Wenn Sie die dynamische Größe des Inhalts auf die maximale Größe festlegen möchten <FlexLayoutContainer isFitContent>...</FlexLayoutContainer>kann verwendet werden. Container, die isFitContent verwenden, werden nicht größer als die Größe der inneren Kind-Elemente.

Warnung

In diesem Beispiel, wenn Sie dem Mid Container isFitContentzuweisen
wird das Layout vollständig nicht resizebar, da der Wert des beweglichen Raums kleiner ist als der Wert des verfügbaren Raums. Wenn dies nicht beabsichtigt ist, weisen Sie nicht allen Containern einen max size-Wert zu. Mindestens ein Container sollte keinen max size-Wert haben.

Panelbewegungsmodus (panelMovementMode)

Interaktionsweise mit benachbarten Panels beim Resize

panelMovementModeist eine Eigenschaft, die steuert, wie benachbarte Panels beim Resize bewegt werden. Der Standardwert ist divorceund die folgenden Modi können verwendet werden.

bulldozer

drückt benachbarte Panels weg, aber sie haften nicht zusammen.

divorce (기본값)

drückt benachbarte Panels weg und sie haften zusammen, aber wenn sie zur ursprünglichen Resize-Position zurückkehren, werden sie wieder getrennt.

stalker

benachbarte Panels haften vollständig zusammen, trennen sich jedoch, wenn das Ende erreicht ist.

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>

Letzte Überprüfung

layoutName / containerName

layoutName / containerNamewird als iddes gerenderten DOM-Elements verwendet und auch getLayoutInfos, useDecompositionLayout in Hooks wie Schlüsselverwendet.

Der Wert muss innerhalb der Seite Eindeutigeinzigartig sein. Bei Duplikaten kann es zu Konflikten bei den internen Schlüsseln kommen, was zu unerwünschtem Verhalten wie vermischten Resize-/Abonnent-Zielen führen kann.
Der Wert muss Stabileinzigartig sein. Wenn er sich bei jedem Rendern ändert oder sich je nach Bedingung ändert, kann der bestehende Zustand/das Abonnement unterbrochen werden und als "anderes Layout" erkannt werden.
Vermeiden Sie Leerzeichen/Sonderzeichen und verwenden Sie vorzugsweise Werte aus Buchstaben/Zahlen sowie -, _.
isResizePanel Abgeleitete Identifikatoren bei Verwendung${ContainerName} + '_resize_panel' werden zusätzlich erstellt. Halten Sie die Benennung der Container konsistent und einzigartig.

isResizePanel

Das Resize-Panel wird als Geschwister des Containers gerendert.

Beispiel: Zwischen Mid und Right, das Resize-Panel gehört zu Mid, aber das Resize-Panel verwaltet die Geschwister auf beiden Seiten.

grow

Gibt das anfängliche Verhältnis eines bestimmten Containers an.

Container ohne grow werden gleichmäßig verteilt, abgesehen von dem angegebenen grow.

isFitContent

Begrenzt die Größe des Containers, damit er nicht größer als die Größe der inneren Kind-Elemente wird.

panelMovementMode

Legt fest, wie das Resize-Panel mit angrenzenden Panels interagiert.

"bulldozer": Schiebt angrenzende Panels weg, bleibt aber nicht haften.

"divorce": Schiebt angrenzende Panels weg und bleibt haften, trennt sich jedoch, wenn es zurückkommt (Standardwert).

"stalker": Bleibt vollständig an angrenzenden Panels haften, trennt sich jedoch, wenn das Ende erreicht ist.