Mở / Đóng bảng điều khiển

Gập và mở container bằng sự kiện lệnh.

Sử dụng containerOpenCloseSubjectMap

Mỗi container là ContainerOpenCloseProviderđược chuẩn bị bởi subject nội bộ. Nút bên ngoài gửi lệnh open/close/toggle đến containerOpenCloseSubjectMap[containerName].next(...).

tsx

import {
  FlexLayout,
  FlexLayoutContainer,
  containerOpenCloseSubjectMap,
} from "@byeolnaerim/flex-layout";
import { useState } from "react";

function OpenCloseSample() {
  const [state, setState] = useState("open");

  const sendPanelCommand = (mode: "open" | "close" | "toggle") => {
    containerOpenCloseSubjectMap["workspace-left"]?.next({
      mode,
      initOpenState: true,
      openOption: { isPrevSizeOpen: true },
      onOpen: () => setState("open"),
      onClose: () => setState("closed"),
    });
  };

  return (
    <>
      <button type="button" onClick={() => sendPanelCommand("open")}>
        Open
      </button>
      <button type="button" onClick={() => sendPanelCommand("close")}>
        Close
      </button>
      <button type="button" onClick={() => sendPanelCommand("toggle")}>
        Toggle
      </button>

      <span>workspace-left: {state}</span>

      <FlexLayout
        layoutName="open-close-workspace"
        direction="row"
        panelMovementMode="divorce"
      >
        <FlexLayoutContainer
          containerName="workspace-left"
          isResizePanel
        >
          <div>Left Panel</div>
        </FlexLayoutContainer>

        <FlexLayoutContainer containerName="workspace-main">
          <div>Main Panel</div>
        </FlexLayoutContainer>
      </FlexLayout>
    </>
  );
}

Tùy chọn chính của ContainerStateRequest

mode

open, close, toggle 중 하나입니다.

initOpenState

초기 open 상태를 함께 전달할 때 사용합니다.

openOption

열릴 때 전달되는 옵션입니다. 이전 크기로 열고 싶다면 isPrevSizeOpen을 사용합니다.

closeOption

닫힐 때 전달되는 옵션입니다. 닫을 때 grow를 어떻게 계산할지 조정합니다.

onOpen / onClose

열림/닫힘 처리가 끝난 뒤 호출되는 콜백입니다.

Nhấp đúp để chuyển đổi

useDoubleClickToggle

useDoubleClickToggle(containerName, option)phát hiện sự kiện nhấp chuột trên panel thay đổi kích thước của container và phát sinh lệnh open/close khi nhấp đúp.

tsx

import {
  FlexLayout,
  FlexLayoutContainer,
  useDoubleClickToggle,
} from "@byeolnaerim/flex-layout";

function DoubleClickToggleSample() {
  const { isOpen } = useDoubleClickToggle("double-click-left", {
    mode: "toggle",
    initOpenState: true,
    openOption: { isPrevSizeOpen: true },
  });

  return (
    <>
      <span>
        resize panel을 더블클릭하십시오. 현재 상태:{" "}
        {isOpen === false ? "closed" : "open"}
      </span>

      <FlexLayout
        layoutName="double-click-workspace"
        direction="row"
        panelMovementMode="divorce"
      >
        <FlexLayoutContainer
          containerName="double-click-left"
          isResizePanel
        >
          <div>Double Click Target</div>
        </FlexLayoutContainer>

        <FlexLayoutContainer containerName="double-click-main">
          <div>Main Panel</div>
        </FlexLayoutContainer>
      </FlexLayout>
    </>
  );
}