ツールドック

IDEのようにページの端にあるツール：アイコンのバーがあり、それぞれがページの横にある列のゾーンを開きます。このページの右側にあるバーがそれです。

二つのグループ、各々に一つ開いている

バーの上部にあるアイコンは列の上部にあるゾーンを開き、下部にあるアイコンは下部のゾーンを開きます。各々一つずつ開くことができます。ゾーンが単独の場合、列全体を占めます。何も開いていないと列は消えます。列は開始エッジから広げられ、各ツールの設定がページと共に戻ります。

上端に沿って

横向きの配置が与えられた場合、バーは上部に横たわり、ドックはページの本体となります。バーの始まりが開いているものは、その終わりが開いているものの横にあり、その下にあります。エッジからエッジまで引かれ、ゾーンの高さを取るツール—エディタ—はそう示します。

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

使用法

ページはそのpage_zones_afterブロック内でツールを説明し、ドックは列、そのゾーン、ハンドル、およびバーを描画します。ツールはページが描画したもの（コンテンツ）や、初めて開くときに読み込まれるページ（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 -%}