Class TabzardDialog

A dialog with multiple steps.

The <tabzard> custom element is a replacement for the <generic-dialog> custom element. The GenericDialogController and GenericDialogService can be used to open and close tabzards. Basic Tabzard example:

// example.ts
export class Example {
   public mode: string = 'edit';
   private loadModel = async (model): Promise<void> => {
       // Load some data.
   }

   private finish = async (): Promise<string> => {
       return "foo";
   }
}
Copy

<!-- example.html -->
<tabzard-dialog load-model.bind finish.bind width="35rem" height="40rem" mode.bind="mode">
	<normal-text au-slot="header" value="Main Header"></normal-text>
	<tabzard-step header="Foo" validation-controller.bind="validationControllerStep1">
		<normal-text value="Foo content"></normal-text>
		<validated-control controller.bind="validationControllerStep1">
			<checkbox-control selected.two-way="failValidation.booleanP1 & validate:'changeOrFocusout':validationControllerStep1">
			</checkbox-control>
		</validated-control>
	</tabzard-step>
	<tabzard-step header="Bar" validation-controller.bind="validationControllerStep2">
		<normal-text value="Bar content"></normal-text>
		<validated-control controller.bind="validationControllerStep2">
			<checkbox-control selected.two-way="failValidation.booleanP2 & validate:'changeOrFocusout':validationControllerStep2">
			</checkbox-control>
		</validated-control>
	</tabzard-step>
</tabzard-dialog>
Copy