SusTutorialModal

Туториальная модалка — SusModal + SusDialogueBox с шагами Next/Skip; мягкая передача в SusSpotlightTour при наличии тура, без тура работает автономно.

Пакет

SusKit · Молекулы (коммерческий)

Открыть в песочнице

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

Слоты

Слотов нет.

События

Имя	Поле	Payload
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 передаёт цель подсветки текущего шага в SusSpotlightTour, если тур прикреплён; без тура модалка всё равно работает.

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 диалога + хром модалки
AddStep / ClearSteps	собрать список шагов
AttachSpotlight(tour)	мягкая передача spotlight-туру
Start / Next / Skip / Close	управление прогоном
StepChanged / Completed / Skipped	события хоста

Заметки

• Storybook story Tutorial Modal (tutorial-modal).
• Hub shot kit-tutorial-modal.png — витрина, снято в Play mode.