--- title: แท็บ slug: th/user-guides/IJVmNVHzfrj10iV1FDqDn createdAt: 2024-07-24T11:17:19.316Z --- ![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-qlzuX6ak9nYvTvfqGAc1q-20240822-125616.png) Tabs เป็นบล็อกที่ช่วยให้คุณจัดระเบียบเนื้อหาเป็นหลายส่วนภายในเอกสารเดียว คล้ายกับชุดแท็บที่คุณสามารถคลิกเพื่อดูข้อมูลต่างๆ คิดซะว่าเป็นวิธีสร้างหลายหน้าในหนึ่งหน้า ## ทำไมถึงควรใช้ - **จัดระเบียบเนื้อหาที่ซับซ้อน** - จัดกลุ่มเนื้อหาที่เกี่ยวข้องไว้ในแท็บแยกกันเพื่อให้มีโครงสร้างและอ่านง่ายขึ้น - **ปรับปรุงความสามารถในการอ่าน** - ทำให้เนื้อหาของคุณนำทางและเข้าใจได้ง่ายขึ้น - **ประหยัดพื้นที่** - ใช้พื้นที่อย่างมีประสิทธิภาพโดยแสดงเนื้อหาแบบลำดับแทนการแสดงทั้งหมดพร้อมกัน - **สร้างประสบการณ์เชิงโต้ตอบ** ดึงดูดผู้ใช้ด้วยการให้พวกเขาเลือกข้อมูลที่ต้องการดูได้อย่างอิสระ ## วิธีใช้บล็อกแท็บ ::::::WorkflowBlock :::WorkflowBlockItem พิมพ์ `/` เพื่อเปิดเมนูบล็อกของ Archbee ::: :::WorkflowBlockItem ค้นหา **Tabs** บล็อกและคลิกเพื่อแทรก ![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-eXhqk7Cgjios95U2j8it8-20240822-124946.png) ::: :::WorkflowBlockItem ปรับแต่งแท็บและชื่อของคุณ โดยค่าเริ่มต้น บล็อกจะถูกสร้างด้วย 2 แท็บชื่อ "Tab Name" และ "Second Tab Name" หากต้องการเปลี่ยนชื่อแท็บ คุณต้องเข้าสู่โหมดแก้ไขป้ายชื่อโดย: - ดับเบิลคลิกที่ป้ายชื่อแท็บ - หรือคลิกไอคอน "แก้ไขป้ายชื่อ" ( :FontAwesome[]{icon="fa-solid fa-pen-to-square"} ) กดบันทึก ( :FontAwesome[]{icon="fa-solid fa-check"} ) เพื่ออัปเดตป้ายชื่อ หรือกดยกเลิก ( **↩** ) เพื่อย้อนกลับการเปลี่ยนแปลง ::: :::::WorkflowBlockItem เพิ่มเนื้อหาของคุณได้ตามต้องการ คุณสามารถจัดรูปแบบเนื้อหาได้ตามใจผ่าน [เมนู WYSIWYG](#) หรือแม้แต่แทรกบล็อกอื่นๆ เช่น: ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem บล็อกพื้นฐาน - [Headings](docId\:n7tF0cW1NYcGJ95eLyvzv) - [หัวข้อที่ขยายได้](docId\:Gdj2J6Ro-QNT7JUkoTd8z) - [รายการ](docId\:qFf_dOYkfQ7nFLxAQMEBC) - [โต๊ะ](docId\:Xh28xOC0z6lg23PayqMh9) - [ปุ่ม](docId\:sZpaH1N-I3assa06PZ8Vq) - [Callout](docId\:RSZRJI1QAMLJnfm5FEyuI) - [เส้นคั่นแนวนอน](docId\:SUdKbXtAQXtHuYA3FvceR) - [แบ่งแนวตั้ง](docId\:epkJXYZWmv9qcLHsuSwpz) - [Minitaskers](docId\:ypbz6l-K-NWw4jeTmZBg6) - [กริดลิงก์](docId\:C6xVzYU69k2oCYqLWkaQC) - [เวิร์กโฟลว์](docId\:uO-p5uNPbIu6EIV95OtY6) ::: :::LinkArrayItem บล็อกสื่อ - [ไฟล์](docId\:MEMy73RjJGuMNIqzyG_Qg) - [รูปภาพ](docId\:pfxmITebqYMNG3_1KMqb4) - [วิดีโอ](docId:5BHBpuA1QsB91PTPJUBHN) - [แผนที่](docId\:MZRckUAyZJ5--ar6IRvx6) ::: :::LinkArrayItem บล็อกสำหรับนักพัฒนา - [Code editor: multi-language](docId\:AWmOv__BlChJLUPRL0vkl) - [ผังงาน Mermaid](docId\:uc96cNog8JW20Uuc3XRQ8) - [สมการ TeX](docId\:VH5FHVPu7aSDnS2y3Bof0) - [API endpoints](docId\:zOTQ1_cU55csykLxhCgf8) - [OpenAPI/Swagger](docId:2ILxmtxXRBocLfc7t3kao) - [Changelog](docId\:L6g37a96AJkcZ2tcfAjTM) ::: :::: นอกจากนี้ การผสานรวมส่วนใหญ่ของเรายังทำงานภายในบล็อกแท็บ คุณสามารถเพิ่มการฝังจากเครื่องมืออื่นๆ เช่น Loom, Figma, Miro, Lucidcharts และอื่นๆ ตรวจสอบหน้า [Embedded Blocks.](docId:_Ht4fXtrP-c5akFFn-eSN) สำหรับข้อมูลเพิ่มเติม ::::: :::::: ## มาร์กดาวน์ นี่คือวิธีสร้างแท็บในเอกสารของคุณโดยใช้โค้ดมาร์กดาวน์: :::::WorkflowBlock :::WorkflowBlockItem เริ่มต้นด้วยบรรทัด `:::tabs` . ::: ::::WorkflowBlockItem เนื้อหาของแต่ละแท็บจะอยู่ระหว่าง `:::tab` และ `:::` . :::hint{type="warning"} **🚨 ระวัง!** เครื่องหมายโคลอน `:` ควรวางไว้ในองค์ประกอบมาร์กดาวน์แม่เพื่อระบุว่ามันครอบองค์ประกอบมาร์กดาวน์อื่น ::: ในกรณีนี้ `:::tabs` จะเปลี่ยนเป็น `::::tabs` . ให้ชื่อแต่ละแท็บด้วยวงเล็บปีกกา เช่น `{title="ชื่อส่วนของคุณ"}` นี่คือชื่อที่จะปรากฏบนหัวข้อแท็บ :::: :::WorkflowBlockItem ใส่เนื้อหาที่คุณต้องการในแท็บนี้ระหว่างบรรทัดเหล่านั้น ดูด้านบนสำหรับบล็อกที่อนุญาตให้ใช้ภายในบล็อกแท็บ ตรวจสอบหน้า [ใช้ทางลัด Markdown](docId:1mgrOzhjKNd15rSrjHvfx) เพื่อดูวิธีใช้บล็อกอื่น ๆ ด้วยมาร์กดาวน์ ::: :::WorkflowBlockItem สร้างแท็บได้ตามต้องการและปิดบล็อกแท็บของคุณ อย่าลืมเพิ่มโคลอนสำหรับแต่ละระดับที่ซ้อนกัน ด้านล่างคือตัวอย่างของบล็อกแท็บโดยใช้มาร์กดาวน์ ::: ::::: ```markdown ## Tabs :::::tabs ::::tab{title="Tab 1"} Some content for Tab 1 :::hint{style="info"} Pull requests are very welcome! Please see CONTRIBUTING.md for more information. Tthis is really nice ::: - [x] This is a checkbox list - [x] This is a checkbox list - [ ] This is done - [ ] This is a checkbox list :::: :::tab{title="Tab Photos"} ![](https://placehold.co/600x400) We would love you to contributeaaa ::: ::::: ``` นี่คือผลลัพธ์: :::::Tabs ::::Tab{title="แท็บ 1"} เนื้อหาบางส่วนสำหรับแท็บ 1 :::hint{type="info" attributes="{"style":"info"}"} ยินดีต้อนรับการส่ง Pull request! โปรดดู CONTRIBUTING.md สำหรับข้อมูลเพิ่มเติม นี่ดีมากจริงๆ ::: - [x] นี่คือรายการเช็กบ็อกซ์ - [x] นี่คือรายการเช็กบ็อกซ์ - [ ] เสร็จแล้ว - [ ] นี่คือรายการเช็กบ็อกซ์ :::: :::Tab{title="แท็บรูปภาพ"} ### รูปภาพในแท็บ ::Image[]{src="https://placehold.co/600x400" size="50" isUploading="false" darkWidth="600" darkHeight="400" width="600" height="400" showCaption="false"} เราต้องการให้คุณมามีส่วนร่วมมากๆ aaa ::: ::::: หรือใช้ Markdown รูปแบบนี้เพื่อสร้างบล็อกแท็บ ```markdown {% tabs %} {% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %} {% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %} {% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %} {% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %} {% endtabs %} ``` ตรวจสอบ [ใช้ทางลัด Markdown](docId:1mgrOzhjKNd15rSrjHvfx) หน้าเพื่อดูคีย์ลัดมาร์กดาวน์เพิ่มเติมสำหรับบล็อกอื่นๆ ## ตัวอย่าง ดูที่ [หน้าการแยกแนวตั้ง ตัวอย่างส่วนต่างๆ](docId\:epkJXYZWmv9qcLHsuSwpz) *** ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"} :FontAwesome[]{icon="fa-solid fa-cubes"} ** ค้นหาบล็อกอื่น ๆ** ค้นพบวิธีใหม่ ๆ และบล็อกต่าง ๆ เพื่อสร้างหน้าเอกสารที่สวยงามและใช้งานได้ดี [ดูบล็อกทั้งหมด](docId\:fvbccw7nLvGJbcHvBvBG9) ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"} :FontAwesome[]{icon="fa-solid fa-headset"}** ต้องการความช่วยเหลือ? ⬇️** ใช้ **สีน้ำเงิน** **ไอคอนแชท** ที่มุมขวาล่าง หรือใช้ **AI Chat** (จากช่องค้นหา) เพื่อคำตอบอย่างรวดเร็ว ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"} :FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}** ความคิดเห็นของคุณสำคัญ** ใช้แบบฟอร์มความคิดเห็นด้านล่าง แบบไม่ระบุตัวตน หรือถามคำถามใน **หมวดคำถามและคำตอบ** และทีมของเราหรือ AI จะให้คำแนะนำแก่คุณ ::: ::::