Dock de herramientas

Herramientas a lo largo del final de una página, como las que tiene un IDE: una barra de íconos, cada uno abriendo una zona en una columna al lado de la página. La barra a la derecha de esta página es una.

Dos grupos, uno abierto en cada uno

Los íconos en la parte superior de la barra abren su zona en la parte superior de la columna, aquellos en su pie en la parte inferior, uno abierto a la vez en cada uno. Solo, una zona ocupa toda la columna; con nada abierto, la columna desaparece. La columna se arrastra más ancha desde su borde inicial, y lo que cada herramienta tenía se recupera con la página.

A lo largo del borde superior

Con orientación horizontal, la barra se encuentra a lo largo de la parte superior y el dock es el cuerpo de una página, escrito en una página--relleno: lo que el inicio de la barra abre se encuentra al lado de lo que su final abre, debajo de ella. Una herramienta dibujada de borde a borde y ocupando la altura de la zona — un editor — lo indica con relleno.

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

Uso

Una página describe sus herramientas en su bloque page_zones_after, y el dock dibuja la columna, sus zonas, sus manijas y la barra. Una herramienta muestra lo que la página dibujó para ella (contenido), o una página cargada la primera vez que se abre (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 -%}