Money
WhereUIแสดงเงินจากจำนวนเต็มหน่วยสตางค์เป็นบาท คั่นหลักพัน ตัวเลข tabular-nums เรียงคอลัมน์ตรงกันเสมอ รองรับค่าติดลบ
- เงินเดือนประจำ
- ฿35,675
- ค่าเดินทางเดือนนี้
- ฿2,480
- รวมรับ
- ฿38,155
ติดตั้ง
Terminal
pnpm dlx shadcn@latest add @whereui/moneyต้องผูก registry และติดตั้ง @whereui/theme นำหน้าเสมอเมื่อติดตั้งครั้งแรก
การใช้งาน
import { Money } from "@/components/ui/money"<Money value={3567500} /> // ฿35,675ตัวอย่างเพิ่มเติม
แสดงสตางค์และไม่มีสัญลักษณ์
แสดงสตางค์: ฿35,675.50
ไม่มีสัญลักษณ์: 12,500 บาท
ค่าติดลบ (ยอดหัก): -฿50
Props
| prop | type | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
| value | number | — | จำนวนเงินหน่วยสตางค์ เช่น 3567500 = 35,675 บาท · ติดลบแสดงเครื่องหมาย - |
| showSatang | boolean | false | แสดงเศษสตางค์สองตำแหน่งเสมอ เช่น ฿35,675.00 — ปิดไว้จะตัดเศษสตางค์ทิ้ง |
| symbol | string | "฿" | สัญลักษณ์นำหน้า — ส่ง "" เพื่อไม่แสดง เช่น ใช้คำว่า "บาท" ทีหลังแทน |
ข้อควรรู้
- ค่ารับ/ส่งเป็นจำนวนเต็มสตางค์เสมอ (ไม่ใช่ทศนิยมบาท) กันปัญหา floating point ตอนบวกลบ
- แทรกได้ทุกที่ที่เป็นข้อความ เช่น ใน StatCard, DescriptionDetails
ซอร์สโค้ด
components/ui/money.tsx
import * as React from "react"import { cn } from "cn"// แปลงจำนวนเต็มหน่วยสตางค์เป็นบาท — ตัดเศษสตางค์ทิ้งเมื่อไม่เปิด showSatangfunction formatBaht(satang: number, showSatang: boolean) { return new Intl.NumberFormat("th-TH", { minimumFractionDigits: showSatang ? 2 : 0, maximumFractionDigits: showSatang ? 2 : 0, }).format(Math.abs(satang) / 100)}function Money({ className, value, showSatang = false, symbol = "฿", ...props}: React.ComponentProps<"span"> & { /** จำนวนเงินหน่วยสตางค์ เช่น 1250000 = 1,250 บาท */ value: number /** แสดงเศษสตางค์สองตำแหน่งเสมอ เช่น 1,250.00 */ showSatang?: boolean /** สัญลักษณ์นำหน้า ส่ง "" เพื่อไม่แสดง */ symbol?: string}) { return ( <span data-slot="money" className={cn("tabular-nums whitespace-nowrap", className)} {...props} > {value < 0 ? "-" : null} {symbol} {formatBaht(value, showSatang)} </span> )}export { Money }