Wizard Steps

Description:

Wizard Steps

It basically lets you throw a bunch of react components at it (data forms, text / html components etc) and it will take the user through those components in steps.

Allowed Parent Components:

  1. Card Table Column

  2. Col

  3. Grid Child

  4. Horizontal Section

  5. Page

  6. Vertical Section

Allowed Child Components:

  1. Popover

  2. Pulse

  3. Trigger Before Render

  4. Wizard Step

Properties

➤ Circle Size

Provide a number to set size of the wizard circle.

Allowed Values: Any number value

➤ Vertical

Enable this to appear wizard steps in vertical direction.

Allowed Values: Yes/No

➤ On Click

Allowed Values: Controller Function

➤ Border Top

Select this to add a border on top

Allowed Values: Yes/No

➤ Border Right

Select this to add a border on right

Allowed Values: Yes/No

➤ Border Bottom

Select this to add a border on bottom

Allowed Values: Yes/No

➤ Border Left

Select this to add a border on left

Allowed Values: Yes/No

➤ Border Width

Select an option to change the width of a border

Allowed Values:

  1. default

  2. normal

  3. thick

  4. thicker

➤ Border Type

Select an option to change the type of a border

Allowed Values:

  1. solid

  2. dashed

  3. dotted

➤ Border Color

Select a color or enter the custom class to set the color on the sides of the element's border.

Allowed Values: Select a color or enter the custom class to set the color on the sides of the element's border.

➤ Margin

Select a value to add margin on all four sides of the component. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.

Allowed Values: Any number value

➤ Margin Bottom

Select a value to add margin on the bottom of the component.

Allowed Values: Any number value

➤ Margin Left

Select a value to add margin on the left of the component.

Allowed Values: Any number value

➤ Margin Right

Select a value to add margin on the right of the component.

Allowed Values: Any number value

➤ Margin Top

Select a value to add margin on the top of the component.

Allowed Values: Any number value

➤ Padding

Select a value to add padding on all four sides of the component. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left.

Allowed Values: Any number value

➤ Padding Bottom

Select a value to add padding in the bottom of the component.

Allowed Values: Any number value

➤ Padding Left

Select a value to add padding in the left of the component.

Allowed Values: Any number value

➤ Padding Right

Select a value to add padding in right of the component.

Allowed Values: Any number value

➤ Padding Top

Select a value to add padding in top of the component.

Allowed Values: Any number value

Last updated