Qrcode 二维码

数据展示

二维码 — Chaos UI 的数据展示。

何时使用

需要二维码功能时使用本组件。

tsx

import { QRCode } from "@/components/ui/qrcode"

export function Basic() {
return <QRCode />
}

Prop	Type	Default	说明
`className`	`string`	—	自定义样式类名
`value`	`string`	—	URL or text to encode
`size`	`number`	`200`	Size in pixels
`fgColor`	`string`	`#000000`	Foreground color
`bgColor`	`string`	`#ffffff`	Background color
`downloadable`	`boolean`	`false`	Include download button
`downloadFileName`	`string`	`qrcode.png`	Filename for download
`loading`	`boolean`	`false`	Loading state
`error`	`boolean`	`false`	Error state
...rest	`React.ComponentProps<"div">`	—	透传 `<div>` 原生属性

📘 完整交互式示例与控件属性请查看 Storybook 文档。