Inicio Rápido

FlexLayout se encarga principalmente de la pantalla dividida en una dirección.

División de fila básica

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>

Notas

isResizePanel = trueEn este caso, el resizePanel se renderiza como hermano del contenedor. Por ejemplo, la propiedad del resizePanel entre el contenedor Medio y Derecho pertenece al Medio, pero el mid-resizePanel maneja a sus hermanos a ambos lados.

Advertencia

En la mayoría de los casos de uso, no es necesario agregar a el último elemento. isResizePanelSi se agrega al último elemento, puede interferir con la función de redimensionamiento del propio navegador web, afectando la experiencia del usuario.

Cuando se necesita renderizar dinámicamente como se muestra a continuación, isResizePanelse recomienda usar el estado en lugar de renderizarlo previamente como 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>

División de columna + crecer

Asignar previamente una proporción de área específica en la división 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>

Notas

Si no se especifica crecer, los valores restantes, excluyendo el valor de crecer especificado, se distribuirán equitativamente entre los contenedores que no tienen crecer especificado.
Es decir, en el código anterior, el contenedor superior tiene grow = 0.45, mientras que los contenedores medio y derecho tienen grow = 1.275 asignados.

Precaución

Se recomienda que el valor de crecer especificado por props no exceda el número de contenedores.

Multi-cruz (anidado)

La división en más de una dirección se crea superponiendo 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>

Notas

Dado que FlexLayout se basa en el flex de css, cuando la dirección se establece en columna, si la altura del padre de referencia no está determinada (por ejemplo, auto), el redimensionamiento puede no funcionar.
(En este documento, CodeBlock desempeña implícitamente el papel de altura.)
De manera similar, si no hay espacio libre redimensionable, el redimensionamiento no funcionará.

Notas

FlexLayoutContainer transmite la configuración de estilo necesaria para que el redimensionamiento funcione, como width: 100%, height: 100%, a sus descendientes directos.
Si no deseas que algo esté bajo su influencia, se recomienda envolver primero con un div como descendiente directo.
Por la misma razón, se recomienda no crear más de dos descendientes directos si desea prevenir comportamientos no intencionados.

min/max + isFitContent

Límite de rango de redimensionamiento + límite basado en el tamaño del contenido

Al especificar el tamaño mínimo/máximo en FlexLayoutContainer con CSS, puede controlar el rango de redimensionamiento.

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

O puede usarlo de esta manera.

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

El resultado de la ejecución es el siguiente.

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>

Notas

Después de useEffect, el contenedor izquierdo no se reducirá a menos de 25px ni se expandirá a más de 180px.
Si desea establecer el tamaño dinámico del contenido interno como tamaño máximo <FlexLayoutContainer isFitContent>...</FlexLayoutContainer>puede usar isFitContent. Un contenedor que utiliza isFitContent no se redimensionará a un tamaño mayor que el de sus elementos hijos internos.

Advertencia

En este ejemplo, al asignar a Mid Container isFitContentsi se le asigna
se convierte en un diseño que no se puede redimensionar completamente, ya que el valor del espacio que se puede mover es menor que el valor del espacio disponible. Si no es intencionado, no asigne valores de tamaño máximo a todos los contenedores. Al menos uno de los contenedores no debe tener un tamaño máximo asignado.

Modo de movimiento del panel (panelMovementMode)

Forma en que interactúan los paneles adyacentes al redimensionar

panelMovementModees una propiedad que controla cómo se mueven los paneles adyacentes al redimensionar un panel. El valor predeterminado es divorcioy se pueden usar los siguientes modos.

bulldozer

Empuja los paneles adyacentes pero no se adhieren entre sí.

divorce (기본값)

Empuja los paneles adyacentes y se adhieren entre sí, pero se separan al volver a la posición donde comenzó el redimensionamiento.

stalker

Los paneles adyacentes se adhieren completamente, pero se separan al llegar al final.

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>

Última verificación

layoutName / containerName

layoutName / containerNamese utiliza como iddel elemento DOM renderizado, y también getLayoutInfos, useDecompositionLayout se utiliza en Hooks como el Store/Subject interno. Clavede

El valor debe ser único dentro de la página. ÚnicoSi hay duplicados, las claves internas pueden entrar en conflicto, lo que puede causar comportamientos no intencionados como la mezcla de objetivos de redimensionamiento/suscripción.
El valor debe ser EstableSi cambia en cada renderizado o si el nombre cambia según las condiciones, el estado/suscripción existente puede interrumpirse y ser reconocido como "otro diseño".
Se recomienda evitar espacios/caracteres especiales y usar valores basados en letras/números, -, _.
isResizePanel Identificador derivado al usar${ContainerName} + '_resize_panel' se creará adicionalmente. Mantenga la nomenclatura de contenedores consistente y única.

isResizePanel

El panel de redimensionamiento se renderiza como un hermano del contenedor.

Ej: Entre Mid y Right, la propiedad del panel de redimensionamiento es de Mid, pero el panel de redimensionamiento maneja a sus hermanos a ambos lados.

grow

"Especifica" la proporción inicial de un contenedor específico.

Los contenedores sin grow se distribuyen uniformemente, excluyendo el grow especificado.

isFitContent

Limita el redimensionamiento del contenedor para que no sea mayor que el tamaño de los elementos hijos internos.

panelMovementMode

Configura cómo interactúa el panel al redimensionarse con los paneles adyacentes.

"bulldozer": Empuja los paneles adyacentes pero no se adhieren.

"divorce": Empuja los paneles adyacentes y se adhieren, pero se separan al volver (valor predeterminado).

"stalker": Se adhieren completamente entre paneles adyacentes, pero se separan al llegar al final.