Komponenten

Die von @byeolnaerim/flex-layout veröffentlichten exportierten Komponentenprops.

FlexLayout

Name	Type	Default	Beschreibung
layoutName erforderlich	string	-	레이아웃 store/ref/resize memory를 묶는 고유 이름입니다.
direction erforderlich	"row" \| "column"	-	row는 좌우, column은 상하 분할입니다.
children erforderlich	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

Fenster-Scroll-Höhen-Synchronisierer

FlexLayoutDynamicHeightsynchronisiert die Höhe/minHeight des Ziel-Elements in einem layout, das auf dem Fenster-Scroll basiert, mit dem Inhalt und dem Viewport. Es handelt sich um eine Komponente mit einer anderen Verantwortung als das Ein- und Ausklappen bestimmter Panels. useFlexLayoutControlFlexLayoutResizePanel

Name	Type	Default	Beschreibung
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	Beschreibung
containerName erforderlich	string	-	컨테이너 store/ref/open-close/drag target 식별자입니다.
children erforderlich	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	Beschreibung
layoutName erforderlich	string	-	split screen root store 이름입니다.
containerName erforderlich	string	-	초기 center 화면의 containerName입니다.
children erforderlich	ReactElement	-	초기 center에 렌더링할 화면입니다.
navigationTitle erforderlich	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와는 별개입니다.

Standardverhalten der center-Tabs

Die Titel der Tabs im gleichen Center können durch Drag & Drop in eine andere Reihenfolge gebracht werden, und im Standard-Mehr-Menü können Sie den aktuellen Tab, andere Tabs, rechte Tabs oder alle Tabs des aktuellen Splits schließen oder Tabs mit openUrl in einem neuen Fenster öffnen.

FlexLayoutSplitScreenDragBox

Name	Type	Default	Beschreibung
containerName erforderlich	string	-	drop될 화면의 containerName입니다.
children erforderlich	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

@byeolnaerim/flex-layout/next/server

Der Standardexport des erzeugten Page-Registry ist FlexLayoutNextSplitScreen. Es bietet serverseitiges Rendering von URL-basierten Panes und optionale Persistenz, während das tatsächliche Split-UI von FlexLayoutSplitScreen intern verwaltet wird.

Name	Type	Default	Beschreibung
children erforderlich	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

@byeolnaerim/flex-layout/next

Die FlexLayoutSplitScreenDragBox des Next.js-spezifischen Einstiegspunkts benötigt die URL zwingend und konfiguriert FlexLayoutNextPane automatisch als targetComponent, wenn iframe=false ist. Sie können loading/error UI mit pendingComponent und errorComponent ersetzen.

Name	Type	Default	Beschreibung
url erforderlich	string	-	현재 Next 앱에서 서버 렌더링할 로컬 상대 URL입니다.
iframe	boolean	false	true면 RSC 대신 iframe을 사용합니다.
targetComponent	ReactElement	-	직접 지정하면 URL 자동 렌더보다 우선하며 새로고침 persistence 대상에서는 제외됩니다.
pendingComponent	ReactNode	-	서버 렌더 요청 중 표시할 UI입니다.
errorComponent	ReactNode	-	서버 렌더 요청 실패 시 표시할 UI입니다.

FlexLayoutSplitScreenScrollBox

Name	Type	Default	Beschreibung
keyName erforderlich	string	-	스크롤 위치 저장 key입니다.
direction	"x" \| "y"	-	x면 wheel deltaY를 scrollLeft로 변환합니다.
isDefaultScrollStyle	boolean	false	라이브러리 기본 scroll style 사용 여부입니다.
className	string	-	추가 className입니다.

FlexLayoutStickyBox

Name	Type	Default	Beschreibung
children erforderlich	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 값이 변할 때 호출됩니다.

wird ebenfalls exportiert, wird jedoch normalerweise nicht direkt gerendert. Bei normalem Gebrauch

wird ebenfalls exportiert, wird jedoch normalerweise nicht direkt gerendert. Bei normalem Gebrauchsollten Sie es über FlexLayoutContainer isResizePanelerstellen.