二维码

根据提供的数据生成二维码的组件。

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

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

用法

¥Usage

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

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

info

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

¥If you prefer a closed component composition, check out the snippet below.

示例

¥Examples

尺寸

¥Sizes

使用 size 属性设置二维码的大小。

¥Use the size prop to set the size of the QR code.

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 Overlay

将 children 属性传递给 QrCode.Overlay 组件以在二维码上添加徽标或叠加层。

¥Pass the children prop to the QrCode.Overlay component to add a logo or overlay to the QR code.

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

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

¥Use the fill prop to set the fill color of the QR code.

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>
  )
}

下载

¥Download

使用 QrCode.DownloadTrigger 下载二维码。

¥Use the QrCode.DownloadTrigger to download the QR code.

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>
  )
}

错误更正

¥Error Correction

如果链接过长或徽标覆盖范围过大，可以提高错误纠正级别。

¥In cases where the link is too long or the logo overlay covers a significant area, the error correction level can be increased.

使用 encoding.ecc 或 encoding.boostEcc 属性设置错误校正级别：

¥Use the encoding.ecc or encoding.boostEcc property to set the error correction level:

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>
  )
}

商店

¥Store

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

¥The RootProvider component provides a context for the QR code.

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

¥It accepts the value of the useQrCode hook. You can leverage it to access the component state and methods from outside the QR code.

"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>
  )
}

输入框

¥Input

以下是如何将 QrCode 组件与 Input 组件结合使用的示例。

¥Here's an example of how to use the QrCode component with an Input component.

"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>
  )
}

旋转器

¥Spinner

以下是如何将 QrCode 组件与 Spinner 组件结合使用的示例。

¥Here's an example of how to use the QrCode component with a Spinner component.

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>
  )
}

已关闭组件

¥Closed Component

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

¥Here's how to setup the QR code for a closed component composition.

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>
    )
  },
)

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

¥If you want to automatically add the closed component to your project, run the command:

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

属性

¥Props

根元素

¥Root

Prop	Default	Type
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`size`	`'md'`	`'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'` The size of the component
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`unstyled`		`boolean` Whether to remove the component's style.
`defaultValue`		`string` The initial value to encode when rendered. Use when you don't need to control the value of the qr code.
`encoding`		`QrCodeGenerateOptions` The qr code encoding options.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string; frame: string }>` The element ids.
`onValueChange`		`(details: ValueChangeDetails) => void` Callback fired when the value changes.
`pixelSize`		`number` The pixel size of the qr code.
`value`		`string` The controlled value to encode.

DownloadTrigger

Prop	Default	Type
`fileName` *		`string` The name of the file.
`mimeType` *		`DataUrlType` The mime type of the image.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`quality`		`number` The quality of the image.

图标

状态

二维码

.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;}用法

用法