แท็บ

วิดเจ็ตแท็บใช้องค์ประกอบที่กําหนดเองของ <devsite-selector> เพื่อจัดระเบียบข้อมูลที่มีการนําเสนอหลายครั้ง เช่น ตัวอย่างโค้ดในภาษาต่างๆ ด้านโปรแกรม หรือโครงสร้างข้อมูลที่นําเสนอด้วยรูปแบบต่างๆ (เช่น JSON, YAML หรือ XML)

การใช้งานทั่วไป

ตัวอย่างต่อไปนี้ใช้องค์ประกอบที่กําหนดเอง <devsite-selector> เพื่อแสดงส่วนแท็บ 3 ส่วนโดยใช้ HTML

ชื่อแท็บ 1

Tab Tab 1 Content
Lorem ipsum dolorพื้นที่นั่งเล่น amet, consectetur adipiscing elit ภาคเรียนภาคฤดูร้อน Nunc Masa ipsum, mollis non neque sed, vulputate dignissim odio.

ชื่อแท็บ 2

เนื้อหาแท็บ 2
ภาคเรียนภาคฤดูร้อน Nunc Masa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolorพื้นที่นั่งเล่น amet, consectetur adipiscing elit

ชื่อแท็บ 3

เนื้อหาแท็บ 3
Nunc Masa ipsum, mollis non neque sed, vulputate dignissim odio Lorem ipsum dolorพื้นที่นั่งเล่น amet, consectetur adipiscing elit ภาคเรียนภาคเรียนของ Curabitur Toror nec dictum sagittis

ตัวอย่างต่อไปนี้ใช้ไวยากรณ์ Markdown เพื่อแสดงแท็บ 3 แท็บเดียวกัน

ชื่อแท็บ 1

Tab Tab 1 Content
Lorem ipsum dolorพื้นที่นั่งเล่น amet, consectetur adipiscing elit แคมเปญทรานส์เฟอร์ Nunc Masa ipsum, mollis non neque sed, vulputation dignissim odio.

ชื่อแท็บ 2

เนื้อหาแท็บ 2
Curabitur semper tortor nec dictum sagittis Nunc Masa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolorพื้นที่นั่งเล่น amet, consectetur adipiscing elit

ชื่อแท็บ 3

เนื้อหาแท็บ 3
Nunc Masa ipsum, mllis non neque sed, vulputate dignissim odio Lorem ipsum dolorพื้นที่นั่งเล่น amet, consectetur adipiscing elit ทอร์เรเตอร์ของกูร์เมต์ Curabitur nec dictum sagittis

วิดเจ็ตแท็บที่มีเมนูรายการเพิ่มเติม

ตัวอย่างต่อไปนี้ใช้องค์ประกอบที่กําหนดเอง <devsite-selector> แต่มีจํานวนแท็บมากเกินไปให้พอดีกับหน้าจอและอยู่ในเมนูแบบเลื่อนลงเพิ่มเติมโดยอัตโนมัติ

แอปเปิ้ล

เนื้อหาเกี่ยวกับแอปเปิ้ล

แอพริคอต

เนื้อหาเกี่ยวกับแอปปริซึม

อะโวคาโด

เนื้อหาเกี่ยวกับอะโวคาโด

มะเดื่อ

เนื้อหาเกี่ยวกับมะเดื่อ

องุ่น

เนื้อหาเกี่ยวกับองุ่น

ผลไม้

เนื้อหาเกี่ยวกับผลไม้

เลมอน

เนื้อหาเกี่ยวกับมะนาว

มะนาว

เนื้อหาเกี่ยวกับมะนาว

มะม่วง

เนื้อหาเกี่ยวกับมะม่วง

ลูกพีช

เนื้อหาเกี่ยวกับลูกพีช

ตัวอย่างต่อไปนี้ใช้ไวยากรณ์ Markdown เพื่อแสดงเมนูรายการเพิ่มเติมเดียวกัน

แอปเปิ้ล

เนื้อหาเกี่ยวกับแอปเปิ้ล

แอพริคอต

เนื้อหาเกี่ยวกับแอปปริซึม

อะโวคาโด

เนื้อหาเกี่ยวกับอะโวคาโด

มะเดื่อ

เนื้อหาเกี่ยวกับมะเดื่อ

องุ่น

เนื้อหาเกี่ยวกับองุ่น

ผลไม้

