For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/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'下载文件名