Box
创建 Box。支持 Group 的功能和 Rect 的外观样式, 类似于 HTML5 中的 DIV,可以不断嵌套 。
关键属性
width: number
宽度,不设置宽高时会自适应内容。
height: number
高度,不设置宽高时会自适应内容。
overflow: IOverflow
如何显示超出宽高的内容,默认为 show。
ts
type IOverflow = 'show' | 'hide'
滚动属性
用于 Box / Frame 滚动内部元素,可实现滚动条效果。
scrollX: number
内部元素在 x 轴上的滚动量。
scrollY: number
内部元素在 y 轴上的滚动量。
编辑属性
textBox: boolean
是否为文本框,默认为 false。
为文本框时,可在编辑器中双击 Box 元素直接编辑内部的 editable 子文本,适用于输入框、便利贴、脑图、流程图等编辑文本的场景。
路径模式
path 优先模式
继承
Group + Rect
示例
创建 Box
ts
import { Leafer, Box, Ellipse } from 'leafer-ui'
const leafer = new Leafer({ view: window, fill: 'gray' })
const box = new Box({
width: 100,
height: 100,
fill: '#FF4B4B'
})
const rect = new Ellipse({
x: 60,
y: 60,
width: 50,
height: 50,
fill: '#FEB027',
draggable: true
})
leafer.add(box)
box.add(rect)
隐藏超出宽高的内容
ts
import { Leafer, Box, Ellipse } from 'leafer-ui'
const leafer = new Leafer({ view: window, fill: 'gray' })
const box = new Box({
width: 100,
height: 100,
fill: '#FF4B4B',
overflow: 'hide'
})
const rect = new Ellipse({
x: 60,
y: 60,
width: 50,
height: 50,
fill: '#FEB027',
draggable: true
})
leafer.add(box)
box.add(rect)
创建自适应背景的文本
ts
import { Leafer, Box } from 'leafer-ui'
const leafer = new Leafer({ view: window, fill: 'gray' })
const box = new Box({
x: 100,
y: 100,
fill: '#FF4B4B',
cornerRadius: 20,
children: [{
tag: 'Text',
text: 'Welcome to LeaferJS',
fill: 'black',
padding: [10, 20],
textAlign: 'left',
verticalAlign: 'top'
}]
})
leafer.add(box)