SxDrawer (抽屉)

  • Implemented

从屏幕边缘滑出的导航或内容面板。对齐 Microsoft Fluent UI Blazor Drawer (v4.13.2) 的 API 结构，并说明 NextUI 当前实现状态。

使用场景

  • 侧边导航与设置面板
  • 表单或详情信息补充展示
  • 临时任务或快捷操作

约束说明

  • 组件始终渲染在 DOM 中，通过 IsOpen 控制可见性。
  • Width 仅适用于左右抽屉，Height 仅适用于上下抽屉。
  • PositioningMode 可选择固定在视口或绑定到容器。

行为说明

  • 点击遮罩会关闭抽屉并触发 OnDrawerClosed（禁用时除外）。
  • IsOpen 变化会触发 IsOpenChanged。

API

Parameters (参数)

状态 参数名 类型 默认值 描述
Implemented IsOpen bool false 抽屉是否展开（支持双向绑定）。
Implemented Position DrawerPlacement Right 弹出位置：Left, Right, Top, Bottom。
Implemented HeaderText string "" 抽屉标题。
Implemented ChildContent RenderFragment? null 抽屉内容。
Implemented Footer RenderFragment? null 底部区域内容。
Implemented Width string? "320px" 抽屉宽度（左右模式）。
Implemented Height string? null 抽屉高度（上下模式）。
Implemented BodyPadding string? null 内容区内边距（为空则使用默认样式）。
Implemented PositioningMode SxDrawerPositioningMode Fixed 定位模式（Fixed/Absolute）。
Implemented OverlayMode SxDrawerOverlayMode Default 遮罩模式（默认/透明/隐藏）。
Implemented Disabled (继承) bool false 禁用交互。
Implemented Id (继承) string? null 组件的物理 Id。
Implemented Class (继承) string? null 自定义 CSS 类名。
Implemented Style (继承) string? null 自定义样式。
Implemented Title (继承) string? null HTML title 属性。
Implemented AdditionalAttributes (继承) IEnumerable<KeyValuePair<string, object>>? null 捕获不匹配的 HTML 属性。

Events (事件)

状态 事件名 类型 描述
Implemented IsOpenChanged EventCallback<bool> 展开状态改变时触发。
Implemented OnDrawerClosed EventCallback 抽屉完全关闭后触发。
Implemented OnDrawerOpened EventCallback 抽屉完全打开后触发。

示例

<SxDrawer @bind-IsOpen="_open" HeaderText="设置">
    <SxTypography>内容区域</SxTypography>
</SxDrawer>

参考设计 (References)

在 Playground 中打开 →