Stepper

Display proper children based on the current step (initially set to 0). Please use the stepper's Actions to advance/reset step.

Name	Description
component	stepper
transition	bounceIn, flipX, flipY, fade, scale, slide, slideInRight, none - animation used when swiching steps
children	A list of Step

Example

{
  "component": "stepper",
  "children": [
    {
      "component": "step",
      "value": 0,
      "child": {
        "component": "grid",
        "children": [
          {
            "component": "text",
            "text": "initial step",
            "styles": {
              "root": {
                "color": "black",
                "fontSize": "24px"
              }
            }
          },
          {
            "component": "button",
            "text": "Next",
            "kind": "primary",
            "onClick": {
              "target": "incrementStep"
            }
          }
        ]
      }
    },
    {
      "component": "step",
      "value": 1,
      "child": {
        "component": "grid",
        "children": [
          {
            "component": "text",
            "text": "secondary step",
            "styles": {
              "root": {
                "color": "black",
                "fontSize": "24px"
              }
            }
          },
          {
            "component": "button",
            "text": "Next",
            "kind": "primary",
            "onClick": {
              "target": "incrementStep"
            }
          }
        ]
      }
    },
    {
      "component": "step",
      "value": 2,
      "child": {
        "component": "grid",
        "children": [
          {
            "component": "text",
            "text": "final step",
            "styles": {
              "root": {
                "color": "black",
                "fontSize": "24px"
              }
            }
          },
          {
            "component": "button",
            "text": "Next",
            "kind": "primary",
            "onClick": {
              "target": "resetStep"
            }
          }
        ]
      }
    }                              
  ]
}