@ chakra-ui/ 流行音乐

Popover是一个非模式对话框,它围绕一个触发器来浮出水面. 用来 向用户显示背景信息,并应当与 可点击触发元素 .

安装

yarn add @chakra-ui/popover

# or

npm i @chakra-ui/popover

导入组件

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  PopoverFooter,
  PopoverArrow,
  PopoverCloseButton,
} from "@chakra-ui/react"

基本用途

在使用这一组成部分时,确保儿童被传给 PopoverTrigger 实值 可聚焦,用户可以使用键盘来跟踪它,它可以使用一个 ref。 这对于无障碍至关重要.

A11y : (英语) 当波波佛打开时,焦点被传送到 PopoverContent时 它关闭,焦点返回到触发器.

<Popover>
  <PopoverTrigger>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverArrow />
    <PopoverCloseButton />
    <PopoverHeader>Confirmation!</PopoverHeader>
    <PopoverBody>Are you sure you want to have that milkshake?</PopoverBody>
  </PopoverContent>
</Popover>

在门户网站上渲染翻版

默认情况下,"波波佛"不会在门户网站中渲染出. 让他们展示在 传送门,通过 usePortal 道具 (英语).

你也许需要 检查元素 将这一点付诸行动。 注意到 PopoverContent 儿时 <body>

<Popover usePortal>
  <PopoverTrigger>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverArrow />
    <PopoverHeader>Header</PopoverHeader>
    <PopoverCloseButton />
    <PopoverBody>
      <Button colorScheme="blue">Button</Button>
    </PopoverBody>
    <PopoverFooter>This is the footer</PopoverFooter>
  </PopoverContent>
</Popover>