SxTeachingBubble (教学气泡)

Implemented

用于引导用户、解释新功能或提供操作提示的弹出气泡。对齐 Microsoft Fluent UI Blazor TeachingBubble (v4.13.2) 的 API 结构，并说明 NextUI 当前实现状态。

使用场景

新功能引导
关键操作提示
页面步骤说明

约束说明

Visible 为 false 时不渲染气泡内容。
仅在有 PrimaryButtonText / SecondaryButtonText 时渲染底部操作区。

行为说明

点击按钮会触发 OnDismiss 并通过 VisibleChanged 更新可见性。
TargetId 用于指定锚点元素的 Id。

API

Parameters

状态	参数名	类型	默认值	描述
Implemented	`Visible`	`bool`	`false`	是否显示气泡。
Implemented	`Headline`	`string?`	`null`	标题文本。
Implemented	`PrimaryButtonText`	`string?`	`null`	主按钮文案。
Implemented	`SecondaryButtonText`	`string?`	`null`	次按钮文案。
Implemented	`TargetId`	`string?`	`null`	目标元素 Id。
Implemented	`Illustration`	`RenderFragment?`	`null`	顶部插画内容。
Implemented	`ChildContent`	`RenderFragment?`	`null`	气泡主体内容。
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	`VisibleChanged`	`EventCallback<bool>`	可见性变化事件。
Implemented	`OnDismiss`	`EventCallback`	关闭事件。

示例

<SxTeachingBubble Visible="true"
                  Headline="提示标题"
                  PrimaryButtonText="立即了解"
                  SecondaryButtonText="稍后再说">
    <SxTypography Variant="TypographyVariant.Body">这里是教学气泡内容。</SxTypography>
</SxTeachingBubble>

参考设计 (References)

Microsoft Fluent UI Blazor - TeachingBubble (v4.13.2)

在 Playground 中打开 →