shadcn/ui

assassin_cike發表於2024-11-01
UI

1. DropdownMenu觸發AlertDialog後頁面無法點選

是因為點選AlertDialog的確定按鈕後後body標籤會被新增style="pointer-events: none;"導致頁面無法點選

怎樣解決？
根據 I can't click anywhere after using alert dialog. #468 將DropdownMenu設定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文件

相關文章