Skip to content

Box

创建 Box。支持 Group 的功能和 Rect 的外观样式, 类似于 HTML5 中的 DIV,可以不断嵌套 。

关键属性

width: number

宽度,不设置宽高时会自适应内容。

height: number

高度,不设置宽高时会自适应内容。

overflow: IOverflow

如何显示超出宽高的内容,默认为 show。

ts
type IOverflow = 'show' | 'hide'

滚动属性

用于滚动内部元素,可实现滚动条效果。

scrollX: number

内部元素在 x 轴上的滚动量。

scrollY: number

内部元素在 y 轴上的滚动量。

路径模式

path 优先模式

继承

Group + Rect

API

Box

示例

创建 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)

Released under the MIT License.