Dock degli strumenti

Dock degli strumenti

Strumenti lungo la fine di una pagina, come in un IDE: una barra di icone, ciascuna apre una zona in una colonna accanto alla pagina. La barra a destra di questa pagina è una di esse.

Due gruppi, uno aperto in ciascuno

Le icone in cima alla barra aprono la loro zona nella parte superiore della colonna, quelle in fondo nella parte inferiore, una aperta alla volta in ciascuna. Da sole, una zona occupa l'intera colonna; con nulla aperto, la colonna scompare. La colonna può essere allargata dal suo bordo iniziale, e ciò che ogni strumento aveva impostato torna con la pagina.

Lungo il bordo superiore

Data l'orientazione orizzontale, la barra si distende lungo la parte superiore e il dock è il corpo di una pagina, scritta in una pagina--riempi: ciò che l'inizio della barra apre sta accanto a ciò che la sua fine apre, sotto di essa. Uno strumento disegnato da bordo a bordo e che prende l'altezza della zona — un editor — lo indica con il riempimento.

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

Il file così come si legge una volta renderizzato.

Nome
dock.html.twig
Tipo
Twig

Nessuna modifica registrata.

Utilizzo

Una pagina descrive i suoi strumenti nel suo blocco page_zones_after, e il dock disegna la colonna, le sue zone, le loro maniglie e la barra. Uno strumento mostra ciò che la pagina ha disegnato per esso (contenuto), o una pagina caricata la prima volta che si apre (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 -%}

Schema

  • Due gruppi, uno aperto in ciascuno
  • Utilizzo

Dettaglio

Nome
dock.html.twig
Tipo
Twig
Dimensione
2.1 kB

Cronologia

Nessuna modifica registrata.