ScrollBar
无限画布滚动条。
关键属性
config: IScrollBarConfig
滚动条的配置，可作为 ScrollBar 实例化的第二个参数传入。
ts
interface IScrollBarConfig {
theme?: IScrollBarTheme // 主题样式
padding?: IFourNumber // 画布四周的padding
minSize?: number // 滚动条的最小尺寸, 默认为10
}
type IScrollBarTheme = 'light' | 'dark' | IBoxInputData关键方法
changeTheme ( theme: IScrollBarTheme )
修改主题或自定义样式。
update ( )
更新滚动条。
限制滚动范围
应用配置 config.move.scroll = 'limit' 可限制在有内容的区域滚动
继承
Group
API
ScrollBar
示例
默认主题
light 主题适用于浅色背景的画布。
ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
import { ScrollBar } from '@leafer-in/scroll'
const app = new App({ view: window, editor: {} })
new ScrollBar(app) // = app.sky.add(new ScrollBar(app.tree))
app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 500, 100))
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 650, 2400))暗黑主题
dark 主题适用于深色背景的画布。
ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
import { ScrollBar } from '@leafer-in/scroll'
const app = new App({ view: window, fill: '#000', editor: {} })
new ScrollBar(app, { theme: 'dark' })
app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 500, 100))
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 650, 2400))自定义样式
ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
import { ScrollBar } from '@leafer-in/scroll'
const app = new App({ view: window, fill: '#000', editor: {} })
new ScrollBar(app, { theme: { fill: '#32cd79' } })
app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 500, 100))
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 650, 2400))修改主题
ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
import { ScrollBar } from '@leafer-in/scroll'
const app = new App({ view: window, fill: '#000', editor: {} })
const scroll = new ScrollBar(app, { theme: 'dark' })
app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 500, 100))
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 650, 2400))
setTimeout(() => {
scroll.changeTheme('light')
}, 1000)画布 padding
padding 支持 fourNumber
ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
import { ScrollBar } from '@leafer-in/scroll'
const app = new App({ view: window, editor: {} })
const scroll = new ScrollBar(app, { padding: 100 })
app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 500, 100))
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 650, 2400))
setTimeout(() => {
scroll.config.padding = 0
scroll.update()
}, 1000)