Components
@byeolnaerim/flex-layout에서 공개 export되는 컴포넌트 props입니다.
FlexLayout
| Name | Type | Default | Description |
|---|---|---|---|
layoutName required | string | - | 레이아웃 store/ref/resize memory를 묶는 고유 이름입니다. |
direction required | "row" | "column" | - | row는 좌우, column은 상하 분할입니다. |
children required | ReactElement<FlexLayoutChildrenType>[] | ReactElement | - | FlexLayoutContainer 같은 containerName을 가진 자식 요소입니다. Fragment는 내부에서 펼쳐집니다. |
className | string | - | root flex-layout div에 추가할 className입니다. |
panelClassName | string | - | 하위 resize panel에 공통으로 전달할 className입니다. |
panelMovementMode | PanelMovementMode | "divorce" | resize 중 인접 패널을 어떻게 밀고 붙일지 결정합니다. |
scrollMode | "layout" | "window" | "layout" | layout은 FlexLayout overflow auto, window는 visible 모드로 사용합니다. |
rememberResize | FlexLayoutResizeMemoryOptions | - | 사용자 resize 결과 grow map을 storage에 저장/복원합니다. 생략하면 비활성화됩니다. |
FlexLayoutDynamicHeight
FlexLayoutDynamicHeight는 window scroll 기반 layout에서 target element의 height/minHeight를 content와 viewport에 맞춰 동기화합니다. 특정 panel을 접고 펼치는 useFlexLayoutControl과는 다른 책임의 컴포넌트입니다.| Name | Type | Default | Description |
|---|---|---|---|
extraHeight | number | 0 | 계산된 height에 추가로 더할 값입니다. |
extraHeightUnit | "px" | "%" | "px" | extraHeight의 단위입니다. px는 값을 더하고, %는 계산된 height 비율로 반영합니다. |
targetRef | RefObject<HTMLElement | null> | - | height/minHeight를 동기화할 target element ref입니다. 생략하면 anchor의 parent element를 사용합니다. |
FlexLayoutContainer
| Name | Type | Default | Description |
|---|---|---|---|
containerName required | string | - | 컨테이너 store/ref/open-close/drag target 식별자입니다. |
children required | ReactNode | - | 컨테이너 내부 콘텐츠입니다. |
grow | number | - | 초기 flex-grow 값입니다. resize memory가 있으면 mount 후 저장 값으로 덮어써질 수 있습니다. |
prevGrow | number | - | 닫힘/열림 복원 등에 사용할 이전 grow 값입니다. |
isResizePanel | boolean | - | true면 이 컨테이너 뒤에 FlexLayoutResizePanel을 렌더링합니다. |
isInitialResizable | boolean | - | 초기 리사이즈 가능 상태를 지정합니다. |
isFitContent | boolean | - | 콘텐츠 크기 기준으로 컨테이너 grow를 보정할 때 사용합니다. |
isFitResize | boolean | - | resize 후 콘텐츠 크기에 맞춰 다시 보정할 때 사용합니다. |
panelMode | ResizePanelMode | - | resize handle 모드입니다. |
stickyMode | StickyMode | - | 컨테이너를 top/bottom sticky처럼 동기화합니다. |
className | string | - | 컨테이너 div에 추가할 className입니다. |
FlexLayoutSplitScreen
| Name | Type | Default | Description |
|---|---|---|---|
layoutName required | string | - | split screen root store 이름입니다. |
containerName required | string | - | 초기 center 화면의 containerName입니다. |
children required | ReactElement | - | 초기 center에 렌더링할 화면입니다. |
navigationTitle required | string | - | split screen navigation/title에 표시할 이름입니다. |
dropDocumentOutsideOption | DropDocumentOutsideOption | - | 문서 바깥 drop 시 새 창/탭 열기 옵션입니다. |
screenKey | string | - | 화면 식별 key입니다. 생략하면 내부 생성됩니다. |
isResetOnChildrenChange | boolean | true | children 변경 시 split store를 reset할지 여부입니다. |
isRemoveStoreOnUnmount | boolean | true | 언마운트 시 root split screen store를 삭제할지 여부입니다. |
FlexLayoutSplitScreenDragBox
| Name | Type | Default | Description |
|---|---|---|---|
containerName required | string | - | drop될 화면의 containerName입니다. |
children required | ReactNode | - | 사용자가 드래그하는 UI입니다. |
navigationTitle | string | - | drop 후 navigation/title에 사용할 이름입니다. |
targetComponent | ReactElement | - | drop 후 split screen에 삽입할 컴포넌트입니다. 생략하면 url 기반 fallback element를 사용합니다. |
dropEndCallback | ({ x, y, containerName }) => void | - | drop 종료 후 호출되는 callback입니다. |
dropDocumentOutsideOption | DropDocumentOutsideOption | - | 문서 바깥 drop 시 openUrl/ratio/new tab 동작을 지정합니다. |
screenKey | string | - | 화면 key입니다. 생략하면 내부 생성됩니다. |
isBlockingActiveInput | boolean | false | active input에서 drag 시작을 막을지 여부입니다. |
customData | Record<string, string | number | boolean | undefined> | {} | drag state에 함께 실을 커스텀 데이터입니다. |
scrollTargetRef | RefObject<HTMLElement | null> | - | 드래그 중 edge auto-scroll 대상입니다. |
FlexLayoutSplitScreenScrollBox
| Name | Type | Default | Description |
|---|---|---|---|
keyName required | string | - | 스크롤 위치 저장 key입니다. |
direction | "x" | "y" | - | x면 wheel deltaY를 scrollLeft로 변환합니다. |
isDefaultScrollStyle | boolean | false | 라이브러리 기본 scroll style 사용 여부입니다. |
className | string | - | 추가 className입니다. |
FlexLayoutStickyBox
| Name | Type | Default | Description |
|---|---|---|---|
children required | ReactNode | - | sticky처럼 이동할 콘텐츠입니다. |
edge | "auto" | "top" | "bottom" | "left" | "right" | "auto" | 붙일 방향입니다. |
offset | number | 16 | edge와의 거리(px)입니다. |
scrollRoot | Element | null | - | 스크롤 기준 요소입니다. 생략하면 viewport/window 기준입니다. |
debug | boolean | - | 디버그 보조선을 표시합니다. |
transitionDurationMs | number | - | transform transition 시간(ms)입니다. |
onTranslateChange | (value, rootRef, contentRef) => void | - | translate 값이 변할 때 호출됩니다. |
FlexLayoutResizePanel도 export되어 있지만 보통 직접 렌더링하지 않습니다. 일반 사용에서는 FlexLayoutContainer isResizePanel을 통해 생성하세요.