For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/components/qr-code.md.

QRCode 二维码

将文本和链接展示为二维码。

基本用法

二维码
basic.tsx
import { QRCode } from '@ifhover/leaf-ui';

export function QRCodeBasic() {
  return <QRCode value="https://ifhover.github.io/leaf-ui/" downloadable />;
}

更多用法

加载中
二维码
过期后刷新
二维码
自定义颜色
二维码
advanced.tsx
import { Flex, QRCode, Space, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function QRCodeStatus() {
  const [expired, setExpired] = useState(true);
  return (
    <Flex gap="md" align="center" wrap justify="center">
      <Space direction="vertical" align="stretch">
        <Text tone="muted">加载中</Text>
        <QRCode value="Leaf UI" size={140} status="loading" />
      </Space>
      <Space direction="vertical" align="stretch">
        <Text tone="muted">过期后刷新</Text>
        <QRCode
          value="Leaf UI"
          size={140}
          status={expired ? 'expired' : 'active'}
          onRefresh={() => setExpired(false)}
        />
      </Space>
      <Space direction="vertical" align="stretch">
        <Text tone="muted">自定义颜色</Text>
        <QRCode value="Leaf UI" size={140} color="#2463eb" />
      </Space>
    </Flex>
  );
}

使用说明

value 为编码内容;status 可显示加载或过期状态。onRefresh 处理刷新操作,downloadable 提供 SVG 下载。

类型

组装数据、定义回调和使用 ref 时,可以导入这些类型。

import type { QRCodeProps } from '@ifhover/leaf-ui';

QRCodeProps API

属性类型默认值说明
valuestring必填受控值
sizenumber160尺寸或间距预设
colorstring'var(--leaf-color-text)'颜色
backgroundColorstring'var(--leaf-color-surface)'背景颜色
level'L' | 'M' | 'Q' | 'H''M'二维码纠错等级
logostring—中央标志地址
logoSizenumber32中央标志尺寸
status'active' | 'loading' | 'expired''active'显示状态
onRefresh() => void—刷新过期二维码
downloadablebooleanfalse显示下载操作
fileNamestring'qrcode.svg'下载文件名