เนื้อหาเกี่ยวกับผลไม้

เลมอน

เนื้อหาเกี่ยวกับมะนาว

มะนาว

เนื้อหาเกี่ยวกับมะนาว

มะม่วง

เนื้อหาเกี่ยวกับมะม่วง

ลูกพีช

เนื้อหาเกี่ยวกับลูกพีช

ชื่อแท็บซ้ํากันในวิดเจ็ตหลายแท็บ

การคลิกแท็บจะส่งผลต่อแท็บอื่นๆ ทั้งหมดในหน้าเว็บที่มีข้อความเดียวกันในไวยากรณ์เดียวกัน ตัวอย่างเช่น การคลิกแอปเปิลหรือแอปริคอตในวิดเจ็ตด้านล่างก็ส่งผลต่อวิดเจ็ตที่ 2 ในหัวข้อก่อนหน้าเช่นกัน เนื่องจากทั้ง 2 แอปสร้างขึ้นด้วย Markdown

แอปเปิ้ล

เนื้อหาเพิ่มเติมเกี่ยวกับแอปเปิ้ล

แอพริคอต

มีเนื้อหาเพิ่มเติมเกี่ยวกับการวิเคราะห์ด้วย

การปรับแต่งวิดเจ็ตแท็บ

เมื่อสร้างวิดเจ็ตแท็บด้วย Markdown ได้ คุณจะต้องใช้ไวยากรณ์ HTML เพื่อกําหนดแอตทริบิวต์ที่กําหนดเอง

การรวมข้อความไว้ในแท็บ

ระบบจะตัดข้อความที่มีความกว้างเกินสูงสุดของแท็บที่ DevSite กําหนด โดยตัดส่วนต่อท้ายด้วยจุดไข่ปลา ตัวอย่างต่อไปนี้ใช้คลาส two-line-tab ในองค์ประกอบที่กําหนดเอง <devsite-selector> เพื่อรวมข้อความไว้ในแท็บที่ 2

ป้ายกํากับนี้ยาวซึ่งไม่มีการตัดขึ้นบรรทัดใหม่

ป้ายกํากับนี้ไม่รวมบรรทัดอื่น

ป้ายกํากับนี้เป็นบรรทัดที่ 2

ป้ายกํากับสําหรับแท็บนี้จะรวมอยู่กับบรรทัดที่ 2

การรวมข้อความภายในแท็บที่มีป้ายกํากับขนาดเล็ก

ตัวอย่างต่อไปนี้ตั้งค่า two-line-tab เป็นบรรทัดแรก และ tab-label เป็นบรรทัดที่ 2 ภายในองค์ประกอบที่กําหนดเอง <devsite-selector> เพื่อแสดงป้ายกํากับที่เล็กลงบนบรรทัดที่ 2 ของแท็บ 2 บรรทัด ,

Swift

แท็บนี้มีป้ายกํากับ Swift

Java

แท็บ 2 บรรทัดนี้มีป้ายกํากับ Android ขนาดเล็กกว่าป้ายกํากับ Java

Kotlin

แท็บ 2 บรรทัดนี้มีป้ายกํากับ Android ขนาดเล็กกว่าป้ายกํากับ Kotlin

Java

แท็บนี้มีป้ายกํากับ Java

การลิงก์โดยตรงไปยังแท็บที่ต้องการ

ตัวอย่างต่อไปนี้จะลิงก์และเปิดแท็บที่ต้องการได้โดยตรงโดยการระบุ id ภายในองค์ประกอบที่กําหนดเอง <devsite-selector>

โคลโบล

แท็บนี้เป็นค่าเริ่มต้น แต่คุณใช้แท็ก Anchor ของ #cobol ได้

Fortran

คุณจะต้องลิงก์ไปยังแท็บนี้โดยตรงโดยการเพิ่ม Anchor ของ #fortran ต่อท้ายลิงก์ของคุณ

Haskell

แท็บนี้จะใช้แท็ก Anchor ของ #haskell ในลิงก์ของคุณ

ลิงก์ต่อไปนี้จะเพิ่มพารามิเตอร์การค้นหา ?tab=Apricots ต่อท้าย URL ของหน้านี้ และโหลดหน้าที่มีแท็บ Apiicots เปิดอยู่ในตัวเลือกทั้งหมด

https://www.devsitetest.how/integration-tests/plugins/tabs?tab=Apiicots