卡片與網格
票根卡片
帶打孔虛線與側邊缺口的票券卡片，點擊可撕開票根。
主票與副券兩段式票券卡片，交界處以半圓缺口與打孔虛線模擬真實票根；點擊副券即沿打孔線撕開，旋轉飄落消失並在主票蓋上入場戳章，適合活動門票、優惠券與登機證等情境。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add ticket-stub-cardPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
128
12
0
編輯中的呼叫預設屬性
<TicketStubCard/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/ticket-stub-card.json或在 components.json 設定 registries 後，改用 @webberui/ticket-stub-card 安裝。
使用
import { TicketStubCard } from "@/components/ui/ticket-stub-card";
<TicketStubCard
stub={<span className="font-bold">A-12</span>}
onTear={() => console.log("已撕開！")}
>
<h3 className="text-xl font-bold">月光下的爵士之夜</h3>
<p className="text-sm text-neutral-500">2026/08/22 19:30</p>
</TicketStubCard>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
children | React.ReactNode | — | 主票區內容（活動名稱、時間、地點等） |
stub | React.ReactNode | — | 副券區內容（座位、票號等） |
onTear | () => void | — | 副券被撕開時觸發的回呼 |
torn | boolean | — | 受控的撕開狀態；未提供時由元件內部管理 |
stubWidth | number | 128 | 副券寬度（px） |
notchRadius | number | 12 | 打孔半圓缺口的半徑（px） |
tearHint | string | "點擊撕下" | 副券頂部的撕開提示文字 |
stampText | string | "已入場" | 撕開後蓋在主票上的戳章文字，空字串可隱藏 |
showBarcode | boolean | true | 是否在副券底部顯示裝飾條碼 |
tilt | boolean | false | 啟用跟隨指標的 3D 傾斜（perspective 1100px、±6°、懸停放大 1.018、220ms）；僅精準指標且未開啟減少動態時生效 |
notchSize | number | — | 以 clip-path 挖出的半圓缺口半徑（px）；設定後取代 mask 做法，缺口處可點穿 |
cornerSize | number | 0 | 外側四角的斜切尺寸（px）；大於 0 時改用 clip-path，缺口沿用 notchSize（未設則用 notchRadius） |
className | string | — | 透傳到最外層容器 |
細節
3D 傾斜
傳入 tilt 後，指標在票券上移動時整張票會依位置傾斜（最大 ±6°、透視 1100px），並放大到 1.018 倍；離開時以同一條 220ms 曲線回正。是否啟用由 useSyncExternalStore 讀取 (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)，伺服器端一律視為不啟用，觸控裝置與開啟減少動態的使用者不會看到傾斜。
<TicketStubCard tilt stub={<span className="font-bold">A-12</span>}>
…
</TicketStubCard>clip-path 缺口與切角
預設的缺口以 CSS mask 繪製；設定 notchSize 或 cornerSize 後改用 clip-path polygon（以 calc(100% - Npx) 定位，不需量測尺寸）。clip-path 會同時裁切點擊範圍，缺口處可點穿到下方元素；cornerSize 則把外側四角切成斜角，做出登機證或兌換券的輪廓。未傳這兩個 prop 時畫面與舊版完全相同。
<TicketStubCard notchSize={14} cornerSize={10} stub={<span>B12</span>}>
…
</TicketStubCard>可及性
- 副券為原生
button元素，可用鍵盤 Tab 聚焦並以 Enter / Space 撕開，附focus-visible焦點環 - 使用者系統開啟「減少動態效果」時，撕開改為單純淡出，不做旋轉飄落動畫
- 撕開後的戳章帶
role="status"，輔助科技會朗讀入場狀態變化 - 條碼、打孔虛線與紙質紋理皆為裝飾性元素，以
aria-hidden對輔助科技隱藏 tilt只在可懸停的精準指標且系統未開啟「減少動態效果」時啟用；開啟減少動態後不做任何傾斜與放大