悬停卡片

用于在鼠标悬停在元素上时显示内容

import {
  Avatar,
  HStack,
  HoverCard,
  Icon,
  Link,
  Portal,
  Stack,
  Text,
} from "@chakra-ui/react"
import { LuChartLine } from "react-icons/lu"

const Demo = () => {
  return (
    <HoverCard.Root size="sm">
      <HoverCard.Trigger asChild>
        <Link href="#">@chakra_ui</Link>
      </HoverCard.Trigger>
      <Portal>
        <HoverCard.Positioner>
          <HoverCard.Content>
            <HoverCard.Arrow />
            <Stack gap="4" direction="row">
              <Avatar.Root>
                <Avatar.Image src="https://pbs.twimg.com/profile_images/1244925541448286208/rzylUjaf_400x400.jpg" />
                <Avatar.Fallback name="Chakra UI" />
              </Avatar.Root>
              <Stack gap="3">
                <Stack gap="1">
                  <Text textStyle="sm" fontWeight="semibold">
                    Chakra UI
                  </Text>
                  <Text textStyle="sm" color="fg.muted">
                    The most powerful toolkit for building modern web
                    applications.
                  </Text>
                </Stack>
                <HStack color="fg.subtle">
                  <Icon size="sm">
                    <LuChartLine />
                  </Icon>
                  <Text textStyle="xs">2.5M Downloads</Text>
                </HStack>
              </Stack>
            </Stack>
          </HoverCard.Content>
        </HoverCard.Positioner>
      </Portal>
    </HoverCard.Root>
  )
}

用法

¥Usage

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

<HoverCard.Root>
  <HoverCard.Trigger />
  <HoverCard.Positioner>
    <HoverCard.Content>
      <HoverCard.Arrow>
        <HoverCard.ArrowTip />
      </HoverCard.Arrow>
    </HoverCard.Content>
  </HoverCard.Positioner>
</HoverCard.Root>

快捷键

¥Shortcuts

HoverCard 为常见用例提供了快捷方式。

¥The HoverCard provides a shortcuts for common use cases.

箭头

¥Arrow

HoverCard.Arrow 默认在其内部渲染 HoverCard.ArrowTip 组件。

¥The HoverCard.Arrow renders the HoverCard.ArrowTip component within in by default.

有效：

¥This works:

<HoverCard.Arrow>
  <HoverCard.ArrowTip />
</HoverCard.Arrow>

如果你不需要自定义箭头，这可能会更简洁。

¥This might be more concise, if you don't need to customize the arrow tip.

<HoverCard.Arrow />

示例

¥Examples

受控

¥Controlled

使用 open 和 onOpenChange 属性控制悬停卡片的可见性。

¥Use the open and onOpenChange to control the visibility of the hover card.

@chakra_ui

"use client"

import { Box, HoverCard, Link, Portal, Strong } from "@chakra-ui/react"
import { useState } from "react"

const Demo = () => {
  const [open, setOpen] = useState(false)
  return (
    <HoverCard.Root size="sm" open={open} onOpenChange={(e) => setOpen(e.open)}>
      <HoverCard.Trigger asChild>
        <Link href="#">@chakra_ui</Link>
      </HoverCard.Trigger>
      <Portal>
        <HoverCard.Positioner>
          <HoverCard.Content maxWidth="240px">
            <HoverCard.Arrow />
            <Box>
              <Strong>Chakra</Strong> is a Sanskrit word that means disk or
              wheel, referring to energy centers in the body
            </Box>
          </HoverCard.Content>
        </HoverCard.Positioner>
      </Portal>
    </HoverCard.Root>
  )
}

延迟

¥Delays

使用 openDelay 和 closeDelay 属性控制打开和关闭延迟。

¥Control the open and close delays using the openDelay and closeDelay props.

@chakra_ui

