分割窗格會把空間分給多個窗格,每兩個相鄰的窗格之間都有一個控點。拖曳控點,或讓它取得焦點後使用方向鍵即可調整。大小是加總為 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%