自动布局

自动布局（流动），类似 Flex 的自动布局，可以快速自动排版内容。

适用平台

支持所有平台，自动布局的元素暂时不支持 图形编辑 功能。

安装插件

需要安装 flow 插件才能使用。

npm

npm install @leafer-in/flow

pnpm

pnpm add @leafer-in/flow

bun

bun add @leafer-in/flow

通过 script 标签引入

通过全局变量 LeaferIN.flow 访问插件内部功能，点此访问 Github 仓库。

flow.min

<script src="https://unpkg.com/@leafer-in/flow@1.0.9/dist/flow.min.js"></script>
<script>
  const { Flow } = LeaferIN.flow
</script>

flow

<script src="https://unpkg.com/@leafer-in/flow@1.0.9/dist/flow.js"></script>
<script>
  const { Flow } = LeaferIN.flow
</script>

https://unpkg.com 无法访问时，可替换为 https://cdn.jsdelivr.net/npm

依赖插件

resize 插件 (会自动安装)

开始体验

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)

下一步

Flow 元素