弹窗

Scrollable Dialog

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

dialogmodalscrollablepopupoverlayshadcn

快速预览

查看 Scrollable Dialog 组件的基本效果

基本用法

使用 Scrollable Dialog 组件的基础示例

导入组件

import {
  ScrollableDialog,
  ScrollableDialogHeader,
  ScrollableDialogContent,
  ScrollableDialogFooter,
  DialogTitle,
  DialogDescription,
} from "@/components/qiuye-ui/scrollable-dialog";
import { useState } from "react";
import { Button } from "@/components/ui/button";

使用组件

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

return (
  <>
    <Button onClick={() => setOpen(true)}>打开对话框</Button>
    <ScrollableDialog open={open} onOpenChange={setOpen}>
      <ScrollableDialogHeader>
        <DialogTitle>标题</DialogTitle>
        <DialogDescription>描述</DialogDescription>
      </ScrollableDialogHeader>
      
      <ScrollableDialogContent>
        {/* 可滚动的内容 */}
        <p>这里是对话框的内容</p>
      </ScrollableDialogContent>
      
      <ScrollableDialogFooter>
        <Button onClick={() => setOpen(false)}>确认</Button>
      </ScrollableDialogFooter>
    </ScrollableDialog>
  </>
);

组件演示

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

基础用法

展示带有固定头部、可滚动内容和固定底部的对话框

长内容示例

展示大量内容时的滚动效果，头部和底部保持固定

自定义整体高度

可以通过 contentClassName 属性自定义对话框的整体高度

表单示例

在对话框中使用表单，展示实际应用场景

无底部操作栏

某些场景下可能不需要底部操作栏，比如纯信息展示

自定义渐变遮罩

可以控制上下渐变遮罩的显示和高度（默认开启，高度 40px）