Neumorphism UI

Popover

用于快速偏好等与附近触发器关联的小型交互面板。

预览

通知偏好面板

打开包含标题、简短说明和关闭按钮的面板。

正在加载预览。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/popover

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

通知偏好面板

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/popover
Registry JSON

用法

组合 PopoverTrigger 与 PopoverContent，提供标题或可访问名称。放入简短控件或说明，需要明确关闭时添加 PopoverClose。

"use client";

import { Button } from "@/components/ui/button";
import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@/components/ui/popover";

export default function Example() {
  return (
    <Popover>
      <PopoverTrigger render={<Button />}>Project details</PopoverTrigger>
      <PopoverContent>
        <PopoverTitle>Team workspace</PopoverTitle>
        <PopoverDescription>Eight members are collaborating.</PopoverDescription>
        <PopoverClose render={<Button />}>Close</PopoverClose>
      </PopoverContent>
    </Popover>
  );
}

API 参考

依附按钮、保留上下文的设置面板。 提供 PopoverTitle 和说明，并检查键盘关闭操作。

组件属性类型默认值说明
Popoveropen / defaultOpenboolean—设置受控状态或初始状态。
PopoverContentside / alignPositioner.Props—设置考虑视口边界的面板位置或间距。
PopoverTriggerrenderReact.ReactElement | function—组合现有元素、事件和 ref。

无障碍

  • 01

    提供 PopoverTitle 和说明，并检查键盘关闭操作。

  • 02

    修改 render 或 className 时保留标签关联和可见焦点。