简介

一个从屏幕边缘滑入的面板，用于在不离开当前页面的情况下展示内容或操作。

用法

基础抽屉

import { Drawer, Button } from "../components/ui";

export default function MyPage() {
  return (
    <Drawer
      trigger={<Button>Open Drawer</Button>}
      title="Settings"
      description="Adjust your preferences."
      body="Drawer body content goes here."
      cancel={<Button variant="outline">Close</Button>}
      confirm={<Button>Save</Button>}
    />
  );
}

CMS 页面构建器

此组件在 页面构建器（content/pages/*.json）中以 drawer 块的形式提供。trigger 是一个嵌套的块列表（CMS 始终提交一个数组）：

{
  "type": "drawer",
  "title": "Settings",
  "description": "Adjust your preferences.",
  "confirmText": "Save",
  "cancelText": "Close",
  "trigger": [{ "type": "button", "text": "Open Drawer" }]
}

属性

Drawer

| title | `string \ | JSX.Element` | 抽屉标题。 | | description | `string \ | JSX.Element` | 抽屉描述。 | | body | `string \ | JSX.Element` | 主体内容。 | | footer | `string \ | JSX.Element` | 自定义页脚内容。 |

| cancel | JSX.Element | 渲染为关闭（取消）触发器的元素。 | | confirm | JSX.Element | 渲染为操作触发器的元素。 | | closable | boolean | 是否显示关闭按钮。默认：true。 | | interactive | boolean | 为交互行为启用客户端水合。 | | class | string | 根元素的自定义 CSS 类。 |

其他属性（例如 open、defaultOpen、onOpenChange、id）会转发到底层的抽屉 primitive。