QiuYe UI
浮层与引导

Scrollable Dialog

可滚动对话框组件:头部和底部固定,内容区域可滚动,支持自定义高度,适用于需要展示大量内容的场景。

dialogmodalscrollablepopupoverlayshadcn

快速预览

查看 Scrollable Dialog 组件的基本效果

基本用法

使用 Scrollable Dialog 组件的基础示例

导入组件

1import {
2 ScrollableDialog,
3 ScrollableDialogHeader,
4 ScrollableDialogContent,
5 ScrollableDialogFooter,
6 DialogTitle,
7 DialogDescription,
8} from "@/components/qiuye-ui/scrollable-dialog";
9import { useState } from "react";
10import { Button } from "@/components/ui/button";

使用组件

1const [open, setOpen] = useState(false);
2
3return (
4 <>
5 <Button onClick={() => setOpen(true)}>打开对话框</Button>
6 <ScrollableDialog open={open} onOpenChange={setOpen}>
7 <ScrollableDialogHeader>
8 <DialogTitle>标题</DialogTitle>
9 <DialogDescription>描述</DialogDescription>
10 </ScrollableDialogHeader>
11
12 <ScrollableDialogContent>
13 {/* 可滚动的内容 */}
14 <p>这里是对话框的内容</p>
15 </ScrollableDialogContent>
16
17 <ScrollableDialogFooter>
18 <Button onClick={() => setOpen(false)}>确认</Button>
19 </ScrollableDialogFooter>
20 </ScrollableDialog>
21 </>
22);

组件演示

查看组件的各种使用方式和效果

基础用法
展示带有固定头部、可滚动内容和固定底部的对话框
长内容示例
展示大量内容时的滚动效果,头部和底部保持固定
自定义整体高度
可以通过 contentClassName 属性自定义对话框的整体高度
表单示例
在对话框中使用表单,展示实际应用场景
无底部操作栏
某些场景下可能不需要底部操作栏,比如纯信息展示
自定义渐变遮罩
可以控制上下渐变遮罩的显示和高度(默认开启,高度 40px)