Bắt đầu nhanh

FlexLayout chủ yếu đảm nhận việc chia tách màn hình theo một hướng.

Chia tách hàng cơ bản

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>

Ghi chú

isResizePanel = trueTrong trường hợp này, resizePanel sẽ được render như một anh chị em của container. Ví dụ, quyền sở hữu của resizePanel nằm giữa container Mid và Right thuộc về Mid, nhưng mid-resizePanel sẽ xử lý các anh chị em bên trái và bên phải của nó.

Cảnh báo

Trong hầu hết các trường hợp sử dụng, không cần phải gán cho phần tử cuối cùng. isResizePanelNếu gán cho phần tử cuối cùng, có thể gây cản trở trải nghiệm người dùng do chồng chéo với chức năng thay đổi kích thước của trình duyệt web.

Khi cần render động như bên dưới, isResizePanelthay vì render trước là true, nên sử dụng state.

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>

Chia tách cột + phát triển

Gán tỷ lệ cho một khu vực cụ thể trong chia tách dọc.

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>

Ghi chú

Nếu không chỉ định grow, các giá trị còn lại sẽ được phân phối đều cho các container không được chỉ định grow.
Tức là trong mã trên, container trên cùng được gán grow = 0.45, còn các container giữa và bên phải được gán grow = 1.275.

Lưu ý

Nên chỉ định giá trị grow qua props không vượt quá số lượng container.

Đa chiều chéo (lồng ghép)

Chia tách theo nhiều hướng hơn bằng cách chồng 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>

Ghi chú

Vì FlexLayout dựa trên flex của css, nên khi direction là column, nếu chiều cao của cha không được xác định (ví dụ: auto), việc thay đổi kích thước có thể không hoạt động.
(Trong tài liệu này, CodeBlock thực hiện vai trò như chiều cao một cách ngầm định.)
Tương tự, nếu không có không gian dư có thể thay đổi kích thước, việc thay đổi kích thước cũng sẽ không hoạt động.

Ghi chú

FlexLayoutContainer truyền các cấu hình kiểu cần thiết để việc thay đổi kích thước hoạt động cho các con trực tiếp của nó như width: 100%, height: 100%.
Nếu không muốn bị ảnh hưởng, nên bọc div như một con trực tiếp trước.
Ngoài ra, để tránh hành vi không mong muốn, chúng tôi khuyên bạn không nên tạo hơn 2 thế hệ trực tiếp.

min/max + isFitContent

Giới hạn phạm vi thay đổi kích thước + giới hạn theo kích thước nội dung

Bằng cách chỉ định kích thước tối thiểu/tối đa cho FlexLayoutContainer bằng CSS, bạn có thể điều chỉnh phạm vi thay đổi kích thước.

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

Hoặc bạn có thể sử dụng như thế này.

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

Kết quả thực thi như sau.

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>

Ghi chú

Sau khi useEffect, container bên trái sẽ không giảm xuống dưới 25px và không tăng lên trên 180px.
Nếu bạn muốn đặt kích thước động của nội dung bên trong là kích thước tối đa <FlexLayoutContainer isFitContent>...</FlexLayoutContainer>bạn có thể sử dụng. Container sử dụng isFitContent sẽ không thay đổi kích thước lớn hơn kích thước của các phần tử con bên trong.

Cảnh báo

Trong ví dụ này, nếu bạn gán cho Mid Container isFitContentthì
giá trị không gian di chuyển có thể di chuyển nhỏ hơn giá trị không gian có thể di chuyển, vì vậy nó sẽ trở thành một bố cục không thể thay đổi kích thước hoàn toàn. Nếu không phải là điều bạn mong muốn, hãy không gán giá trị kích thước tối đa cho tất cả các container. Ít nhất một container phải không có kích thước tối đa.

Chế độ di chuyển panel (panelMovementMode)

Cách tương tác với các panel liền kề khi thay đổi kích thước

panelMovementModelà thuộc tính điều khiển cách di chuyển các panel liền kề khi thay đổi kích thước panel. Giá trị mặc định là ly hônvà bạn có thể sử dụng các chế độ dưới đây.

bulldozer

Đẩy các panel liền kề ra nhưng không dính vào nhau.

divorce (기본값)

Đẩy các panel liền kề ra và dính vào nhau, nhưng khi quay lại vị trí bắt đầu thay đổi kích thước, chúng sẽ lại tách ra.

stalker

Các panel liền kề hoàn toàn dính vào nhau nhưng sẽ tách ra khi đến cuối.

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>

Kiểm tra cuối cùng

layoutName / containerName

layoutName / containerNameđược sử dụng như idcủa phần tử DOM đã được render, và cũng getLayoutInfos, useDecompositionLayout được sử dụng trong các Hook như Khóa.

Giá trị phải Độc nhấttrong trang. Nếu trùng lặp, khóa nội bộ sẽ xung đột dẫn đến hành vi không mong muốn như thay đổi kích thước/đối tượng đăng ký bị trộn lẫn.
Giá trị phải Ổn địnhtrong trang. Nếu thay đổi theo từng lần render hoặc thay đổi theo điều kiện, trạng thái/đăng ký hiện tại có thể bị ngắt và được nhận diện như "bố cục khác".
Tránh sử dụng khoảng trắng/ký tự đặc biệt, khuyến nghị giá trị chủ yếu là chữ cái/ số và -, _.
isResizePanel Nhận dạng phụ khi sử dụng${ContainerName} + '_resize_panel' sẽ được tạo thêm. Hãy giữ tên container nhất quán và duy nhất.

isResizePanel

Panel resize sẽ được hiển thị như một anh em của container.

Ví dụ: Giữa Mid và Right, quyền sở hữu của panel resize thuộc về Mid, nhưng panel resize sẽ xử lý các anh em ở hai bên.

grow

"Xác định" tỷ lệ ban đầu của một container cụ thể.

Các container không chỉ định grow sẽ được phân phối đều phần còn lại ngoại trừ grow đã chỉ định.

isFitContent

Giới hạn không cho container được resize lớn hơn kích thước của các phần tử con bên trong.

panelMovementMode

Thiết lập cách tương tác với các panel liền kề khi resize panel.

"bulldozer": Đẩy panel liền kề ra nhưng không dính vào.

"divorce": Đẩy panel liền kề ra và dính vào nhưng sẽ tách ra khi quay lại (mặc định).

"stalker": Các panel liền kề hoàn toàn dính vào nhưng sẽ tách ra khi đến cuối.