import { Box, HoverCard, Link, Portal, Strong } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HoverCard.Root size="sm" openDelay={1000} closeDelay={100}>
      <HoverCard.Trigger asChild>
        <Link href="#">@chakra_ui</Link>
      </HoverCard.Trigger>
      <Portal>
        <HoverCard.Positioner>
          <HoverCard.Content maxWidth="240px">
            <HoverCard.Arrow />
            <Box>
              <Strong>Chakra</Strong> is a Sanskrit word that means disk or
              wheel, referring to energy centers in the body
            </Box>
          </HoverCard.Content>
        </HoverCard.Positioner>
      </Portal>
    </HoverCard.Root>
  )
}

放置位置

¥Placement

使用 positioning.placement 属性配置底层 floating-ui 定位逻辑。

¥Use the positioning.placement prop to configure the underlying floating-ui positioning logic.

@chakra_ui

import { Box, HoverCard, Link, Portal, Strong } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HoverCard.Root size="sm" positioning={{ placement: "top" }}>
      <HoverCard.Trigger asChild>
        <Link href="#">@chakra_ui</Link>
      </HoverCard.Trigger>
      <Portal>
        <HoverCard.Positioner>
          <HoverCard.Content maxWidth="240px">
            <HoverCard.Arrow />
            <Box>
              <Strong>Chakra</Strong> is a Sanskrit word that means disk or
              wheel, referring to energy centers in the body
            </Box>
          </HoverCard.Content>
        </HoverCard.Positioner>
      </Portal>
    </HoverCard.Root>
  )
}

已禁用

¥Disabled

使用 disabled 属性可防止在交互时打开悬停卡片。

¥Use the disabled prop to prevent opening the hover card on interaction.

@chakra_ui

"use client"

import { HoverCard, Link, Portal, Stack, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HoverCard.Root size="sm" disabled>
      <HoverCard.Trigger asChild>
        <Link href="#">@chakra_ui</Link>
      </HoverCard.Trigger>
      <Portal>
        <HoverCard.Positioner>
          <HoverCard.Content>
            <HoverCard.Arrow />
            <Stack gap="1">
              <Text textStyle="sm" fontWeight="semibold">
                Chakra UI
              </Text>
              <Text textStyle="sm" color="fg.muted">
                The most powerful toolkit for building modern web applications.
              </Text>
            </Stack>
          </HoverCard.Content>
        </HoverCard.Positioner>
      </Portal>
    </HoverCard.Root>
  )
}

在对话框中

¥Within Dialog

要在 Dialog 中使用 HoverCard，你需要避免将 HoverCard.Positioner 传送到文档正文。

¥To use the HoverCard within a Dialog, you need to avoid portalling the HoverCard.Positioner to the document's body.

-<Portal>
  <HoverCard.Positioner>
    <HoverCard.Content>
      {/* ... */}
    </HoverCard.Content>
  </HoverCard.Positioner>
-</Portal>

可访问性

¥Accessibility

HoverCard 仅用于补充信息，这些信息对于理解上下文并非至关重要。

¥HoverCard should be used solely for supplementary information that is not essential for understanding the context.

屏幕阅读器无法访问它，也无法通过键盘激活，因此请避免在其中放置关键内容。

¥It is inaccessible to screen readers and cannot be activated via keyboard, so avoid placing crucial content within it.

属性

¥Props

Prop	Default	Type
`closeDelay`	`'300'`	`number` The duration from when the mouse leaves the trigger or content until the hover card closes.
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`openDelay`	`'700'`	`number` The duration from when the mouse enters the trigger until the hover card opens.
`skipAnimationOnMount`	`false`	`boolean` Whether to allow the initial presence animation.
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'` 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.
`defaultOpen`		`boolean` The initial open state of the hover card when rendered. Use when you don't need to control the open state of the hover card.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ trigger: string; content: string; positioner: string; arrow: string }>` The ids of the elements in the popover. Useful for composition.
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`onExitComplete`		`VoidFunction` Function called when the animation ends in the closed state
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`		`(details: OpenChangeDetails) => void` Function called when the hover card opens or closes.
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`open`		`boolean` The controlled open state of the hover card
`positioning`		`PositioningOptions` The user provided options used to position the popover content
`present`		`boolean` Whether the node is present (controlled by the user)

抽屉

菜单

悬停卡片

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

用法