マイライブラリドキュメント

マルチルートサイドバー

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

基本レイアウト

FlexLayout + FlexLayoutContainerの最も基本的な構成ルールです。


基本構造

FlexLayoutは一つの方向(row/column)を持つ分割レイアウトで、子要素は FlexLayoutContainerで構成されます。Fragmentの場合はフラット化して再処理しますが、できるだけ実際のパネル単位は常にcontainerNameを持つコンテナで保持するのが安全です。

tsx
layoutName / containerNameルール

layoutName

레이아웃 단위의 고유 이름입니다. resize memory, container ref store, split screen store가 이 이름을 기준으로 묶입니다.

containerName

각 패널의 고유 이름입니다. open/close, double click, size observe, drag/drop target 식별에 사용됩니다.

direction

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

入れ子レイアウト

一つの画面で左右分割の中に上下分割を再度入れたい場合は、コンテナ内部に別の FlexLayoutを入れます。各レイアウトの layoutNameは互いに異なる必要があり、storeの衝突を避けることができます。

tsx
© 2026 Byeolnaerim. 無断転載を禁じます。紹介プライバシーポリシー