quasar/src/components/stepper/QStep.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{
  "meta": {
    "docsUrl": "https://v1.quasar.dev/vue-components/stepper"
  },

  "mixins": [ "mixins/panel-child" ],

  "behavior": {
    "$listeners": true
  },

  "props": {
    "icon": {
      "extends": "icon",
      "category": "header"
    },

    "color": {
      "extends": "color"
    },

    "title": {
      "type": "String",
      "desc": "Step title",
      "required": true,
      "examples": [
        "Ad Groups", "Payment"
      ],
      "category": "header"
    },

    "caption": {
      "type": "String",
      "desc": "Step’s additional information that appears beneath the title",
      "examples": [
        "Create an account", "Payment details"
      ],
      "category": "header"
    },

    "prefix": {
      "type": [ "String", "Number" ],
      "desc": "Step's prefix (max 2 characters) which replaces the icon if step does not has error, is being edited or is marked as done",
      "examples": [
        "1", "2", "A", "B"
      ],
      "category": "header"
    },

    "done-icon": {
      "extends": "icon",
      "category": "header"
    },

    "done-color": {
      "extends": "color",
      "category": "header"
    },

    "active-icon": {
      "extends": "icon",
      "category": "header"
    },

    "active-color": {
      "extends": "color",
      "category": "header"
    },

    "error-icon": {
      "extends": "icon",
      "category": "header"
    },

    "error-color": {
      "extends": "color",
      "category": "header"
    },

    "header-nav": {
      "type": "Boolean",
      "default": true,
      "desc": "Allow navigation through the header",
      "category": "behavior"
    },

    "done": {
      "type": "Boolean",
      "desc": "Mark the step as 'done'",
      "category": "state"
    },

    "error": {
      "type": "Boolean",
      "desc": "Mark the step as having an error",
      "category": "state"
    }
  },

  "slots": {
    "default": {
      "desc": "The content of the step; Can also contain a QStepperNavigation if you want to handle step navigation and don't have a global navigation in place"
    }
  }
}