quasar

{ "type": "component", "meta": { "docsUrl": "https://v2.quasar.dev/vue-components/stepper" }, "props": { "model-value": { "type": "Any", "desc": "Model of the component defining the current panel's name; If a Number is used, it does not define the panel's index, but rather the panel's name which can also be an Integer; Either use this property (along with a listener for 'update:model-value' event) OR use the v-model directive.", "examples": [ "v-model=\"panelName\"" ], "category": "model" }, "keep-alive": { "type": "Boolean", "desc": "Equivalent to using Vue's native <keep-alive> component on the content", "category": "behavior" }, "keep-alive-include": { "type": [ "String", "Array", "RegExp" ], "desc": "Equivalent to using Vue's native include prop for <keep-alive>; Values must be valid Vue component names", "examples": [ "a,b", "/a|b/", "['a', 'b']" ], "category": "behavior" }, "keep-alive-exclude": { "type": [ "String", "Array", "RegExp" ], "desc": "Equivalent to using Vue's native exclude prop for <keep-alive>; Values must be valid Vue component names", "examples": [ "a,b", "/a|b/", "['a', 'b']" ], "category": "behavior" }, "keep-alive-max": { "type": "Number", "desc": "Equivalent to using Vue's native max prop for <keep-alive>", "category": "behavior" }, "animated": { "type": "Boolean", "desc": "Enable transitions between panel (also see 'transition-prev' and 'transition-next' props)", "category": "behavior" }, "infinite": { "type": "Boolean", "desc": "Makes component appear as infinite (when reaching last panel, next one will become the first one)", "category": "behavior" }, "swipeable": { "type": "Boolean", "desc": "Enable swipe events (may interfere with content's touch/mouse events)", "category": "behavior" }, "vertical": { "type": "Boolean", "desc": "Put Stepper in vertical mode (instead of horizontal by default)", "category": "behavior" }, "transition-prev": { "type": "String", "desc": "One of Quasar's embedded transitions (has effect only if 'animated' prop is set)", "examples": [ "fade", "slide-down" ], "category": "transition", "default": "slide-right/slide-down", "required": false }, "transition-next": { "type": "String", "desc": "One of Quasar's embedded transitions (has effect only if 'animated' prop is set)", "examples": [ "fade", "slide-down" ], "category": "transition", "default": "slide-left/slide-up", "required": false }, "transition-duration": { "type": [ "String", "Number" ], "desc": "Transition duration (in milliseconds, without unit)", "default": 300, "category": "transition", "addedIn": "v2.2", "required": false }, "dark": { "type": "Boolean", "desc": "Notify the component that the background is a dark color", "category": "style" }, "flat": { "type": "Boolean", "desc": "Applies a 'flat' design (no default shadow)", "category": "style" }, "bordered": { "type": "Boolean", "desc": "Applies a default border to the component", "category": "style" }, "alternative-labels": { "type": "Boolean", "desc": "Use alternative labels - stacks the icon on top of the label (applies only to horizontal stepper)", "category": "header" }, "header-nav": { "type": "Boolean", "desc": "Allow navigation through the header", "category": "behavior" }, "contracted": { "type": "Boolean", "desc": "Hide header labels on narrow windows", "category": "header|behavior" }, "inactive-icon": { "type": "String", "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)", "examples": [ "map", "ion-add", "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg", "img:path/to/some_image.png" ], "category": "header" }, "inactive-color": { "type": "String", "desc": "Color name for component from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "header" }, "done-icon": { "type": "String", "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix", "examples": [ "map", "ion-add", "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg", "img:path/to/some_image.png" ], "category": "header" }, "done-color": { "type": "String", "desc": "Color name for component from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "header" }, "active-icon": { "type": "String", "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix", "examples": [ "map", "ion-add", "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg", "img:path/to/some_image.png" ], "category": "header" }, "active-color": { "type": "String", "desc": "Color name for component from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "header" }, "error-icon": { "type": "String", "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix", "examples": [ "map", "ion-add", "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg", "img:path/to/some_image.png" ], "category": "header" }, "error-color": { "type": "String", "desc": "Color name for component from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "header" }, "header-class": { "type": "String", "desc": "Class definitions to be attributed to the header", "examples": [ "my-special-class" ], "category": "style" } }, "slots": { "default": { "desc": "Suggestion: QStep" }, "navigation": { "desc": "Slot specific for the global navigation; Suggestion: QStepperNavigation" }, "message": { "desc": "Slot specific for putting a message on top of each step (if horizontal stepper) or above steps (if vertical); Suggestion: QBanner, div.q-pa-lg" } }, "events": { "update:model-value": { "desc": "Emitted when the component changes the model; This event _isn't_ fired if the model is changed externally; Is also used by v-model", "params": { "value": { "type": [ "String", "Number" ], "desc": "New current panel name", "examples": [ "dashboard" ] } } }, "before-transition": { "desc": "Emitted before transitioning to a new panel", "params": { "newVal": { "type": [ "String", "Number" ], "desc": "Panel name towards transition is going", "examples": [ "dashboard" ] }, "oldVal": { "type": [ "String", "Number" ], "desc": "Panel name from which transition is happening", "examples": [ "dashboard" ] } } }, "transition": { "desc": "Emitted after component transitioned to a new panel", "params": { "newVal": { "type": [ "String", "Number" ], "desc": "Panel name towards transition has occurred", "examples": [ "dashboard" ] }, "oldVal": { "type": [ "String", "Number" ], "desc": "Panel name from which transition has happened", "examples": [ "dashboard" ] } } } }, "methods": { "next": { "desc": "Go to next panel" }, "previous": { "desc": "Go to previous panel" }, "goTo": { "desc": "Go to specific panel", "params": { "panelName": { "type": [ "String", "Number" ], "desc": "Panel's name, which may be a String or Number; Number does not refers to panel index, but to its name, which may be an Integer", "required": true, "examples": [ "dashboard" ] } } } } }