แถบเครื่องมือด็อก

เครื่องมือที่อยู่ตามขอบของหน้าเหมือนที่ 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 -%}