Mes documents

Barre latérale multi-racine

flex-layout

  • Getting Started

  • Guides

  • Reference

typed-rx-http

  • Getting Started

  • Guides

  • Reference

global-rx-state

  • Getting Started

  • Guides

  • Reference

webflux-fe-dev-assistant

reactive-mongo-dsl

Composants

Ce sont les props des composants exportés publiquement de @byeolnaerim/flex-layout.

FlexLayout
NameTypeDefaultDescription

layoutName

requis

string

-

레이아웃 store/ref/resize memory를 묶는 고유 이름입니다.

direction

requis

"row" | "column"

-

row는 좌우, column은 상하 분할입니다.

children

requis

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
NameTypeDefaultDescription

extraHeight

number

0

계산된 height에 추가로 더할 값입니다.

extraHeightUnit

"px" | "%"

"px"

extraHeight의 단위입니다. px는 값을 더하고, %는 계산된 height 비율로 반영합니다.

targetRef

RefObject<HTMLElement | null>

-

height/minHeight를 동기화할 target element ref입니다. 생략하면 anchor의 parent element를 사용합니다.
FlexLayoutContainer
NameTypeDefaultDescription

containerName

requis

string

-

컨테이너 store/ref/open-close/drag target 식별자입니다.

children

requis

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
NameTypeDefaultDescription

layoutName

requis

string

-

split screen root store 이름입니다.

containerName

requis

string

-

초기 center 화면의 containerName입니다.

children

requis

ReactElement

-

초기 center에 렌더링할 화면입니다.

navigationTitle

requis

string

-

초기 화면의 navigation/title 라벨 데이터입니다.

navigationTitleComponent

ReactElement<{ children?: ReactNode }>

-

각 center 탭의 navigationTitle 문자열을 렌더링할 때 사용하는 공통 래퍼입니다. DragBox에는 저장되지 않습니다.

titleWrapperComponent

ReactElement<{ children?: ReactNode }>

-

navigationTitleComponent와 titleCloseButtonComponent를 함께 감싸는 공통 래퍼입니다. 생략하면 별도 DOM wrapper를 추가하지 않습니다.

titleCloseButtonComponent

ReactNode

-

center 탭의 닫기 UI를 교체합니다. undefined는 기본 X, null은 닫기 버튼 숨김입니다.

dropGuideComponent

ReactNode

-

분할 drop 영역의 기본 안내 UI를 교체합니다.

titleMoreButtonComponent

ReactNode

-

타이틀 오른쪽 More trigger를 교체합니다. undefined는 기본 ..., null은 More 숨김입니다.

renderTitleMoreMenu

FlexLayoutSplitScreenTitleMoreRenderer

-

기본 More 메뉴 전체를 교체합니다. Portal/위치/외부 클릭/ESC 동작은 유지됩니다.

renderTitleMoreMenuItems

FlexLayoutSplitScreenTitleMoreRenderer

-

기본 More 메뉴 뒤에 사용자 정의 메뉴 내용을 추가합니다.

dropDocumentOutsideOption

DropDocumentOutsideOption

-

문서 바깥 drop 및 새 창 열기에 사용할 옵션입니다.

screenKey

string

-

화면 식별 key입니다. 생략하면 내부 생성됩니다.

preserveStateOnUnmount

boolean

false

언마운트 후에도 현재 JavaScript runtime의 in-memory split store를 유지합니다. 새로고침 persistence와는 별개입니다.
FlexLayoutSplitScreenDragBox
NameTypeDefaultDescription

containerName

requis

string

-

drop될 화면의 containerName입니다.

children

requis

ReactNode

-

사용자가 드래그하는 UI입니다.

navigationTitle

string

-

drop 후 화면의 라벨 데이터입니다. 실제 타이틀 스타일은 수신하는 SplitScreen의 navigationTitleComponent가 담당합니다.

targetComponent

ReactElement

-

drop 후 split screen에 삽입할 컴포넌트입니다. 생략하면 url 기반 fallback element를 사용합니다.

url

string

-

iframe 또는 @byeolnaerim/flex-layout/next DragBox가 렌더링할 URL입니다.

iframe

boolean

false

true면 url을 iframe pane으로 렌더링합니다.

iframeProps

Omit<FlexLayoutIFramePaneProps, 'url' | 'screenKey'>

-

iframe 모드의 속성과 스타일을 전달합니다.

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 대상입니다.
FlexLayoutNextSplitScreen
NameTypeDefaultDescription

children

requis

ReactNode

-

URL 기반 pane을 사용할 FlexLayoutSplitScreen 트리입니다.

persistence.storage

Exclude<RxStateStorageOptions["storage"], "in-memory">

-

지정하면 URL 기반 split snapshot persistence를 활성화합니다.

persistence.keyName

string

-

global-rx-state에 사용할 안정적인 저장 key입니다.

persistence.restoreOnReload

boolean

true

새로고침 후 URL 기반 pane 분할 상태를 복원합니다. false면 persistence를 비활성화합니다.

persistence.syncWithBrowserUrl

boolean

false

pathname + search URL별 snapshot을 저장하고, 뒤로가기/앞으로가기 또는 같은 URL 재방문 시 해당 URL의 분할 상태를 복원하며 새로고침 시에도 현재 URL snapshot을 복원합니다.
Next.js FlexLayoutSplitScreenDragBox
NameTypeDefaultDescription

url

requis

string

-

현재 Next 앱에서 서버 렌더링할 로컬 상대 URL입니다.

iframe

boolean

false

true면 RSC 대신 iframe을 사용합니다.

targetComponent

ReactElement

-

직접 지정하면 URL 자동 렌더보다 우선하며 새로고침 persistence 대상에서는 제외됩니다.

pendingComponent

ReactNode

-

서버 렌더 요청 중 표시할 UI입니다.

errorComponent

ReactNode

-

서버 렌더 요청 실패 시 표시할 UI입니다.
FlexLayoutSplitScreenScrollBox
NameTypeDefaultDescription

keyName

requis

string

-

스크롤 위치 저장 key입니다.

direction

"x" | "y"

-

x면 wheel deltaY를 scrollLeft로 변환합니다.

isDefaultScrollStyle

boolean

false

라이브러리 기본 scroll style 사용 여부입니다.

className

string

-

추가 className입니다.
© 2026 Byeolnaerim. Tous droits réservés.PrésentationPolitique de confidentialité