Redimensionamento de Painéis

Controla o cálculo de tamanho baseado em redimensionamento e crescimento.

isResizePanel

isResizePanelUm handle de redimensionamento é renderizado atrás do contêiner se isso for true. Normalmente não é aplicado ao último contêiner.

tsx

<FlexLayout
  layoutName="resizable"
  direction="row"
  panelMovementMode="divorce"
>
  <FlexLayoutContainer
    containerName="resizable-left"
    isResizePanel
  >
    <div>Left</div>
  </FlexLayoutContainer>

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

panelMovementMode

divorce

기본값입니다. 인접 패널을 밀어내고 서로 달라붙지만, 리사이즈 시작 위치로 되돌아오면 다시 분리됩니다.

bulldozer

인접 패널을 밀어내지만 달라붙지는 않습니다.

stalker

인접한 패널끼리 달라붙는 동작을 유지합니다.

modoPainel

Usado ao mudar a forma do handle de redimensionamento por contêiner. modoPainelUsar.

default

기본 resize panel입니다.

bottom-cylinder

하단 원통형 핸들입니다.

bottom-cylinder-reverse

하단 원통형 reverse 모드입니다.

top-cylinder

상단 원통형 핸들입니다.

left-cylinder

좌측 원통형 핸들입니다.

right-cylinder

우측 원통형 핸들입니다.

tsx

<FlexLayout
  layoutName="panel-mode-default"
  direction="row"
  panelMovementMode="divorce"
>
  <FlexLayoutContainer
    containerName="panel-mode-default-left"
    isResizePanel
    panelMode="default"
  >
    <div>default</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="panel-mode-default-right">
    <div>Content</div>
  </FlexLayoutContainer>
</FlexLayout>

tsx

<FlexLayout
  layoutName="panel-mode-bottom-cylinder"
  direction="column"
  panelMovementMode="divorce"
>
  <FlexLayoutContainer
    containerName="panel-mode-bottom-cylinder-top"
    isResizePanel
    panelMode="bottom-cylinder"
  >
    <div>bottom-cylinder</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="panel-mode-bottom-cylinder-bottom">
    <div>Content</div>
  </FlexLayoutContainer>
</FlexLayout>

tsx

<FlexLayout
  layoutName="panel-mode-bottom-cylinder-reverse"
  direction="column"
  panelMovementMode="divorce"
>
  <FlexLayoutContainer
    containerName="panel-mode-bottom-cylinder-reverse-top"
    isResizePanel
    panelMode="bottom-cylinder-reverse"
  >
    <div>bottom-cylinder-reverse</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="panel-mode-bottom-cylinder-reverse-bottom">
    <div>Content</div>
  </FlexLayoutContainer>
</FlexLayout>

tsx

<FlexLayout
  layoutName="panel-mode-top-cylinder"
  direction="column"
  panelMovementMode="divorce"
>
  <FlexLayoutContainer
    containerName="panel-mode-top-cylinder-top"
    isResizePanel
    panelMode="top-cylinder"
  >
    <div>top-cylinder</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="panel-mode-top-cylinder-bottom">
    <div>Content</div>
  </FlexLayoutContainer>
</FlexLayout>

tsx

<FlexLayout
  layoutName="panel-mode-left-cylinder"
  direction="row"
  panelMovementMode="divorce"
>
  <FlexLayoutContainer
    containerName="panel-mode-left-cylinder-left"
    isResizePanel
    panelMode="left-cylinder"
  >
    <div>left-cylinder</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="panel-mode-left-cylinder-right">
    <div>Content</div>
  </FlexLayoutContainer>
</FlexLayout>

tsx

<FlexLayout
  layoutName="panel-mode-right-cylinder"
  direction="row"
  panelMovementMode="divorce"
>
  <FlexLayoutContainer
    containerName="panel-mode-right-cylinder-left"
    isResizePanel
    panelMode="right-cylinder"
  >
    <div>right-cylinder</div>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="panel-mode-right-cylinder-right">
    <div>Content</div>
  </FlexLayoutContainer>
</FlexLayout>

isFitContent

Correção baseada no tamanho do DOM

O contêiner observa width/height internamente e recalcula o crescimento. Para painéis que precisam ser corrigidos de acordo com o tamanho do conteúdo. isFitContent

tsx

<FlexLayout
  layoutName="fit-content"
  direction="row"
  panelMovementMode="divorce"
>
  <FlexLayoutContainer
    containerName="fit-content-left"
    isResizePanel
  >
    <div>Left</div>
  </FlexLayoutContainer>

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