自动布局
自动布局(流动),类似 Flex 的自动布局,可以快速自动排版内容。
alpha 内测插件
目前该插件仅内测用户可以体验使用、参与测试。
适用平台
支持所有平台。
安装插件
需要安装 flow 插件才能使用。
sh
npm install @leafer-in/flow
sh
pnpm add @leafer-in/flow
sh
bun add @leafer-in/flow
浏览器
通过全局变量 LeaferIN.flow 访问插件内部功能。
html
<script src="https://unpkg.com/@leafer-in/flow@1.0.0-rc.27/dist/flow.min.js"></script>
<script>
const { Flow } = LeaferIN.flow
</script>
html
<script src="https://unpkg.com/@leafer-in/flow@1.0.0-rc.27/dist/flow.js"></script>
<script>
const { Flow } = LeaferIN.flow
</script>
https://unpkg.com 无法访问时,可替换为 https://cdn.jsdelivr.net/npm
依赖插件
resize 插件
开始体验
ts
import { Leafer, Rect } from 'leafer-ui'
import { Flow } from '@leafer-in/flow'
const leafer = new Leafer({ view: window })
const red = new Rect({ fill: '#FF4B4B', width: 20, height: 20 })
const yellow = new Rect({ fill: '#FEB027', width: 20, height: 40 })
const green = new Rect({ fill: '#79CB4D', width: 20, height: 30 })
const flow = new Flow({ children: [red, yellow, green], fill: '#676', width: 100, height: 100 })
leafer.add(flow)