Collapsible

จาก shadcn

กล่องพับเปิด-ปิดหนึ่งช่อง ควบคุมปุ่มเปิดเองได้ ใช้ซ่อนรายละเอียดยาว เช่น รายชื่อผู้ร่วมอนุมัติ

ผู้ร่วมอนุมัติ 3 คน

น้ำใจ · ปี่ · กู้ — ทุกคนต้องกดยืนยันภายใน 3 วันทำการ มิฉะนั้นคำขอจะถูกส่งกลับผู้ยื่นอัตโนมัติ

ติดตั้ง

Terminal

pnpm dlx shadcn@latest add @whereui/collapsible

ต้องผูก registry และติดตั้ง @whereui/theme นำหน้าเสมอเมื่อติดตั้งครั้งแรก

การใช้งาน

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"<Collapsible defaultOpen>  <CollapsibleTrigger>แสดงรายชื่อ</CollapsibleTrigger>  <CollapsibleContent>น้ำใจ · ปี่ · กู้</CollapsibleContent></Collapsible>

ข้อควรรู้

ต่างจาก Accordion ตรงที่จัดการทีละกล่องและประกอบเข้ากับเลย์เอาต์อิสระ
ใช้ render={<Button variant="ghost" size="sm" />} ที่ Trigger เพื่อให้เป็นปุ่มสไตล์เดียวกับระบบ

ซอร์สโค้ด

components/ui/collapsible.tsx

"use client"import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />}function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {  return (    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />  )}function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {  return (    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />  )}export { Collapsible, CollapsibleTrigger, CollapsibleContent }