Neumorphism UI
操作与浮层@neumorphism-ui/popover

Popover

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

@neumorphism-ui/popover
Registry JSON

预览

安装

安装: popovernpx shadcn@latest add @neumorphism-ui/popover

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置 。

用法

用法: 安装npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/popover

Import

Popover import 代码
"use client";

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

Example

Popover 用法代码
export default function Example() {

  return (<Popover><PopoverTrigger render={<Button />}>{"通知设置"}</PopoverTrigger><PopoverContent><PopoverTitle>{"调整通知"}</PopoverTitle><PopoverDescription>{"只接收重要更新，保持专注。"}</PopoverDescription><PopoverClose render={<Button variant="primary" />}>{"关闭"}</PopoverClose></PopoverContent></Popover>);
}

API 参考

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

无障碍

  • 01

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

  • 02

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