quasar/dist/api/QStepper.json

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

{"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\""],"required":true,"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","null"],"default":"null","desc":"Notify the component that the background is a dark color","category":"style","required":false},"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","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'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","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'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","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'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","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'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","params":null,"returns":null},"previous":{"desc":"Go to previous panel","params":null,"returns":null},"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'"]}},"returns":null}}}