二维码

一个基于提供的数据生成二维码的组件。

import { QrCode } from "@chakra-ui/react"

const Demo = () => {
  return (
    <QrCode.Root value="https://www.google.com">
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
    </QrCode.Root>
  )
}

用法

import { QrCode } from "@chakra-ui/react"

<QrCode.Root value="...">
  <QrCode.Frame>
    <QrCode.Pattern />
  </QrCode.Frame>
</QrCode.Root>

信息

如果您更喜欢封闭式的组件组合，请查看下面的代码片段。

示例

尺寸

使用 size 属性来设置二维码的尺寸。

import { For, QrCode, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack>
      <For each={["2xs", "xs", "sm", "md", "lg", "xl", "2xl"]}>
        {(size) => (
          <QrCode.Root size={size} value="https://www.google.com" key={size}>
            <QrCode.Frame>
              <QrCode.Pattern />
            </QrCode.Frame>
          </QrCode.Root>
        )}
      </For>
    </Stack>
  )
}

Logo 叠加

将 `children` 属性传递给 QrCode.Overlay 组件，以在二维码中添加 Logo 或叠加层。

import { QrCode } from "@chakra-ui/react"

const Demo = () => {
  return (
    <QrCode.Root value="https://www.google.com">
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
      <QrCode.Overlay>
        <Logo />
      </QrCode.Overlay>
    </QrCode.Root>
  )
}

const Logo = () => {
  return (
    <svg
      width="40"
      height="40"
      viewBox="0 0 40 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M10 0C15.5228 0 20 4.47715 20 10V0H30C35.5228 0 40 4.47715 40 10C40 15.5228 35.5228 20 30 20C35.5228 20 40 24.4772 40 30C40 32.7423 38.8961 35.2268 37.1085 37.0334L37.0711 37.0711L37.0379 37.1041C35.2309 38.8943 32.7446 40 30 40C27.2741 40 24.8029 38.9093 22.999 37.1405C22.9756 37.1175 22.9522 37.0943 22.9289 37.0711C22.907 37.0492 22.8852 37.0272 22.8635 37.0051C21.0924 35.2009 20 32.728 20 30C20 35.5228 15.5228 40 10 40C4.47715 40 0 35.5228 0 30V20H10C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM18 10C18 14.4183 14.4183 18 10 18V2C14.4183 2 18 5.58172 18 10ZM38 30C38 25.5817 34.4183 22 30 22C25.5817 22 22 25.5817 22 30H38ZM2 22V30C2 34.4183 5.58172 38 10 38C14.4183 38 18 34.4183 18 30V22H2ZM22 18V2L30 2C34.4183 2 38 5.58172 38 10C38 14.4183 34.4183 18 30 18H22Z"
        fill="#5417D7"
      ></path>
    </svg>
  )
}

填充

使用 fill 属性来设置二维码的填充颜色。

import { Flex, For, QrCode } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Flex gap="4">
      <For each={["#5417D7", "#FF0000"]}>
        {(fill) => (
          <QrCode.Root key={fill} value="https://www.google.com">
            <QrCode.Frame style={{ fill }}>
              <QrCode.Pattern />
            </QrCode.Frame>
          </QrCode.Root>
        )}
      </For>
    </Flex>
  )
}

下载

使用 QrCode.DownloadTrigger 下载二维码。

需要 fileName 和 mimeType 属性。

import { Button, QrCode } from "@chakra-ui/react"

const Demo = () => {
  return (
    <QrCode.Root value="https://www.google.com">
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>

      <QrCode.DownloadTrigger
        asChild
        fileName="qr-code.png"
        mimeType="image/png"
      >
        <Button variant="outline" size="xs" mt="3">
          Download
        </Button>
      </QrCode.DownloadTrigger>
    </QrCode.Root>
  )
}

纠错

如果链接过长或 Logo 叠加层覆盖了很大区域，可以提高纠错级别。

使用 encoding.ecc 或 encoding.boostEcc 属性来设置纠错级别

L：允许恢复高达 7% 的数据丢失（默认）
M：允许恢复高达 15% 的数据丢失
Q：允许恢复高达 25% 的数据丢失
H：允许恢复高达 30% 的数据丢失

LMQH

"use client"

import { QrCode, SegmentGroup, Stack } from "@chakra-ui/react"
import { useState } from "react"

type ErrorLevel = "L" | "M" | "Q" | "H"

