切换提示

看起来像一个工具提示，但功能上像一个弹出框。

import { Button } from "@chakra-ui/react"
import { ToggleTip } from "@/components/ui/toggle-tip"
import { LuInfo } from "react-icons/lu"

const Demo = () => {
  return (
    <ToggleTip content="This is some additional information.">
      <Button size="xs" variant="ghost">
        <LuInfo />
      </Button>
    </ToggleTip>
  )
}

设置

为了方便使用，请为ToggleTip 组件创建封闭组件组合。

import { Popover as ChakraPopover, IconButton, Portal } from "@chakra-ui/react"
import * as React from "react"
import { HiOutlineInformationCircle } from "react-icons/hi"

export interface ToggleTipProps extends ChakraPopover.RootProps {
  showArrow?: boolean
  portalled?: boolean
  portalRef?: React.RefObject<HTMLElement>
  content?: React.ReactNode
}

export const ToggleTip = React.forwardRef<HTMLDivElement, ToggleTipProps>(
  function ToggleTip(props, ref) {
    const {
      showArrow,
      children,
      portalled = true,
      content,
      portalRef,
      ...rest
    } = props

    return (
      <ChakraPopover.Root
        {...rest}
        positioning={{ ...rest.positioning, gutter: 4 }}
      >
        <ChakraPopover.Trigger asChild>{children}</ChakraPopover.Trigger>
        <Portal disabled={!portalled} container={portalRef}>
          <ChakraPopover.Positioner>
            <ChakraPopover.Content
              width="auto"
              px="2"
              py="1"
              textStyle="xs"
              rounded="sm"
              ref={ref}
            >
              {showArrow && (
                <ChakraPopover.Arrow>
                  <ChakraPopover.ArrowTip />
                </ChakraPopover.Arrow>
              )}
              {content}
            </ChakraPopover.Content>
          </ChakraPopover.Positioner>
        </Portal>
      </ChakraPopover.Root>
    )
  },
)

export const InfoTip = React.forwardRef<
  HTMLDivElement,
  Partial<ToggleTipProps>
>(function InfoTip(props, ref) {
  const { children, ...rest } = props
  return (
    <ToggleTip content={children} {...rest} ref={ref}>
      <IconButton
        variant="ghost"
        aria-label="info"
        size="2xs"
        colorPalette="gray"
      >
        <HiOutlineInformationCircle />
      </IconButton>
    </ToggleTip>
  )
})

或者，您可以使用以下命令将其添加到您的项目中。

npx @chakra-ui/cli snippet add toggle-tip

此代码片段包含 Popover 组件的封闭组件组合。

用法

import { InfoTip, ToggleTip } from "@/components/ui/toggle-tip"

<ToggleTip content="...">
  <button />
</ToggleTip>

示例

信息提示

使用 InfoTip 组件显示信息提示。此组件默认渲染一个带有信息图标的图标按钮。

适用于着陆页，用于显示有关功能的额外信息。

文件大小1.45 kB

import { FormatByte, HStack, Text } from "@chakra-ui/react"
import { InfoTip } from "@/components/ui/toggle-tip"

const Demo = () => {
  return (
    <HStack justify="center">
      <Text textStyle="lg">
        File size: <FormatByte value={1450.45} />
      </Text>
      <InfoTip content="The file size for content.tsx is 1.45kb" />
    </HStack>
  )
}

属性

根

属性	默认值	类型
`autoFocus`	`true`	`boolean` 打开时是否自动将焦点设置到弹出框内的第一个可聚焦内容上。
`closeOnEscape`	`true`	`boolean` 按下 Esc 键时是否关闭弹出框。
`closeOnInteractOutside`	`true`	`boolean` 用户点击弹出框外部时是否关闭弹出框。
`lazyMount`	`false`	`boolean` 是否启用懒加载挂载
`modal`	`false`	`boolean` 弹出框是否应为模态。当设置为 `true` 时： - 与外部元素的交互将被禁用 - 只有弹出框内容对屏幕阅读器可见 - 滚动被阻止 - 焦点被限制在弹出框内
`portalled`	`true`	`boolean` 弹出框是否为传送门模式。无论弹出框内容的 DOM 位置如何，这都将代理 Tab 键行为。
`unmountOnExit`	`false`	`boolean` 退出时是否卸载。
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` 组件的颜色调色板
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'` 组件的大小
`defaultOpen`		`boolean` 弹出框首次渲染时的初始打开状态。当您不需要控制其打开状态时使用。
`id`		`string` 机器的唯一标识符。
`ids`		`Partial<{ anchor: string trigger: string content: string title: string description: string closeTrigger: string positioner: string arrow: string }>` 弹出框中元素的 ID。适用于组合。
`immediate`		`boolean` 是立即同步当前更改还是将其推迟到下一帧
`initialFocusEl`		`() => HTMLElement \| null` 打开弹出框时要聚焦的元素。
`onEscapeKeyDown`		`(event: KeyboardEvent) => void` 按下 Esc 键时调用的函数
`onExitComplete`		`() => void` 动画在关闭状态结束时调用的函数
`onFocusOutside`		`(event: FocusOutsideEvent) => void` 焦点移出组件时调用的函数
`onInteractOutside`		`(event: InteractOutsideEvent) => void` 组件外部发生交互时调用的函数
`onOpenChange`		`(details: OpenChangeDetails) => void` 弹出框打开或关闭时调用的函数
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` 指针在组件外部按下时调用的函数
`open`		`boolean` 弹出框是否打开
`persistentElements`		`(() => Element \| null)[]` 返回持久化元素，这些元素： - 不应禁用指针事件 - 不应触发关闭事件
`positioning`		`PositioningOptions` 用户提供的用于定位弹出框内容的选项
`present`		`boolean` 节点是否存在（由用户控制）
`as`		`React.ElementType` 要渲染的底层元素。
`asChild`		`boolean` 使用提供的子元素作为默认渲染元素，结合它们的属性和行为。有关更多详细信息，请阅读我们的组合指南。
`unstyled`		`boolean` 是否移除组件的样式。

Toast

Tooltip

切换提示

.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;}设置

用法

示例

信息提示

属性

根

设置