Dock de ferramentas

Ferramentas ao longo do final de uma página, como um IDE as tem: uma barra de ícones, cada uma abrindo uma zona em uma coluna ao lado da página. A barra à direita desta página é uma delas.

Dois grupos, um aberto em cada

Os ícones na parte superior da barra abrem sua zona na parte superior da coluna, aqueles na parte inferior na parte inferior, um aberto por vez em cada. Sozinha, uma zona ocupa toda a coluna; com nada aberto, a coluna desaparece. A coluna é arrastada para ficar mais larga a partir de sua borda inicial, e o que cada ferramenta estava configurada volta com a página.

Ao longo da borda superior

Com a orientação horizontal, a barra fica ao longo do topo e o dock é o corpo de uma página, escrito em uma página--preencher: o que o início da barra abre fica ao lado do que seu fim abre, abaixo dele. Uma ferramenta desenhada de borda a borda e ocupando a altura da zona — um editor — diz isso com preenchimento.

Linha 1
Linha 2
Linha 3
Linha 4
Linha 5
Linha 6
Linha 7
Linha 8
Linha 9
Linha 10
Linha 11
Linha 12
Linha 13
Linha 14
Linha 15
Linha 16
Linha 17
Linha 18
Linha 19
Linha 20
Linha 21
Linha 22
Linha 23
Linha 24
Linha 25
Linha 26
Linha 27
Linha 28
Linha 29
Linha 30
Linha 31
Linha 32
Linha 33
Linha 34
Linha 35
Linha 36
Linha 37
Linha 38
Linha 39
Linha 40

Uso

Uma página descreve suas ferramentas em seu bloco page_zones_after, e o dock desenha a coluna, suas zonas, suas alças e a barra. Uma ferramenta mostra o que a página desenhou para ela (conteúdo), ou uma página carregada da primeira vez que é aberta (url).

{%- block page_zones_after -%}
    {{ tool_dock('board.file', [
        { name: 'outline', label: 'Outline', icon: 'ph:bold/list-bullets', content: outline },
        { name: 'detail', label: 'Detail', icon: 'ph:bold/info', group: 'end', open: true, content: detail },
        { name: 'history', label: 'History', icon: 'ph:bold/clock-counter-clockwise', group: 'end', url: path('app_file_history') },
    ]) }}
{%- endblock -%}