分隔面板把空间分给多个面板,每两个相邻面板之间都有一个分隔条。拖动分隔条,或让它获得焦点后使用方向键即可调整。尺寸是总和为 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%