開源
彈性佈局
FlexLayout 基本用法
構建可調整大小的分割視圖的最簡單範例。
左側是代碼，右側顯示相同結構的實際運行畫面。
代碼
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>
贊助 · 贊助
贊助有助於維護和提升品質。
直接用於庫更新、文檔/示例、錯誤修復和新功能開發。小額贊助也能帶來很大幫助。