OPEN SOURCE
FLEX LAYOUT
FlexLayout 기본 사용법
리사이즈 가능한 Split View를 가장 단순한 형태로 구성하는 예시입니다.
왼쪽은 코드, 오른쪽은 동일한 구조의 실제 동작 화면을 보여줍니다.
Code
import { FlexLayout, FlexLayoutContainer } from "@byeolnaerim/flex-layout";
<FlexLayout direction="column" layoutName="column-layout">
<FlexLayoutContainer containerName="top-container" isResizePanel>
<FlexLayout direction="row" layoutName="top-layout">
<FlexLayoutContainer containerName="top-left" isResizePanel grow={1.3}>
...
</FlexLayoutContainer>
<FlexLayoutContainer containerName="top-right" grow={0.7}>
...
</FlexLayoutContainer>
</FlexLayout>
</FlexLayoutContainer>
<FlexLayoutContainer containerName="bottom-container">
<FlexLayout direction="row" layoutName="bottom-layout">
<FlexLayoutContainer containerName="bottom-left" isResizePanel grow={0.3}>
...
</FlexLayoutContainer>
<FlexLayoutContainer containerName="bottom-right" grow={1.7}>
...
</FlexLayoutContainer>
</FlexLayout>
</FlexLayoutContainer>
</FlexLayout>
SPONSOR · 후원
후원이 유지보수와 퀄리티를 올립니다.
라이브러리 업데이트, 문서/예제, 버그 픽스, 신규 기능 개발에 직접 사용돼요. 작은 후원도 정말 큰 힘입니다.
CONTACT