侧边面板
对 Dialog 组件的扩展，用于展示与屏幕主内容互补的信息。
安装
pnpm dlx shadcn@latest add @lumi-ui/sheet
将以下工具类添加到你的 globals.css 中：
@utility animate-fade-up {
@apply transition-all duration-300 ease-[cubic-bezier(0.25,1,0.5,1)];
&[data-starting-style],
&[data-ending-style] {
opacity: 0;
translate: 0 100%;
}
}
@utility animate-fade-down {
@apply transition-all duration-300 ease-[cubic-bezier(0.25,1,0.5,1)];
&[data-starting-style],
&[data-ending-style] {
opacity: 0;
translate: 0 -100%;
}
}
@utility animate-slide-left {
@apply transition-all duration-300 ease-[cubic-bezier(0.25,1,0.5,1)];
&[data-starting-style],
&[data-ending-style] {
opacity: 0;
translate: 100% 0;
}
}
@utility animate-slide-right {
@apply transition-all duration-300 ease-[cubic-bezier(0.25,1,0.5,1)];
&[data-starting-style],
&[data-ending-style] {
opacity: 0;
translate: -100% 0;
}
}
@utility animate-fade-zoom {
@apply transition-all duration-200 ease-[cubic-bezier(0.25,1,0.5,1)];
&[data-starting-style],
&[data-ending-style] {
opacity: 0;
scale: 0.94;
}
}
@utility animate-fade {
@apply transition-all duration-200;
&[data-starting-style],
&[data-ending-style] {
opacity: 0;
}
}基本用法
import {
Sheet,
SheetClose,
SheetDescription,
SheetFooter,
SheetHeader,
SheetContent,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
export function SheetDemo() {
return (
<Sheet>
<SheetTrigger>打开侧边面板</SheetTrigger>
<SheetContent showCloseButton>
<SheetHeader>
<SheetTitle>确定要执行此操作吗？</SheetTitle>
<SheetDescription>
此操作无法撤销。这将永久删除你的账户，并从我们的服务器中移除你的数据。
</SheetDescription>
</SheetHeader>
<SheetFooter>
<SheetClose>取消</SheetClose>
<SheetClose>继续</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>
);
}组件结构
<Sheet>
<SheetTrigger />
<SheetContent>
<SheetHeader>
<SheetTitle />
<SheetDescription />
</SheetHeader>
<SheetFooter>
<SheetClose />
</SheetFooter>
</SheetContent>
</Sheet>样式变体
API 参考
Sheet 组件底层使用了 Dialog 组件，详情请参阅 此处