Popover

在触发器旁打开的面板，可容纳任意内容，如几行文字或一个小表单。从触发器处展开，关闭时收回得更快。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/popover

示例

触发器旁的几行文字

popover-basic.tsx

import { Button } from "@/components/zero/button";import {  Popover,  PopoverContent,  PopoverDescription,  PopoverTitle,  PopoverTrigger,} from "@/components/zero/popover";export default function PopoverBasic() {  return (    <Popover>      <PopoverTrigger render={<Button variant="secondary" />}>        About the reward      </PopoverTrigger>      <PopoverContent>        <PopoverTitle>3,100 credits</PopoverTitle>        <PopoverDescription>          Paid when the crate is signed for at the north gate. Half if it          arrives late.        </PopoverDescription>      </PopoverContent>    </Popover>  );}

行为

点击打开，点击外部或按 Esc 关闭；打开后焦点移入面板。简短的标签用 Tooltip；需要停下来阅读或在其中操作的内容用 Popover。

属性

PopoverContent

属性	类型	默认值	说明
side	"top" \| "bottom" \| "left" \| "right"	"bottom"	相对触发器的打开方向。
align	"start" \| "center" \| "end"	"center"	与触发器的对齐方式。

另可传入 Base UI Popover.Popup 的全部属性。

PopoverTitle, PopoverDescription, PopoverClose

另可传入 Base UI Popover.Title 的全部属性。