分隔面板把空间分给多个面板,每两个相邻面板之间都有一个分隔条。拖动分隔条,或让它获得焦点后使用方向键即可调整。尺寸是总和为 100 的百分比,可以用 [(sizes)] 绑定。

每个面板的初始尺寸、最小尺寸和最大尺寸都可以用像素、rem 或百分比指定。设置了 collapsible 的面板在被拖到小于最小尺寸的一半时,或在其分隔条上按 Enter 键时会折叠起来,展开时则恢复为折叠前的尺寸。

设置 storageKey 后,尺寸会保存在 localStorage 中,用户下次访问时,布局仍是离开时的样子。

编辑器

文件、代码和预览三个面板。文件和预览可以折叠,代码至少保留 30% 的宽度,各面板的尺寸会被保存下来。

export class App {}

// app.ts

上下堆叠的面板

orientation="vertical" 让面板上下堆叠,[(sizes)] 则会随时读取变化中的尺寸。

SELECT name, total FROM orders

3 rows

Sizes: 65% and 35%