オープンソース
FLEXレイアウト
FlexLayoutの基本的な使い方
リサイズ可能なSplit Viewを最もシンプルな形で構成する例です。
左側はコード、右側は同じ構造の実際の動作画面を示しています。
コード
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>
スポンサー · 支援
支援がメンテナンスとクオリティを向上させます。
ライブラリの更新、文書/例、バグ修正、新機能開発に直接使用されます。小さな支援も本当に大きな力です。
お問い合わせ