1. DropdownMenu触发AlertDialog后页面无法点击

是因为点击AlertDialog的确定按钮后后body标签会被添加style="pointer-events: none;"导致页面无法点击

怎样解决?
根据 I can't click anywhere after using alert dialog. #468DropdownMenu设置modal={false}即可避免这种情况

2. 用函数形式触发dialog或者popover等

shadcn给的demo都是用类似于DialogTrigger的组件方式去触发的。

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

有没有函数触发dialog等显示隐藏的方法?
搜索,feat: function to trigger open/close dialog #386

const [open, setOpen] = useState(false);

return <Dialog open={open} onOpenChange={setOpen} />

其他popover等都可以用这种方式触发

3. popover类似于antd的placement属性控制其显示位置

popover placement #2900
使用side和align属性来控制其位置

小结:

上述两个问题都将我们带到了radix-ui Primitives 文档 ,因为shadcn是基于radix的,所以props信息还是得查看radix文档


assassin_cike
1.3k 声望74 粉丝

生活不是得过且过


« 上一篇
SVG 了解下
下一篇 »
npm 相关