SxAnchoredRegion (锚定区域)
- Implemented
用于精确定位弹出层的基础组件。对齐 Microsoft Fluent UI Blazor AnchoredRegion (v4.13.2) 的 API 结构，并说明 NextUI 当前实现状态。
使用场景
- Tooltip、Popover 的定位基础
- 简单的上下左右定位
- 需要与锚点保持相对位置的浮层
约束说明
- 仅支持通过
AnchorId进行定位。 AutoUpdateMode仅支持Anchor/Auto。
行为说明
AnchorId为空时不计算定位。FixedPlacement为true时使用position: fixed。
API
Parameters
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | AnchorId |
string? |
null |
锚点元素 Id。 |
| Implemented | Position |
TooltipPosition |
Bottom |
定位偏好。 |
| Implemented | AutoUpdateMode |
AutoUpdateMode |
Anchor |
更新策略。 |
| Implemented | FixedPlacement |
bool |
false |
使用 fixed 位置。 |
| Implemented | ChildContent |
RenderFragment? |
null |
弹出内容。 |
| 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 属性。 |
Not Implemented (Fluent UI)
Anchor / AutoFocus / Horizontal* / Vertical* / Shadow / Viewport 等完整定位能力尚未实现。
示例
<div id="anchor-target">Anchor</div>
<SxAnchoredRegion AnchorId="anchor-target" Position="TooltipPosition.Bottom">
<SxCard Style="width: 200px;">内容区域</SxCard>
</SxAnchoredRegion>