Я реализую многошаговую форму как мастер в Svelte, и моя реализация пока ужасна.
Вот абстрактный эскиз:

Я, как правило, спроектировал это так:
Wizard
-* FooStepButton (nested inside wizard's progress bar)
- [button content]
- [step-specific form content]
Проблема в том, как я это реализовал, поля формы являются потомком DOM соответствующей кнопки индикатора выполнения. и я использовал display: fixed
, чтобы вырваться из абсолютно позиционированного индикатора выполнения. Я знал, что это взлом, и он работает на настольном компьютере, но не на iPad, так что пришло время не быть взломанным.
Как я его разработал, мне понадобится что-то вроде slot
с несколько дочерних, таким образом, каждый FooStep
может визуализировать содержимое формы в слоте содержимого мастера. Или я мог бы сделать это каким-то другим способом, если только содержимое формы и индикатор выполнения являются одноуровневыми.
Что-то, слоты и контекст?