Um splitter divide o espaço entre painéis, com uma alça entre cada dois. Arraste uma alça, ou coloque o foco nela e use as setas. Os tamanhos são porcentagens que somam 100 e se vinculam com [(sizes)].

Cada painel recebe um tamanho inicial, um mínimo e um máximo em pixels, rem ou porcentagem. Um painel collapsible se recolhe quando é arrastado abaixo da metade do mínimo, ou com Enter na alça dele, e volta com o tamanho que tinha.

Com storageKey, os tamanhos ficam guardados em localStorage, então na próxima visita cada pessoa encontra o layout do jeito que deixou.

Um editor

Arquivos, código e uma prévia. Os arquivos e a prévia se recolhem, o código fica com pelo menos 30% da largura, e os tamanhos são salvos.

export class App {}

// app.ts

Painéis empilhados

orientation="vertical" empilha os painéis, e [(sizes)] lê os tamanhos deles conforme mudam.

SELECT name, total FROM orders

3 rows

Sizes: 65% and 35%