Atelier UI

搜索组件…

搜索组件…

Signature Pad

支持鼠标、触摸和手写笔的签名画板,可撤销、清除并导出 PNG。

在沙盒中编辑

复制一段给 AI 编程工具的提示词,包含源码、依赖和用法

属性

SignaturePadProps

同时支持以下类型的全部属性: Omit<React.ComponentProps<"div">, "onChange">

属性类型默认值说明
inksSignatureInk[]——
defaultWidthnumber——
exportBackgroundstring | null—Background painted into the exported PNG. Pass null for a transparent PNG.
filenamestring—File name used by the download button
onExport(dataUrl: string) => void—Called with the PNG data URL when the download button is pressed
onChange(isEmpty: boolean) => void—Called whenever the signature becomes empty or non-empty
hintstring——

安装

$ npx shadcn@latest add https://chromotion.dev/r/signature-pad.json

同类组件