Quick Start
FlexLayout은 기본적으로 한 방향에 대한 분할 화면을 담당합니다.
기본 Row 분할
isResizePanel = true인 경우 컨테이너의 형제로 resizePanel이 렌더링 됩니다. 예를들어 Mid 컨테이너와 Right 사이에 있는 resizePanel의 소유권은 Mid에 있지만, mid-resizePanel은 자신의 양 옆 형제를 핸들링합니다.isResizePanel을 붙일 필요는 없습니다. 마지막 요소에 붙일 경우 웹 브라우저 자체의 리사이즈 기능과 겹치면서 사용자 경험을 저해 할 가능성이 있습니다.아래처럼 동적으로 렌더링 해야 할 때에는
isResizePanel을 미리 true로 렌더링하는 것보단 state를 이용하는 것을 권장합니다.Column 분할 + grow
세로 분할에서 특정 영역 비율을 미리 부여
즉 위 코드에서 top 컨테이너는 grow = 0.45, 나머지 mid, right 컨테이너는 grow = 1.275가 할당됩니다.
멀티 크로스(중첩)
두 방향 이상의 분할은 FlexLayout을 겹쳐서 생성
(이 문서에서는 암묵적으로 height로서의 역할을 CodeBolck이 수행하고 있습니다.)
마찬가지로 리사이즈 가능한 여유공간이 없는 경우에도 리사이즈가 동작하지 않을 것입니다.
그 영향권에 들어가는 것을 원치 않는다면 직계자손으로 div를 먼저 랩핑 하는 것을 권장합니다.
또한 동일한 이유로, 의도한 것과 다른 동작을 예방하고 싶다면 직계자손을 2개 이상 만들지 말 것을 권장합니다.
min/max + isFitContent
리사이즈 범위 제한 + 컨텐츠 크기 기준으로 제한
FlexLayoutContainer에 css를 이용하여 최소/최대 사이즈를 지정하면 리사이즈 되는 범위를 조절할 수 있습니다.
또는 이렇게 사용 할 수 있습니다.
실행 결과는 아래와 같습니다.
내부 컨텐츠의 동적 크기를 max size로 잡고 싶은 경우
<FlexLayoutContainer isFitContent>...</FlexLayoutContainer>를 사용할 수 있습니다. isFitContent를 사용하는 컨테이너는 내부 자식 요소들의 크기보다 크게 리사이즈 되지 않습니다.isFitContent를 부여 할 경우움직일 수 있는 여유공간의 값보다 이동 가능한 공간의 값이 더 작기 때문에 완전히 리사이즈 불가능한 레이아웃이 됩니다. 의도한 것이 아니라면 모든 컨테이너에 max size 값을 부여하지 마십시오. 최소한 하나 이상의 컨테이너는 max size가 부여되지 않아야 합니다.
패널 이동 모드 (panelMovementMode)
리사이즈 시 인접 패널과 상호작용 방식
panelMovementMode는 패널을 리사이즈할 때 인접한 패널을 어떻게 이동시키는지를 제어하는 속성입니다. 기본값은 divorce이며, 아래 모드를 사용할 수 있습니다.
bulldozer
인접한 패널을 밀어내지만 서로 달라붙지 않습니다.
divorce (기본값)
인접한 패널을 밀어내고 서로 달라붙지만, 리사이즈를 시작했던 위치로 되돌아오면 다시 분리됩니다.
stalker
인접한 패널끼리 완전히 달라붙지만 가장 끝에 도달했을 때는 다시 분리됩니다.
Last Checking
layoutName / containerName은 렌더링된 DOM Element의 id로 사용되며, 또한 getLayoutInfos, useDecompositionLayout 등의 Hook에서 내부 Store/Subject의 Key로 사용됩니다.
값은 페이지 내에서
Unique해야 합니다. 중복되면 내부 Key가 충돌해서 리사이즈/구독 대상이 섞이는 등 의도치 않은 동작이 발생할 수 있습니다.값은
Stable해야 합니다. 렌더마다 바뀌거나 조건에 따라 이름이 바뀌면 기존 상태/구독이 끊기고 “다른 레이아웃”으로 인식될 수 있습니다.공백/특수문자는 지양하고, 영문/숫자와 -, _ 위주의 값을 권장합니다.
isResizePanel사용 시 파생 식별자${ContainerName} + '_resize_panel'가 추가로 만들어집니다. 컨테이너 네이밍을 일관되고 고유하게 유지하십시오.
isResizePanel
컨테이너의 형제로 resize panel이 렌더링됩니다.
예: Mid와 Right 사이, resize panel의 소유권은 Mid에 있지만, resize panel은 양 옆 형제를 핸들링합니다.
grow
특정 컨테이너의 초기 비율을 "명시"합니다.
grow 미지정 컨테이너들은, 명시된 grow를 제외한 나머지를 균등 분배받습니다.
isFitContent
컨테이너가 내부 자식 요소들의 크기보다 크게 리사이즈 되지 않도록 제한합니다.
panelMovementMode
패널 리사이즈 시 인접 패널과의 상호작용 방식을 설정합니다.
"bulldozer": 인접한 패널을 밀어내지만 달라붙지 않음
"divorce": 인접한 패널을 밀어내고 달라붙지만 되돌아오면 분리 (기본값)
"stalker": 인접한 패널끼리 완전히 달라붙지만 가장 끝에 도달했을 때는 분리