Separator

จาก shadcn

เส้นคั่นเนื้อหาทั้งแนวนอนและแนวตั้ง ใช้แบ่งหัวข้อหรือคั่นข้อมูล metadata ในบรรทัดเดียว

คำขอลาพักร้อนของ สมหญิง

ยื่นเมื่อ 12 พ.ย.

ฝ่ายบุคคล

รอผู้จัดการอนุมัติ

เนื้อหาส่วนล่างถูกคั่นจากส่วนหัวด้วยเส้นแนวนอน

ติดตั้ง

Terminal

pnpm dlx shadcn@latest add @whereui/separator

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

การใช้งาน

import { Separator } from "@/components/ui/separator"<Separator className="my-4" /><Separator orientation="vertical" className="h-4" />

ข้อควรรู้

แนวตั้งควรกำหนดความสูง (เช่น h-4) เพราะค่าเริ่มต้นยืดตามความสูงของแถว
เส้นคั่นเชิงตกแต่งถูกซ่อนจาก screen reader อัตโนมัติ

ซอร์สโค้ด

components/ui/separator.tsx

"use client"import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"import { cn } from "cn"function Separator({  className,  orientation = "horizontal",  ...props}: SeparatorPrimitive.Props) {  return (    <SeparatorPrimitive      data-slot="separator"      orientation={orientation}      className={cn(        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",        className      )}      {...props}    />  )}export { Separator }