도구 도크

페이지 끝에 있는 도구들: 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 -%}