โอเพนซอร์ส
FLEX LAYOUT
วิธีการใช้ 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>
สนับสนุน · สนับสนุน
การสนับสนุนช่วยเพิ่มการบำรุงรักษาและคุณภาพ
ใช้โดยตรงในการอัปเดตห้องสมุด เอกสาร/ตัวอย่าง แก้ไขข้อบกพร่อง และพัฒนาฟีเจอร์ใหม่ การสนับสนุนเล็กน้อยก็มีความหมายมาก
สนับสนุนผ่าน GitHub Sponsorsสนับสนุนผ่าน Ko-fiการสนับสนุนรายเดือน/ครั้งเดียวทั้งหมด OK · ขอบคุณมาก 🙏
ติดต่อ