SusTutorialModal

教程弹窗：SusModal + SusDialogueBox，带 Next/Skip；可选软交接 SusSpotlightTour，无 tour 亦可独立使用。

包

SusKit · 分子（商业）

在 Playground 中打开

SusKit · Molecules

属性

名称	类型	默认值
Model	Prop<bool>	false	v-model
CurrentIndex	Prop<int>	-1
NextLabel	Prop<string>	"Next"
FinishLabel	Prop<string>	"Done"
SkipLabel	Prop<string>	"Skip"
Reveal	Prop<string>	"Instant"
Width	Prop<float>	480f
Persistent	Prop<bool>	true	v-model

插槽

没有插槽。

事件

名称	字段	载荷
Opened	OnOpened	—
Closed	OnClosed	—

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

• sus-modal__title
• sus-tutorial-modal
• sus-tutorial-modal__next
• sus-tutorial-modal__skip
• sus-tutorial-modal__title
• sus-tutorial-modal__title--empty

用法

围绕 SusDialogueBox 构建带 Next/Skip 的模态。可选 AttachSpotlight 在挂接了 tour 时把当前步骤的高亮目标交给 SusSpotlightTour；没有 tour 时模态仍可运行。

var tutorial = new SusTutorialModal();
tutorial.NextLabel.Value = "Next";
tutorial.SkipLabel.Value = "Skip";
tutorial.Reveal.Value = "PerChar";
tutorial.AddStep("Guide", "Welcome aboard.", title: "Intro");
tutorial.AddStep("Guide", "Open the inventory with I.", title: "Inventory");
// tutorial.AttachSpotlight(myTour); // soft — omit if no tour
tutorial.Completed = () => { /* finished */ };
tutorial.Skipped = () => { /* aborted */ };
tutorial.Start();
// tutorial.Next(); tutorial.Skip(); tutorial.Close();

Prop / API	角色
Model / CurrentIndex	打开状态与步骤索引
NextLabel / SkipLabel	按钮文案
Reveal / Width / Persistent	对话 reveal + 模态 chrome
AddStep / ClearSteps	构建步骤列表
AttachSpotlight(tour)	软交接给 spotlight tour
Start / Next / Skip / Close	运行控制
StepChanged / Completed / Skipped	宿主事件

说明

• Storybook story Tutorial Modal (tutorial-modal).
• Hub shot kit-tutorial-modal.png — 展示，已从 Play mode 实拍。