SxPopover (弹出框)
比 Tooltip 更通用的弹出层容器。对齐 Microsoft Fluent UI Blazor Popover (v4.13.2) 的 API 结构，并说明 NextUI 当前实现状态。
使用场景
- 点击触发的提示与说明
- 操作菜单或二级内容
- 表单中的辅助说明
约束说明
TriggerContent 为空时需自行控制 Open。- 位置根据
Position 简单定位。
行为说明
- 点击触发器切换
Open。
OpenChanged 回调同步状态。
API
Parameters (参数)
| 状态 |
参数名 |
类型 |
默认值 |
描述 |
| Implemented |
TriggerContent |
RenderFragment? |
null |
触发器内容。 |
| Implemented |
ChildContent |
RenderFragment? |
null |
弹出内容。 |
| Implemented |
Open |
bool |
false |
打开状态。 |
| Implemented |
Position |
TooltipPosition |
Bottom |
弹出位置。 |
| Implemented |
AnchorId |
string? |
null |
锚定目标 Id。 |
| Implemented |
OpenChanged |
EventCallback<bool> |
- |
打开状态回调。 |
| 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 |
额外属性。 |
Events (事件)
| 状态 |
事件名 |
类型 |
描述 |
| Implemented |
OpenChanged |
EventCallback<bool> |
打开状态改变时触发。 |
Methods (方法)
| 方法名 |
返回类型 |
描述 |
TogglePopover() |
Task |
切换弹出框的显示状态。 |
OpenPopover() |
Task |
打开弹出框。 |
ClosePopover() |
Task |
关闭弹出框。 |
示例
<SxPopover>
<TriggerContent>
<SxButton>点击弹出</SxButton>
</TriggerContent>
<ChildContent>
<div>弹出内容</div>
</ChildContent>
</SxPopover>
参考设计 (References)
