คอมโพเนนต์ทั้งหมด

Accordion

ขยายและย่อเนื้อหาด้วย <details> ไม่ต้องใช้ JavaScript

ui/navigation.tsxServer safe

แบบเส้น

สร้างจาก <details> และ <summary> ทำงานได้โดยไม่ต้องมี JavaScript ส่ง name เดียวกันเพื่อให้เปิดได้ทีละข้อ

เรียนได้นานแค่ไหน

เข้าเรียนได้ตลอดชีพ รวมบทเรียนที่เพิ่มในอนาคต ไม่มีค่าใช้จ่ายเพิ่ม

ได้ใบประกาศนียบัตรไหม

ได้ เมื่อเรียนครบทุกบทและทำแบบทดสอบท้ายคอร์สผ่าน 70%

ขอคืนเงินได้ไหม

ขอคืนได้ภายใน 7 วันหลังซื้อ ถ้าเรียนไปไม่เกินสองบท

tsx

<Accordion>
  <AccordionItem name="faq" title="เรียนได้นานแค่ไหน" open>
    เข้าเรียนได้ตลอดชีพ รวมบทเรียนที่เพิ่มในอนาคต
  </AccordionItem>
  <AccordionItem name="faq" title="ได้ใบประกาศไหม">…</AccordionItem>
</Accordion>

แบบการ์ด

บทที่ 1 รู้จัก Agent

วิดีโอ 4 ตอน แบบฝึกหัด 1 ชุด

บทที่ 2 เขียน AGENTS.md

วิดีโอ 3 ตอน เทมเพลตดาวน์โหลด

tsx

<Accordion variant="cards">…</Accordion>

Props

Prop	Type	Default	คำอธิบาย
`Accordion.variant`	`"lines" \| "cards"`	`"lines"`	รูปแบบ
`AccordionItem.title`	`ReactNode`	`-`	หัวข้อที่กดได้
`AccordionItem.name`	`string`	`-`	ชื่อกลุ่ม เปิดได้ทีละข้อ
`AccordionItem.open`	`boolean`	`false`	เปิดไว้ตั้งแต่ต้น

summary โฟกัสและเปิดปิดด้วย Enter และ Space ได้เอง
เนื้อหาที่ปิดอยู่ยังค้นด้วย Ctrl+F ได้ในเบราว์เซอร์ที่รองรับ

แบบเส้น

แบบการ์ด

Props

การเข้าถึง