Drawer

侧边滑出面板，用于详情或表单。

最后更新 2026-10-25 19:27:08

说明

两种用法：① 页面内放 Drawer，Placement 取 left / right / top / bottom，Wide 为真时占更大宽度，调用方 @bind-Visible 控制；② 调用 UIService.ShowDrawer(new DrawerModel{ Title, Placement, Wide, Content = b => b.Component(...).Build() })，由全局 DrawerHost 渲染，正文可用 ComponentBuilder 动态创建组件，model.Close() 关闭。

常见能力：

四个方向
宽窄两档
自定义页脚
遮罩关闭开关
UIService.ShowDrawer 代码弹出
ComponentBuilder 动态正文

用法

@* 方式一：页面内引用 *@
<Drawer Title="订单详情" Placement="right" Wide="true"
        OnClose="@(() => open = false)">
    详情内容
    <Footer><Button Text="关闭" OnClick="@(() => open = false)" /></Footer>
</Drawer>

@* 方式二：UIService 代码弹出 *@
var model = new DrawerModel { Title = "详情", Wide = true,
    Content = b => b.Component<MyDetail>().Build() };
model.Footer = @<Button Text="关闭" OnClick="@model.Close" />;
UI.ShowDrawer(model);

API 参数

参数	类型	默认值	说明
`ChildContent`	`RenderFragment`	`null`
`Closable`	`bool`	`true`	显示关闭按钮。
`Footer`	`RenderFragment`	`null`	底部按钮。
`Icon`	`string`	`null`	标题图标。
`MaskClosable`	`bool`	`false`	点击遮罩关闭。默认 false：与 Modal 一致，只认右上角 × 与底部的取消/关闭按钮，避免误点空白把正在填的内容丢掉。确需「点外面即关」再显式传 true。
`OnClose`	`EventCallback<bool>`	—	事件
`Placement`	`string`	`"right"`	停靠位置：right（默认）/ left / top / bottom。
`Title`	`string`	`null`	标题。
`Visible`	`bool`	`true`	取得或设置组件是否可见，默认为false。
`VisibleChanged`	`EventCallback<bool>`	—	事件取得或设置组件可见性变化时的回调事件。
`Wide`	`bool`	`false`	加宽（640px）。
`Class`	`string`	`null`	取得或设置组件的CSS类名，用于自定义样式。
`Disabled`	`bool`	`false`	取得或设置组件是否禁用，默认为false。
`Style`	`string`	`null`	取得或设置组件的内联样式，用于自定义样式。

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。