Popover 气泡卡片

触发时显示附加信息的卡片。

导入

import { Popover } from 'asterui'

示例

基础用法

悬停触发的简单气泡卡片。

import { Popover, Button } from 'asterui'

function App() {
  return (
      <Popover content="This is a simple popover">
        <Button>Hover me</Button>
      </Popover>
    )
}

export default App

带标题

带有标题和内容的气泡卡片。

import { Popover, Button } from 'asterui'

function App() {
  return (
      <Popover
        title="User Information"
        content="Additional details about the user and their account settings."
      >
        <Button>Hover me</Button>
      </Popover>
    )
}

export default App

触发类型

气泡卡片的不同触发模式。

import { Popover, Button } from 'asterui'

function App() {
  return (
      <div className="flex gap-4">
        <Popover trigger="hover" content="Triggered by hovering">
          <Button>Hover</Button>
        </Popover>
        <Popover trigger="click" content="Triggered by clicking">
          <Button>Click</Button>
        </Popover>
        <Popover trigger="focus" content="Triggered by focusing">
          <Button>Focus</Button>
        </Popover>
      </div>
    )
}

export default App

位置 - 顶部

顶部位置变体。

import { Popover, Button } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 justify-center">
        <Popover placement="top" content="Top placement">
          <Button>Top</Button>
        </Popover>
        <Popover placement="topLeft" content="Top left placement">
          <Button>Top Left</Button>
        </Popover>
        <Popover placement="topRight" content="Top right placement">
          <Button>Top Right</Button>
        </Popover>
      </div>
    )
}

export default App

位置 - 底部

底部位置变体。

import { Popover, Button } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 justify-center">
        <Popover placement="bottom" content="Bottom placement">
          <Button>Bottom</Button>
        </Popover>
        <Popover placement="bottomLeft" content="Bottom left placement">
          <Button>Bottom Left</Button>
        </Popover>
        <Popover placement="bottomRight" content="Bottom right placement">
          <Button>Bottom Right</Button>
        </Popover>
      </div>
    )
}

export default App

位置 - 左侧

左侧位置变体。

import { Popover, Button } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 justify-center">
        <Popover placement="left" content="Left placement">
          <Button>Left</Button>
        </Popover>
        <Popover placement="leftTop" content="Left top placement">
          <Button>Left Top</Button>
        </Popover>
        <Popover placement="leftBottom" content="Left bottom placement">
          <Button>Left Bottom</Button>
        </Popover>
      </div>
    )
}

export default App

位置 - 右侧

右侧位置变体。

import { Popover, Button } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 justify-center">
        <Popover placement="right" content="Right placement">
          <Button>Right</Button>
        </Popover>
        <Popover placement="rightTop" content="Right top placement">
          <Button>Right Top</Button>
        </Popover>
        <Popover placement="rightBottom" content="Right bottom placement">
          <Button>Right Bottom</Button>
        </Popover>
      </div>
    )
}

export default App

API

`Popover`

属性	描述	类型	默认值
`children`	触发元素	`React.ReactNode`	-
`content`	气泡卡片的内容	`React.ReactNode`	-
`title`	气泡卡片的标题	`React.ReactNode`	-
`trigger`	气泡卡片的触发方式	`'hover' \| 'click' \| 'focus'`	`'hover'`
`placement`	气泡卡片的位置	`'top' \| 'topLeft' \| 'topRight' \| 'bottom' \| 'bottomLeft' \| 'bottomRight' \| 'left' \| 'leftTop' \| 'leftBottom' \| 'right' \| 'rightTop' \| 'rightBottom'`	`'top'`
`open`	气泡卡片是否可见(受控模式)	`boolean`	-
`onOpenChange`	可见性更改时的回调	`(open: boolean) => void`	-
`className`	包装器的额外 CSS 类	`string`	-
`overlayClassName`	气泡卡片覆盖层的额外 CSS 类	`string`	-

可访问性

气泡卡片使用正确的 ARIA 属性进行工具提示
点击和焦点触发器可通过键盘访问
显示时内容会向屏幕阅读器宣布
Escape 键关闭点击触发的气泡卡片