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

Tabs

สลับมุมมองในพื้นที่เดียว ตามแบบ WAI-ARIA

ui/tabs.tsxClient component

ใช้งาน

ASWINOLOGY° ใช้เส้นใต้ Lurnelle ใช้รางแคปซูล ลูกศรซ้ายขวาเปลี่ยนแท็บ Home และ End ไปแท็บแรกและสุดท้าย

12 บทเรียน รวม 3 ชั่วโมง 40 นาที เรียนต่อจากบทที่ 7

tsx

<Tabs
  label="เนื้อหาคอร์ส"
  items={[
    { value: "lessons", label: "บทเรียน", icon: <BookOpen />, content: <LessonList /> },
    { value: "files", label: "ไฟล์", icon: <Files />, content: <FileList /> },
    { value: "qa", label: "ถามตอบ", icon: <ChatsCircle />, content: <Questions /> },
  ]}
/>

เต็มความกว้าง

เรียนไป 4 ชั่วโมง 10 นาที

tsx

<Tabs fit label="ช่วงเวลา" items={…} />

Props

Prop	Type	Default	คำอธิบาย
`items`	`{ value, label, icon?, content }[]`	`-`	แท็บและเนื้อหา
`label`	`string`	`-`	ชื่อของรายการแท็บ บังคับ
`value / defaultValue`	`string`	`แท็บแรก`	แท็บที่เลือก
`onValueChange`	`(value) => void`	`-`	เรียกเมื่อเปลี่ยน
`fit`	`boolean`	`false`	แท็บยืดเต็มแถว

ใช้เมื่อไร

ควรทำ

ใช้กับมุมมองที่ขนานกันของสิ่งเดียวกัน
ชื่อแท็บสั้นหนึ่งถึงสองคำ

ไม่ควรทำ

ใช้แทนการนำทางระหว่างหน้า
ใช้เป็นขั้นตอนตามลำดับ ใช้ Stepper แทน