我想使用ShadCN组件库创建一个对话框,但它在右上角有一个内置的关闭按钮,但我希望它在其他地方,假设我想将它作为下面的按钮,我该如何制作它发生?我尝试在其他地方创建一个不同的并给它一个 asChild 属性,但这不起作用。我想我错过了一些大事。谢谢大家的帮助。
这是我当前的代码以及它在前端的外观。
"use client";
import { Dialog, DialogContent, DialogTrigger, DialogTitle } from "@/components/ui/dialog"; //shadCN components
import { Button } from "@/components/ui/button";
import { DialogClose } from "@radix-ui/react-dialog";
export default function Home() {
return (
<main>
<Dialog>
<DialogTrigger>
<div>XXX</div>
</DialogTrigger>
<DialogContent className="transition delay-0 duration-0">
<DialogTitle>
asda
</DialogTitle>
<DialogClose asChild={true}>
<Button>Close</Button>
</DialogClose>
</DialogContent>
</Dialog>
</main>
);
}
我尝试让右上角的x消失。
无法删除默认的关闭按钮。但您可以从
dialog.tsx
文件中删除它,或者使用自定义 prop 来处理它。
要创建自定义关闭按钮,您可以使用
DialogClose
组件。
<DialogClose asChild>
<Button type="button" variant="secondary">
Close
</Button>
</DialogClose>
这里是 shadcn 文档中的文档 自定义关闭按钮