const Demo = () => {
  const [errorLevel, setErrorLevel] = useState<ErrorLevel>("L")
  return (
    <Stack align="flex-start">
      <QrCode.Root
        value="https://www.google.com"
        size="xl"
        encoding={{ ecc: errorLevel }}
      >
        <QrCode.Frame />
      </QrCode.Root>
      <SegmentGroup.Root
        size="sm"
        defaultValue={"L"}
        onValueChange={(e) => setErrorLevel(e.value as ErrorLevel)}
      >
        <SegmentGroup.Indicator />
        <SegmentGroup.Items items={["L", "M", "Q", "H"]} />
      </SegmentGroup.Root>
    </Stack>
  )
}

存储

`RootProvider` 组件为二维码提供上下文。

它接受 useQrCode Hook 的值。您可以利用它从二维码外部访问组件状态和方法。

"use client"

import { Button, QrCode, Stack, useQrCode } from "@chakra-ui/react"

const Demo = () => {
  const qrCode = useQrCode({ defaultValue: "https://www.google.com" })
  return (
    <Stack align="flex-start">
      <Button onClick={() => qrCode.setValue("https://www.x.com")}>
        Update to x.com
      </Button>
      <QrCode.RootProvider value={qrCode}>
        <QrCode.Frame>
          <QrCode.Pattern />
        </QrCode.Frame>
      </QrCode.RootProvider>
    </Stack>
  )
}

输入

这是一个将 QrCode 组件与 Input 组件一起使用的示例。

"use client"

import { Input, QrCode, Stack } from "@chakra-ui/react"
import { useState } from "react"

const Demo = () => {
  const [value, setValue] = useState("https://www.google.com")
  return (
    <Stack maxW="240px" gap="4">
      <QrCode.Root value={value}>
        <QrCode.Frame>
          <QrCode.Pattern />
        </QrCode.Frame>
      </QrCode.Root>
      <Input value={value} onChange={(e) => setValue(e.target.value)} />
    </Stack>
  )
}

加载指示器

这是一个将 QrCode 组件与 Spinner 组件一起使用的示例。

import { AbsoluteCenter, Box, QrCode, Spinner } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Box position="relative">
      <QrCode.Root value="https://www.google.com">
        <QrCode.Frame>
          <QrCode.Pattern />
        </QrCode.Frame>

        <AbsoluteCenter bg="bg/80" boxSize="100%">
          <Spinner color="red" />
        </AbsoluteCenter>
      </QrCode.Root>
    </Box>
  )
}

封闭式组件

以下是如何为封闭式组件组合设置二维码。

import { QrCode as ChakraQrCode } from "@chakra-ui/react"
import * as React from "react"

export interface QrCodeProps
  extends Omit<ChakraQrCode.RootProps, "fill" | "overlay"> {
  fill?: string
  overlay?: React.ReactNode
}

export const QrCode = React.forwardRef<HTMLDivElement, QrCodeProps>(
  function QrCode(props, ref) {
    const { children, fill, overlay, ...rest } = props
    return (
      <ChakraQrCode.Root ref={ref} {...rest}>
        <ChakraQrCode.Frame style={{ fill }}>
          <ChakraQrCode.Pattern />
        </ChakraQrCode.Frame>
        {overlay}
        {children && <ChakraQrCode.Overlay>{children}</ChakraQrCode.Overlay>}
      </ChakraQrCode.Root>
    )
  },
)

如果您想自动将封闭式组件添加到您的项目，请运行以下命令

npx @chakra-ui/cli snippet add qr-code

属性

根组件

属性	默认值	类型
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` 组件的调色板
`size`	`'md'`	`'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'` 组件的尺寸
`asChild`		`boolean` 使用所提供的子元素作为默认渲染元素，结合它们的属性和行为。更多详情，请阅读我们的组合指南。
`defaultValue`		`string` 二维码首次渲染时的初始值。在您不需要控制二维码状态时使用。
`encoding`		`QrCodeGenerateOptions` 二维码编码选项。
`id`		`string` 机器的唯一标识符。
`ids`		`Partial<{ root: string; frame: string }>` 元素 ID。
`onValueChange`		`(details: ValueChangeDetails) => void` 值更改时触发的回调。
`value`		`string` 要编码的值。

DownloadTrigger

属性	默认值	类型
`fileName` *		`string` 文件名。
`mimeType` *		`DataUrlType` 图像的 MIME 类型。
`asChild`		`boolean` 使用所提供的子元素作为默认渲染元素，结合它们的属性和行为。更多详情，请阅读我们的组合指南。
`quality`		`number` 图像质量。

上一个

进度条

下一个

单选卡

二维码

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}用法

用法