วิดเจ็ตที่ขยายได้จะใช้องค์ประกอบที่กำหนดเอง <devsite-expandable> เพื่อให้
ผู้ใช้จะซ่อนหรือแสดงเนื้อหาบางส่วนในส่วนที่ขยายได้ ในไฟล์ Markdown ให้รวมองค์ประกอบที่กำหนดเองไว้กับองค์ประกอบ HTML มาตรฐาน เช่น <section> หรือ <div>
สลับส่วน
ตัวอย่างต่อไปนี้จะรวมอยู่ในองค์ประกอบที่กำหนดเอง <devsite-expandable> ซึ่งค่าเริ่มต้นคือตำแหน่งที่ซ่อนอยู่ ส่วนหัวมีแอตทริบิวต์ class ที่ชื่อ
showalways
แสดงส่วนหัวนี้เสมอ
ตามค่าเริ่มต้น ย่อหน้านี้จะซ่อนไว้
This code block within the custom element also defaults to a hidden
position.
การควบคุมที่กำหนดเอง
ตัวอย่างต่อไปนี้จะเพิ่มคลาส expand-control ลงในองค์ประกอบ button ขององค์ประกอบที่กําหนดเอง <devsite-expandable> เพื่อขยายและยุบส่วนนั้นโดยไม่ต้องใช้ปุ่มเปิด/ปิด
มีตัวเลือกมากมาย
ขยายครั้งเดียว
ตัวอย่างต่อไปนี้เป็นการเพิ่มคลาส expand-control once ไปยังลิงก์ภายใน
<devsite-expandable> องค์ประกอบที่กำหนดเองที่แสดงเนื้อหาเพิ่มเติมเมื่อคลิก
แล้วหายไปจากหน้า
โลเร็ม อิปซัม
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
เพิ่มเติม...Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ยกเว้นeur sint occaecat cupidatat non Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ขยายอัตโนมัติเมื่อลิงก์
ตัวอย่างต่อไปนี้จะเพิ่มรหัส #sample1 ลงใน<devsite-expandable>องค์ประกอบที่กําหนดเองซึ่งจะขยายส่วนโดยอัตโนมัติเมื่อโหลดหน้าเว็บเมื่อคุณลิงก์ไปยังส่วนนั้น
วิธีการขยายอัตโนมัติเมื่อเชื่อมโยง
ปิดส่วนขยายได้นี้ คลิกลิงก์ #sample1 ด้านบน แล้วโหลดหน้าเว็บซ้ำเพื่อขยายส่วนขยายได้นี้โดยอัตโนมัติ
Code block within the 'Auto-expand on linking' demo.
เปิดโดยค่าเริ่มต้น
ตัวอย่างต่อไปนี้จะเพิ่มแอตทริบิวต์ expanded ลงในองค์ประกอบที่กําหนดเอง <devsite-expandable> เพื่อให้เปิดแบบขยายโดยค่าเริ่มต้น
ขยายโดยค่าเริ่มต้น
"เปิดโดยค่าเริ่มต้น" เหมาะอย่างยิ่งเมื่อคุณมีหลายรายการที่ขยายได้ เช่น หมายเหตุประจำรุ่น แต่ต้องการเปิดรายการล่าสุดไว้