Dock d'outils

Des outils au bord d'une page, comme dans un IDE : une barre d'icônes, chacune ouvrant une zone dans une colonne à côté de la page. La barre à droite de cette page en est une.

Deux groupes, une zone ouverte dans chacun

Les icônes du haut de la barre ouvrent leur zone dans la partie haute de la colonne, celles du bas dans la partie basse, une seule ouverte à la fois dans chaque groupe. Seule, une zone prend toute la colonne ; quand rien n'est ouvert, la colonne disparaît. La colonne s'élargit en tirant son bord de début, et l'état de chaque outil revient avec la page.

Le long du bord supérieur

Avec l'orientation horizontal, la barre est posée en haut et le dock devient le corps d'une page, écrit dans un page--fill : ce qu'ouvre le début de la barre se place à côté de ce qu'ouvre sa fin, en dessous. Un outil dessiné bord à bord sur toute la hauteur de la zone — un éditeur — le demande avec fill.

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

Utilisation

Une page décrit ses outils dans son bloc page_zones_after, et le dock dessine la colonne, ses zones, leurs poignées et la barre. Un outil affiche ce que la page a dessiné pour lui (content), ou une page chargée à sa première ouverture (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 -%}