组件
Popover
用于轻量说明、小型配置面板和上下文补充操作
Popover
Popover 适合非阻断式的小面板。
导入
import { Popover, PopoverTrigger, PopoverContent, Button } from "@downcity/ui";最小示例
import { Button, Popover, PopoverTrigger, PopoverContent } from "@downcity/ui";
export function FilterPopover() {
return (
<Popover>
<PopoverTrigger render={<Button size="sm" variant="ghost" />}>
筛选
</PopoverTrigger>
<PopoverContent className="w-72 p-4">
这里可以放轻量筛选项或说明文字。
</PopoverContent>
</Popover>
);
}适合场景
- 轻量设置
- 说明补充
- 小块筛选面板
使用建议
- 简短操作适合
Popover - 内容复杂或需要阻断时,切换到
Dialog或Sheet