",
"doc-url": "https://quasar.dev"
},
{
"name": "hint",
"description": "Slot for hint text; Enabled only if 'bottom-slots' prop is used; Suggestion:
",
"doc-url": "https://quasar.dev"
},
{
"name": "counter",
"description": "Slot for counter text; Enabled only if 'bottom-slots' prop is used; Suggestion:
",
"doc-url": "https://quasar.dev"
},
{
"name": "loading",
"description": "Override default spinner when component is in loading mode; Use in conjunction with 'loading' prop",
"doc-url": "https://quasar.dev"
},
{
"name": "control",
"vue-properties": [
{
"name": "id",
"type": "string",
"description": "Element id used in the `for` attribute of the field label. Can be used to link the control to the label\n\nExamples:\nqf_363270c0-7a83-62b1-8dcf-6dfd64ee38fa",
"doc-url": "https://quasar.dev"
},
{
"name": "field",
"type": "object",
"description": "DOM element of the field",
"doc-url": "https://quasar.dev"
},
{
"name": "editable",
"type": "boolean",
"description": "Field is editable",
"doc-url": "https://quasar.dev"
},
{
"name": "focused",
"type": "boolean",
"description": "Field has focus",
"doc-url": "https://quasar.dev"
},
{
"name": "floatingLabel",
"type": "boolean",
"description": "Field's label is floating",
"doc-url": "https://quasar.dev"
},
{
"name": "value",
"type": "any",
"description": "Field's value\n\nExamples:\n0.241\nText",
"doc-url": "https://quasar.dev"
},
{
"name": "emitValue",
"type": "Function",
"description": "Function that emits an @input event in the context of the field",
"doc-url": "https://quasar.dev"
}
],
"description": "Slot for controls; Suggestion QSlider, QRange, QKnob, ...",
"doc-url": "https://quasar.dev"
}
],
"description": "QField - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QForm",
"source": {
"module": "quasar",
"symbol": "QForm"
},
"attributes": [
{
"name": "autofocus",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Focus first focusable element on initial component render",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "no-error-focus",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Do not try to focus on first component that has a validation error when submitting form",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "no-reset-focus",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Do not try to focus on first component when resetting form",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "greedy",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Validate all fields in form (by default it stops after finding the first invalid field with synchronous validation)",
"doc-url": "https://quasar.dev",
"type": "boolean"
}
],
"events": [
{
"name": "submit",
"description": "Emitted when all validations have passed when tethered to a submit button",
"doc-url": "https://quasar.dev"
},
{
"name": "reset",
"description": "Emitted when all validations have been reset when tethered to a reset button; It is recommended to manually reset the wrapped components models in this handler",
"doc-url": "https://quasar.dev"
},
{
"name": "validation-success",
"description": "Emitted after a validation was triggered and all inner Quasar components models are valid",
"doc-url": "https://quasar.dev"
},
{
"name": "validation-error",
"description": "Emitted after a validation was triggered and at least one of the inner Quasar components models are NOT valid",
"doc-url": "https://quasar.dev"
}
],
"slots": [
{
"name": "default",
"description": "Default slot in the devland unslotted content of the component",
"doc-url": "https://quasar.dev"
}
],
"description": "QForm - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QIcon",
"source": {
"module": "quasar",
"symbol": "QIcon"
},
"attributes": [
{
"name": "size",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)\n\nExamples:\n16px\n2rem\nxs\nmd",
"doc-url": "https://quasar.dev"
},
{
"name": "name",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Name of the icon, following Quasar convention\n\nExamples:\nmap\nion-add",
"doc-url": "https://quasar.dev"
},
{
"name": "color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for component from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://quasar.dev"
},
{
"name": "left",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Useful if icon is on the left side of something: applies a standard margin on the right side of Icon",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "right",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Useful if icon is on the right side of something: applies a standard margin on the left side of Icon",
"doc-url": "https://quasar.dev",
"type": "boolean"
}
],
"slots": [
{
"name": "default",
"description": "Suggestions: QTooltip or QMenu",
"doc-url": "https://quasar.dev"
}
],
"description": "QIcon - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QImg",
"source": {
"module": "quasar",
"symbol": "QImg"
},
"attributes": [
{
"name": "src",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Path to image\n\nExamples:\n(statics folder) statics/img/something.png\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) https://some-site.net/some-img.gif",
"doc-url": "https://quasar.dev"
},
{
"name": "srcset",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Same syntax as ![]()
srcset attribute.\n\nExamples:\nelva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w",
"doc-url": "https://quasar.dev"
},
{
"name": "sizes",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Same syntax as ![]()
sizes attribute.\n\nExamples:\n(max-width: 320px) 280px, (max-width: 480px) 440px, 800px",
"doc-url": "https://quasar.dev"
},
{
"name": "alt",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Specifies an alternate text for the image, if the image cannot be displayed\n\nExamples:\nTwo cats",
"doc-url": "https://quasar.dev"
},
{
"name": "placeholder-src",
"value": {
"kind": "expression",
"type": "string"
},
"description": "While waiting for your image to load, you can use a placeholder image\n\nExamples:\nhttps://some-site.net/some-placeholder.jpg",
"doc-url": "https://quasar.dev"
},
{
"name": "basic",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Do not use transitions; faster render",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "contain",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Make sure that the image getting displayed is fully contained, regardless if additional blank space besides the image is needed on horizontal or vertical",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "position",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Equivalent to CSS background-position property\n\nExamples:\n0 0\n20px 50px",
"doc-url": "https://quasar.dev",
"default": "\"50% 50%\""
},
{
"name": "ratio",
"value": {
"kind": "expression",
"type": "string|number"
},
"description": "Force the component to maintain an aspect ratio\n\nExamples:\n(Number format) :ratio=\"16/9\"\n(String format) ratio=\"1\"",
"doc-url": "https://quasar.dev"
},
{
"name": "transition",
"value": {
"kind": "expression",
"type": "string"
},
"description": "One of Quasar's embedded transitions\n\nExamples:\nfade\nslide-down",
"doc-url": "https://quasar.dev",
"default": "\"fade\""
},
{
"name": "spinner-color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for default Spinner (unless using a 'loading' slot)\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://quasar.dev"
},
{
"name": "spinner-size",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Size in CSS units, including unit name, for default Spinner (unless using a 'loading' slot)\n\nExamples:\n16px\n2rem",
"doc-url": "https://quasar.dev"
},
{
"name": "no-default-spinner",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Do not display the default spinner when loading images (unless you are specifying one through the 'loading' slot)",
"doc-url": "https://quasar.dev",
"type": "boolean"
}
],
"events": [
{
"name": "load",
"arguments": [
{
"name": "src",
"type": "string",
"description": "URL of image that has been loaded; useful when using 'srcset' and/or 'sizes'\n\nExamples:\nhttps://some-site.net/some-img.gif",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when image has been loaded by the browser",
"doc-url": "https://quasar.dev"
},
{
"name": "error",
"arguments": [
{
"name": "src",
"type": "Error",
"description": "JS Error object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when browser could not load the image",
"doc-url": "https://quasar.dev"
}
],
"slots": [
{
"name": "default",
"description": "Default slot can be used for captions. See examples",
"doc-url": "https://quasar.dev"
},
{
"name": "loading",
"description": "While image is loading, this slot is being displayed on top of the component; Suggestions: a spinner or text",
"doc-url": "https://quasar.dev"
},
{
"name": "error",
"description": "Optional slot to be used when image could not be loaded; make sure you assign a min-height and min-width to the component through CSS",
"doc-url": "https://quasar.dev"
}
],
"description": "QImg - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QInfiniteScroll",
"source": {
"module": "quasar",
"symbol": "QInfiniteScroll"
},
"attributes": [
{
"name": "offset",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Offset (pixels) to bottom of Infinite Scroll container from which the component should start loading more content in advance\n\nExamples:\n:offset=\"250\"",
"doc-url": "https://quasar.dev",
"default": "500"
},
{
"name": "debounce",
"value": {
"kind": "expression",
"type": "string|number"
},
"description": "Debounce amount (in milliseconds)\n\nExamples:\n0\n530",
"doc-url": "https://quasar.dev",
"default": "100"
},
{
"name": "scroll-target",
"value": {
"kind": "expression",
"type": "Element|string"
},
"description": "CSS selector or DOM element to be used as scroll container instead of the auto detected one\n\nExamples:\n:scroll-target=\"$refs.scrollTarget\"\nscroll-target=\"scroll-target\"",
"doc-url": "https://quasar.dev"
},
{
"name": "disable",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Put component in disabled mode",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "reverse",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Scroll area should behave like a messenger - starting scrolled to bottom and loading when reaching the top",
"doc-url": "https://quasar.dev",
"type": "boolean"
}
],
"events": [
{
"name": "load",
"arguments": [
{
"name": "index",
"type": "number",
"description": "The index parameter can be used to make some sort of pagination on the content you load. It takes numeric values starting with 1 and incrementing with each call\n\nExamples:\n12",
"doc-url": "https://quasar.dev"
},
{
"name": "done",
"type": "Function",
"description": "Function to call when you made all necessary updates. DO NOT forget to call it otherwise your loading message will continue to be displayed",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when Infinite Scroll needs to load more data",
"doc-url": "https://quasar.dev"
}
],
"slots": [
{
"name": "default",
"description": "Default slot in the devland unslotted content of the component",
"doc-url": "https://quasar.dev"
},
{
"name": "loading",
"description": "Slot displaying something while loading content; Example: QSpinner",
"doc-url": "https://quasar.dev"
}
],
"description": "QInfiniteScroll - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QInnerLoading",
"source": {
"module": "quasar",
"symbol": "QInnerLoading"
},
"attributes": [
{
"name": "size",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Size in CSS units, including unit name, or standard size name (xs|sm|md|lg|xl), for the inner Spinner (unless using the default slot)\n\nExamples:\n16px\n2rem\nxs\nmd",
"doc-url": "https://quasar.dev",
"default": "\"42px\""
},
{
"name": "showing",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "State - loading or not",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for component from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://quasar.dev"
},
{
"name": "transition-show",
"value": {
"kind": "expression",
"type": "string"
},
"description": "One of Quasar's embedded transitions\n\nExamples:\nfade\nslide-down",
"doc-url": "https://quasar.dev",
"default": "\"fade\""
},
{
"name": "transition-hide",
"value": {
"kind": "expression",
"type": "string"
},
"description": "One of Quasar's embedded transitions\n\nExamples:\nfade\nslide-down",
"doc-url": "https://quasar.dev",
"default": "\"fade\""
},
{
"name": "dark",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Notify the component that the background is a dark color",
"doc-url": "https://quasar.dev",
"type": "boolean"
}
],
"slots": [
{
"name": "default",
"description": "Default slot is used for replacing default Spinner; Suggestions: a spinner or text",
"doc-url": "https://quasar.dev"
}
],
"description": "QInnerLoading - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QInput",
"source": {
"module": "quasar",
"symbol": "QInput"
},
"attributes": [
{
"name": "mask",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Custom mask or one of the predefined mask names\n\nExamples:\n###-##\ndate\ndatetime\ntime\nfulltime\nphone\ncard",
"doc-url": "https://quasar.dev"
},
{
"name": "fill-mask",
"value": {
"kind": "expression",
"type": "boolean|string"
},
"description": "Fills string with specified characters (or underscore if value is not string) to fill mask's length\n\nExamples:\ntrue\n'0'\n'_'",
"doc-url": "https://quasar.dev"
},
{
"name": "reverse-fill-mask",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Fills string from the right side of the mask",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "unmasked-value",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Model will be unmasked (won't contain tokens/separation characters)",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "error",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Does field have validation errors?",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "error-message",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Validation error message (gets displayed only if 'error' is set to 'true')\n\nExamples:\nUsername must have at least 5 characters",
"doc-url": "https://quasar.dev"
},
{
"name": "no-error-icon",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Hide error icon when there is an error",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "rules",
"value": {
"kind": "expression",
"type": "any[]"
},
"description": "Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules\n\nExamples:\n:rules=\"[ val => val.length <= 3 || 'Please use maximum 3 characters' ]\"\n:rules=\"[ 'fulltime' ]\"",
"doc-url": "https://quasar.dev"
},
{
"name": "lazy-rules",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Check validation status against the 'rules' only after field loses focus for first time",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "label",
"value": {
"kind": "expression",
"type": "string"
},
"description": "A text label that will “float” up above the input field, once the field gets focus\n\nExamples:\nUsername",
"doc-url": "https://quasar.dev"
},
{
"name": "stack-label",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Label will be always shown above the field regardless of field content (if any)",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "hint",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Helper (hint) text which gets placed below your wrapped form component\n\nExamples:\nFill in between 3 and 12 characters",
"doc-url": "https://quasar.dev"
},
{
"name": "hide-hint",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Hide the helper (hint) text when field doesn't have focus",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "prefix",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Prefix\n\nExamples:\n$",
"doc-url": "https://quasar.dev"
},
{
"name": "suffix",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Suffix\n\nExamples:\n@gmail.com",
"doc-url": "https://quasar.dev"
},
{
"name": "color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for component from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://quasar.dev"
},
{
"name": "bg-color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for component from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://quasar.dev"
},
{
"name": "dark",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Notify the component that the background is a dark color",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "loading",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the 'loading' slot.",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "clearable",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "clear-icon",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Custom icon to use for the clear button when using along with 'clearable' prop\n\nExamples:\nclose",
"doc-url": "https://quasar.dev"
},
{
"name": "filled",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Use 'filled' design for the field",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "outlined",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Use 'outlined' design for the field",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "borderless",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Use 'borderless' design for the field",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "standout",
"value": {
"kind": "expression",
"type": "boolean|string"
},
"description": "Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones)\n\nExamples:\nstandout\nstandout=\"bg-primary text-white\"",
"doc-url": "https://quasar.dev"
},
{
"name": "bottom-slots",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Enables bottom slots ('error', 'hint', 'counter')",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "hide-bottom-space",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Does not reserves space for hint/error/counter anymore when these are not used; as a result, it also disables the animation for those",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "counter",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Show an automatic counter on bottom right",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "rounded",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Applies a small standard border-radius for a squared shape of the component",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "square",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Remove border-radius so borders are squared; Overrides 'rounded' prop",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "dense",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Dense mode; occupies less space",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "items-aligned",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Align content to match QItem",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "disable",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Put component in disabled mode",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "readonly",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Put component in readonly mode",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "autofocus",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Focus field on initial component render",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "value",
"value": {
"kind": "expression",
"type": "string|number"
},
"description": "Model of the component; Either use this property (along with a listener for 'input' event) OR use v-model directive\n\nExamples:\nv-model=\"myText\"",
"doc-url": "https://quasar.dev",
"required": true
},
{
"name": "type",
"value": {
"kind": "expression",
"type": "'text'|'password'|'textarea'|'email'|'search'|'tel'|'file'|'number'|'url'|'time'|'date'"
},
"description": "Input type\n\nExamples:\npassword",
"doc-url": "https://quasar.dev",
"default": "\"text\""
},
{
"name": "debounce",
"value": {
"kind": "expression",
"type": "string|number"
},
"description": "Debounce amount (in milliseconds) when updating model\n\nExamples:\n0\n530",
"doc-url": "https://quasar.dev"
},
{
"name": "maxlength",
"value": {
"kind": "expression",
"type": "string|number"
},
"description": "Specify a max length of model\n\nExamples:\n12",
"doc-url": "https://quasar.dev"
},
{
"name": "autogrow",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Make field autogrow along with its content (uses a textarea)",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "input-class",
"value": {
"kind": "expression",
"type": "any[]|string|object"
},
"description": "Class definitions to be attributed to the underlying input tag\n\nExamples:\nmy-special-class\n:input-class=\"{ 'my-special-class': }\"",
"doc-url": "https://quasar.dev"
},
{
"name": "input-style",
"value": {
"kind": "expression",
"type": "any[]|string|object"
},
"description": "Style definitions to be attributed to the underlying input tag\n\nExamples:\nbackground-color: #ff0000\n:input-style=\"{ backgroundColor: '#ff0000' }\"",
"doc-url": "https://quasar.dev"
}
],
"events": [
{
"name": "clear",
"arguments": [
{
"name": "value",
"type": "any",
"description": "The previous value before clearing it",
"doc-url": "https://quasar.dev"
}
],
"description": "When using the 'clearable' property, this event is emitted when the clear icon is clicked",
"doc-url": "https://quasar.dev"
},
{
"name": "input",
"arguments": [
{
"name": "value",
"type": "string|number",
"description": "New model value",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when the component needs to change the model; Is also used by v-model",
"doc-url": "https://quasar.dev"
},
{
"name": "focus",
"arguments": [
{
"name": "evt",
"type": "object",
"description": "JS event object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when component gets focused",
"doc-url": "https://quasar.dev"
},
{
"name": "blur",
"arguments": [
{
"name": "evt",
"type": "object",
"description": "JS event object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when component loses focus",
"doc-url": "https://quasar.dev"
}
],
"slots": [
{
"name": "default",
"description": "Field main content",
"doc-url": "https://quasar.dev"
},
{
"name": "prepend",
"description": "Prepend inner field; Suggestions: QIcon, QBtn",
"doc-url": "https://quasar.dev"
},
{
"name": "append",
"description": "Append to inner field; Suggestions: QIcon, QBtn",
"doc-url": "https://quasar.dev"
},
{
"name": "before",
"description": "Prepend outer field; Suggestions: QIcon, QBtn",
"doc-url": "https://quasar.dev"
},
{
"name": "after",
"description": "Append outer field; Suggestions: QIcon, QBtn",
"doc-url": "https://quasar.dev"
},
{
"name": "error",
"description": "Slot for errors; Enabled only if 'bottom-slots' prop is used; Suggestion:
",
"doc-url": "https://quasar.dev"
},
{
"name": "hint",
"description": "Slot for hint text; Enabled only if 'bottom-slots' prop is used; Suggestion:
",
"doc-url": "https://quasar.dev"
},
{
"name": "counter",
"description": "Slot for counter text; Enabled only if 'bottom-slots' prop is used; Suggestion:
",
"doc-url": "https://quasar.dev"
},
{
"name": "loading",
"description": "Override default spinner when component is in loading mode; Use in conjunction with 'loading' prop",
"doc-url": "https://quasar.dev"
}
],
"description": "QInput - Quasar component",
"doc-url": "https://quasar.dev",
"vue-model": {
"prop": "value",
"event": "input"
}
},
{
"name": "QKnob",
"source": {
"module": "quasar",
"symbol": "QKnob"
},
"attributes": [
{
"name": "size",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)\n\nExamples:\n16px\n2rem\nxs\nmd",
"doc-url": "https://quasar.dev"
},
{
"name": "value",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Any number to indicate the given value of the knob. Either use this property (along with a listener for 'input' event) OR use the v-model directive\n\nExamples:\nv-model=\"myValue\"",
"doc-url": "https://quasar.dev"
},
{
"name": "min",
"value": {
"kind": "expression",
"type": "number"
},
"description": "The minimum value that the model (the knob value) should start at\n\nExamples:\n20\n5",
"doc-url": "https://quasar.dev"
},
{
"name": "max",
"value": {
"kind": "expression",
"type": "number"
},
"description": "The maximimum value that the model (the knob value) should go to\n\nExamples:\n100\n50",
"doc-url": "https://quasar.dev"
},
{
"name": "step",
"value": {
"kind": "expression",
"type": "number"
},
"description": "A number representing steps in the value of the model, while adjusting the knob\n\nExamples:\n1\n5",
"doc-url": "https://quasar.dev",
"default": "\"1\""
},
{
"name": "color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for component from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://quasar.dev"
},
{
"name": "center-color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for the center part of the component from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://quasar.dev"
},
{
"name": "track-color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for the track of the component from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://quasar.dev"
},
{
"name": "font-size",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Size of text in CSS units, including unit name. Suggestion: use 'em' units to sync with component size\n\nExamples:\n1em\n16px\n2rem",
"doc-url": "https://quasar.dev",
"default": "\"0.25em\""
},
{
"name": "thickness",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size\n\nExamples:\n1\n0.3",
"doc-url": "https://quasar.dev",
"default": "0.2"
},
{
"name": "angle",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Angle to rotate progress arc by\n\nExamples:\n0\n40\n90",
"doc-url": "https://quasar.dev"
},
{
"name": "show-value",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Enables the default slot and uses it (if available), otherwise it displays the 'value' prop as text; Make sure the text has enough space to be displayed inside the component",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "tabindex",
"value": {
"kind": "expression",
"type": "number|string"
},
"description": "Tabindex HTML attribute value\n\nExamples:\n0\n100",
"doc-url": "https://quasar.dev"
},
{
"name": "disable",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Put component in disabled mode",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "readonly",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Put component in readonly mode",
"doc-url": "https://quasar.dev",
"type": "boolean"
}
],
"events": [
{
"name": "input",
"arguments": [
{
"name": "value",
"type": "number",
"description": "New model value",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when the component needs to change the model; Is also used by v-model",
"doc-url": "https://quasar.dev"
},
{
"name": "change",
"arguments": [
{
"name": "value",
"type": "number",
"description": "New model value\n\nExamples:\n12",
"doc-url": "https://quasar.dev"
}
],
"description": "Fires at the end of a knob's adjustment and offers the value of the model",
"doc-url": "https://quasar.dev"
},
{
"name": "drag-value",
"arguments": [
{
"name": "value",
"type": "number",
"description": "New model value\n\nExamples:\n12",
"doc-url": "https://quasar.dev"
}
],
"description": "The value of the model while dragging is still in progress",
"doc-url": "https://quasar.dev"
}
],
"slots": [
{
"name": "default",
"description": "Default slot in the devland unslotted content of the component",
"doc-url": "https://quasar.dev"
}
],
"description": "QKnob - Quasar component",
"doc-url": "https://quasar.dev",
"vue-model": {
"prop": "value",
"event": "input"
}
},
{
"name": "QDrawer",
"source": {
"module": "quasar",
"symbol": "QDrawer"
},
"attributes": [
{
"name": "value",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Model of the component defining shown/hidden state; Either use this property (along with a listener for 'input' event) OR use v-model directive",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "side",
"value": {
"kind": "expression",
"type": "'left'|'right'"
},
"description": "Side to attach to\n\nExamples:\nright",
"doc-url": "https://quasar.dev",
"default": "\"left\""
},
{
"name": "overlay",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Puts drawer into overlay mode (does not occupies space on screen, narrowing the page)",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "width",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Width of drawer (in pixels)\n\nExamples:\n:width=\"350\"",
"doc-url": "https://quasar.dev",
"default": "300"
},
{
"name": "mini",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Puts drawer into mini mode",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "mini-width",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Width of drawer (in pixels) when in mini mode\n\nExamples:\n:width=\"100\"",
"doc-url": "https://quasar.dev",
"default": "60"
},
{
"name": "mini-to-overlay",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Mini mode will expand as an overlay",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "breakpoint",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Breakpoint (in pixels) of layout width up to which mobile mode is used\n\nExamples:\n1200\n:breakpoint=\"1400\"",
"doc-url": "https://quasar.dev",
"default": "1023"
},
{
"name": "behavior",
"value": {
"kind": "expression",
"type": "'default'|'desktop'|'mobile'"
},
"description": "Overrides the default dynamic mode into which the drawer is put on\n\nExamples:\nmobile",
"doc-url": "https://quasar.dev",
"default": "\"default\""
},
{
"name": "bordered",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Applies a default border to the component",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "elevated",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Adds a default shadow to the header",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "persistent",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Does not auto-closes when app's route changes",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "show-if-above",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Force drawer to be shown on screen on initial render if the layout width is above breakpoint, regardless of v-model; This is the default behavior when SSR is taken over by client on initial render",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "content-class",
"value": {
"kind": "expression",
"type": "any[]|string|object"
},
"description": "Class definitions to be attributed to the drawer\n\nExamples:\nmy-special-class\n:content-class=\"{ 'my-special-class': }\"",
"doc-url": "https://quasar.dev"
},
{
"name": "content-style",
"value": {
"kind": "expression",
"type": "any[]|string|object"
},
"description": "Style definitions to be attributed to the drawer\n\nExamples:\nbackground-color: #ff0000\n:content-style=\"{ backgroundColor: '#ff0000' }\"",
"doc-url": "https://quasar.dev"
},
{
"name": "no-swipe-open",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Disables the default behavior where drawer can be swiped into view; Useful for iOS platforms where it might interfere with Safari's 'swipe to go to previous/next page' feature",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "no-swipe-close",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Disables the default behavior where drawer can be swiped out of view (applies to drawer content only); Useful for iOS platforms where it might interfere with Safari's 'swipe to go to previous/next page' feature",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "no-swipe-backdrop",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Disable the default behavior where drawer backdrop can be swiped",
"doc-url": "https://quasar.dev",
"type": "boolean"
}
],
"events": [
{
"name": "input",
"arguments": [
{
"name": "value",
"type": "boolean",
"description": "New state (showing/hidden)",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when showing/hidden state changes; Is also used by v-model",
"doc-url": "https://quasar.dev"
},
{
"name": "show",
"arguments": [
{
"name": "evt",
"type": "object",
"description": "JS event object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted after component has triggered show()",
"doc-url": "https://quasar.dev"
},
{
"name": "before-show",
"arguments": [
{
"name": "evt",
"type": "object",
"description": "JS event object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when component triggers show() but before it finishes doing it",
"doc-url": "https://quasar.dev"
},
{
"name": "hide",
"arguments": [
{
"name": "evt",
"type": "object",
"description": "JS event object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted after component has triggered hide()",
"doc-url": "https://quasar.dev"
},
{
"name": "before-hide",
"arguments": [
{
"name": "evt",
"type": "object",
"description": "JS event object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when component triggers hide() but before it finishes doing it",
"doc-url": "https://quasar.dev"
},
{
"name": "on-layout",
"arguments": [
{
"name": "state",
"type": "boolean",
"description": "New state",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when drawer toggles between occupying space on page or not",
"doc-url": "https://quasar.dev"
},
{
"name": "click",
"arguments": [
{
"name": "evt",
"type": "object",
"description": "JS event object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when user clicks/taps on the component and drawer is NOT in mobile mode; Useful for when taking a decision to toggle mini mode",
"doc-url": "https://quasar.dev"
},
{
"name": "mouseover",
"arguments": [
{
"name": "evt",
"type": "object",
"description": "JS event object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when user moves mouse cursor over the component and drawer is NOT in mobile mode; Useful for when taking a decision to toggle mini mode",
"doc-url": "https://quasar.dev"
},
{
"name": "mouseout",
"arguments": [
{
"name": "evt",
"type": "object",
"description": "JS event object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when user moves mouse cursor out of the component and drawer is NOT in mobile mode; Useful for when taking a decision to toggle mini mode",
"doc-url": "https://quasar.dev"
},
{
"name": "mini-state",
"arguments": [
{
"name": "state",
"type": "boolean",
"description": "New state",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when drawer changes the mini-mode state (sometimes it is forced to do so)",
"doc-url": "https://quasar.dev"
}
],
"slots": [
{
"name": "default",
"description": "Default slot in the devland unslotted content of the component (overriden by 'mini' slot if used and drawer is in mini mode)",
"doc-url": "https://quasar.dev"
},
{
"name": "mini",
"description": "Content to show when in mini mode (overrides 'default' slot)",
"doc-url": "https://quasar.dev"
}
],
"description": "QDrawer - Quasar component",
"doc-url": "https://quasar.dev",
"vue-model": {
"prop": "value",
"event": "input"
}
},
{
"name": "QFooter",
"source": {
"module": "quasar",
"symbol": "QFooter"
},
"attributes": [
{
"name": "value",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Model of the component defining if it is shown or hidden to the user; Either use this property (along with a listener for 'input' event) OR use v-model directive\n\nExamples:\nv-model=\"footerState\"",
"doc-url": "https://quasar.dev",
"default": "true",
"type": "boolean"
},
{
"name": "reveal",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Enable 'reveal' mode; Takes into account user scroll to temporarily show/hide footer",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "bordered",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Applies a default border to the component",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "elevated",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Adds a default shadow to the footer",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "height-hint",
"value": {
"kind": "expression",
"type": "number|String "
},
"description": "When using SSR, you can optionally hint of the height (in pixels) of the QFooter\n\nExamples:\n150",
"doc-url": "https://quasar.dev",
"default": "50"
}
],
"events": [
{
"name": "reveal",
"arguments": [
{
"name": "value",
"type": "boolean",
"description": "New 'reveal' state",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when 'reveal' state gets changed",
"doc-url": "https://quasar.dev"
}
],
"slots": [
{
"name": "default",
"description": "Default slot in the devland unslotted content of the component; Suggestion: QToolbar",
"doc-url": "https://quasar.dev"
}
],
"description": "QFooter - Quasar component",
"doc-url": "https://quasar.dev",
"vue-model": {
"prop": "value",
"event": "input"
}
},
{
"name": "QHeader",
"source": {
"module": "quasar",
"symbol": "QHeader"
},
"attributes": [
{
"name": "value",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Model of the component defining if it is shown or hidden to the user; Either use this property (along with a listener for 'input' event) OR use v-model directive\n\nExamples:\nv-model=\"headerState\"",
"doc-url": "https://quasar.dev",
"default": "true",
"type": "boolean"
},
{
"name": "reveal",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Enable 'reveal' mode; Takes into account user scroll to temporarily show/hide header",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "reveal-offset",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Amount of scroll (in pixels) that should trigger a 'reveal' state change\n\nExamples:\n:reveal-offset=\"500\"",
"doc-url": "https://quasar.dev",
"default": "250"
},
{
"name": "bordered",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Applies a default border to the component",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "elevated",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Adds a default shadow to the header",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "height-hint",
"value": {
"kind": "expression",
"type": "number|String "
},
"description": "When using SSR, you can optionally hint of the height (in pixels) of the QHeader\n\nExamples:\n150",
"doc-url": "https://quasar.dev",
"default": "50"
}
],
"events": [
{
"name": "reveal",
"arguments": [
{
"name": "value",
"type": "boolean",
"description": "New 'reveal' state",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when 'reveal' state gets changed",
"doc-url": "https://quasar.dev"
}
],
"slots": [
{
"name": "default",
"description": "Default slot in the devland unslotted content of the component; Suggestion: QToolbar",
"doc-url": "https://quasar.dev"
}
],
"description": "QHeader - Quasar component",
"doc-url": "https://quasar.dev",
"vue-model": {
"prop": "value",
"event": "input"
}
},
{
"name": "QLayout",
"source": {
"module": "quasar",
"symbol": "QLayout"
},
"attributes": [
{
"name": "view",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Defines how your layout components (header/footer/drawer) should be placed on screen; See docs examples\n\nExamples:\nhHh lpR fFf",
"doc-url": "https://quasar.dev",
"default": "\"hhh lpr fff\""
},
{
"name": "container",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Containerize the layout which means it changes the default behavior of expanding to the whole window; Useful (but not limited to) for when using on a QDialog",
"doc-url": "https://quasar.dev",
"type": "boolean"
}
],
"events": [
{
"name": "resize",
"arguments": [
{
"name": "size",
"type": "object",
"description": "New size",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when layout size (height, width) changes",
"doc-url": "https://quasar.dev"
},
{
"name": "scroll",
"arguments": [
{
"name": "details",
"type": "object",
"description": "Scroll details",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when user scrolls within layout",
"doc-url": "https://quasar.dev"
},
{
"name": "scroll-height",
"arguments": [
{
"name": "height",
"type": "number",
"description": "New scroll height of layout\n\nExamples:\n1442",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when the scroll size of layout changes",
"doc-url": "https://quasar.dev"
}
],
"slots": [
{
"name": "default",
"description": "Suggestion: QHeader, QFooter, QDrawer, QPageContainer",
"doc-url": "https://quasar.dev"
}
],
"description": "QLayout - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QPage",
"source": {
"module": "quasar",
"symbol": "QPage"
},
"attributes": [
{
"name": "padding",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Applies a default responsive page padding",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "style-fn",
"value": {
"kind": "expression",
"type": "Function"
},
"description": "Override default CSS style applied to the component (sets minHeight); Function(offset: Number) => CSS props/value: Object\n\nExamples:\n(see source code)",
"doc-url": "https://quasar.dev",
"default": "\"(see source code)\""
}
],
"slots": [
{
"name": "default",
"description": "Default slot in the devland unslotted content of the component",
"doc-url": "https://quasar.dev"
}
],
"description": "QPage - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QPageContainer",
"source": {
"module": "quasar",
"symbol": "QPageContainer"
},
"slots": [
{
"name": "default",
"description": "Encapsulates a QPage (either directly or through )",
"doc-url": "https://quasar.dev"
}
],
"description": "QPageContainer - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QPageSticky",
"source": {
"module": "quasar",
"symbol": "QPageSticky"
},
"attributes": [
{
"name": "position",
"value": {
"kind": "expression",
"type": "'top-right'|'top-left'|'bottom-right'|'bottom-left'|'top'|'right'|'bottom'|'left'"
},
"description": "Page side/corner to stick to\n\nExamples:\ntop-right",
"doc-url": "https://quasar.dev",
"default": "\"bottom-right\""
},
{
"name": "offset",
"value": {
"kind": "expression",
"type": "any[]"
},
"description": "An array of two numbers to offset the component horizontally and vertically in pixels\n\nExamples:\n[8, 8]\n[5, 10]",
"doc-url": "https://quasar.dev"
},
{
"name": "expand",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "By default the component shrinks to content's size; By using this prop you make the component fully expand horizontally or vertically, based on 'position' prop",
"doc-url": "https://quasar.dev",
"type": "boolean"
}
],
"slots": [
{
"name": "default",
"description": "Default slot in the devland unslotted content of the component",
"doc-url": "https://quasar.dev"
}
],
"description": "QPageSticky - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QLinearProgress",
"source": {
"module": "quasar",
"symbol": "QLinearProgress"
},
"attributes": [
{
"name": "size",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)\n\nExamples:\n16px\n2rem\nxs\nmd",
"doc-url": "https://quasar.dev"
},
{
"name": "value",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Progress value (0.0 < x < 1.0)\n\nExamples:\n:value=\"0.28\"",
"doc-url": "https://quasar.dev"
},
{
"name": "buffer",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Optional buffer value (0.0 < x < 1.0)\n\nExamples:\n:buffer=\"0.78\"",
"doc-url": "https://quasar.dev"
},
{
"name": "color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for component from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://quasar.dev"
},
{
"name": "track-color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for component's track from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://quasar.dev"
},
{
"name": "dark",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Notify the component that the background is a dark color",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "reverse",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Reverse direction of progress",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "stripe",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Draw stripes; For determinate state only (for performance reasons)",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "indeterminate",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Put component into indeterminate mode",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "query",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Put component into query mode",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "rounded",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Applies a small standard border-radius for a squared shape of the component",
"doc-url": "https://quasar.dev",
"type": "boolean"
}
],
"slots": [
{
"name": "default",
"description": "Suggestion: QTooltip",
"doc-url": "https://quasar.dev"
}
],
"description": "QLinearProgress - Quasar component",
"doc-url": "https://quasar.dev",
"vue-model": {
"prop": "value",
"event": "input"
}
},
{
"name": "QExpansionItem",
"source": {
"module": "quasar",
"symbol": "QExpansionItem"
},
"attributes": [
{
"name": "to",
"value": {
"kind": "expression",
"type": "string|object"
},
"description": "Equivalent to Vue Router 'to' property\n\nExamples:\n/home/dashboard\n:to=\"{ name: 'my-route-name' }\"",
"doc-url": "https://quasar.dev"
},
{
"name": "exact",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Equivalent to Vue Router 'exact' property",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "append",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Equivalent to Vue Router 'append' property",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "replace",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Equivalent to Vue Router 'replace' property",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "active-class",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Equivalent to Vue Router 'active-class' property\n\nExamples:\nmy-active-class",
"doc-url": "https://quasar.dev"
},
{
"name": "exact-active-class",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Equivalent to Vue Router 'active-class' property\n\nExamples:\nmy-exact-active-class",
"doc-url": "https://quasar.dev"
},
{
"name": "disable",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Put component in disabled mode",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "value",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Model of the component defining 'open' state; Either use this property (along with a listener for 'input' event) OR use v-model directive",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "icon",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Icon name following Quasar convention; make sure you have the icon library installed unless you are using 'img:' prefix\n\nExamples:\nmap\nion-add\nimg:https://cdn.quasar.dev/logo/svg/quasar-logo.svg\nimg:statics/path/to/some_image.png",
"doc-url": "https://quasar.dev"
},
{
"name": "expand-icon",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Icon name following Quasar convention; make sure you have the icon library installed unless you are using 'img:' prefix\n\nExamples:\nmap\nion-add\nimg:https://cdn.quasar.dev/logo/svg/quasar-logo.svg\nimg:statics/path/to/some_image.png",
"doc-url": "https://quasar.dev"
},
{
"name": "expand-icon-class",
"value": {
"kind": "expression",
"type": "any[]|string|object"
},
"description": "Apply custom class(es) to the expand icon item section\n\nExamples:\ntext-purple",
"doc-url": "https://quasar.dev"
},
{
"name": "label",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Header label (unless using 'header' slot)\n\nExamples:\nMy expansion item",
"doc-url": "https://quasar.dev"
},
{
"name": "label-lines",
"value": {
"kind": "expression",
"type": "number|string"
},
"description": "Apply ellipsis when there's not enough space to render on the specified number of lines; If more than one line specified, then it will only work on webkit browsers because it uses the '-webkit-line-clamp' CSS property!\n\nExamples:\n1\n3\n:label-lines=\"2\"",
"doc-url": "https://quasar.dev"
},
{
"name": "caption",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Header sub-label (unless using 'header' slot)\n\nExamples:\nUnread message: 5",
"doc-url": "https://quasar.dev"
},
{
"name": "caption-lines",
"value": {
"kind": "expression",
"type": "number|string"
},
"description": "Apply ellipsis when there's not enough space to render on the specified number of lines; If more than one line specified, then it will only work on webkit browsers because it uses the '-webkit-line-clamp' CSS property!\n\nExamples:\n1\n3\n:caption-lines=\"2\"",
"doc-url": "https://quasar.dev"
},
{
"name": "dark",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Notify the component that the background is a dark color",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "dense",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Dense mode; occupies less space",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "duration",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Animation duration (in milliseconds)\n\nExamples:\n:duration=\"1000\"",
"doc-url": "https://quasar.dev",
"default": "300"
},
{
"name": "header-inset-level",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Apply an inset to header (unless using 'header' slot); Useful when header avatar/left side is missing but you want to align content with other items that do have a left side, or when you're building a menu\n\nExamples:\n:header-inset-level=\"1\"",
"doc-url": "https://quasar.dev"
},
{
"name": "content-inset-level",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Apply an inset to content (changes content padding)\n\nExamples:\n:content-inset-level=\"1\"",
"doc-url": "https://quasar.dev"
},
{
"name": "expand-separator",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Apply a top and bottom separator when expansion item is opened",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "default-opened",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Puts expansion item into open state on initial render; Overriden by v-model if used",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "expand-icon-toggle",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Applies the expansion events to the expand icon only and not to the whole header",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "switch-toggle-side",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Switch expand icon side (from default 'right' to 'left')",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "dense-toggle",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Use dense mode for expand icon",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "group",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Register expansion item into a group (unique name that must be applied to all expansion items in that group) for coordinated open/close state within the group a.k.a. 'accordion mode'\n\nExamples:\nmy-emails",
"doc-url": "https://quasar.dev"
},
{
"name": "popup",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Put expansion list into 'popup' mode",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "header-style",
"value": {
"kind": "expression",
"type": "any[]|string|object"
},
"description": "Apply custom style to the header\n\nExamples:\nbackground: '#ff0000'\n:header-style=\"{ backgroundColor: '#ff0000' }\"",
"doc-url": "https://quasar.dev"
},
{
"name": "header-class",
"value": {
"kind": "expression",
"type": "any[]|string|object"
},
"description": "Apply custom class(es) to the header\n\nExamples:\nmy-custom-class\n:header-class=\"{ 'my-custom-class': someCondition }\"",
"doc-url": "https://quasar.dev"
}
],
"events": [
{
"name": "input",
"arguments": [
{
"name": "value",
"type": "boolean",
"description": "New state (showing/hidden)",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when showing/hidden state changes; Is also used by v-model",
"doc-url": "https://quasar.dev"
},
{
"name": "show",
"arguments": [
{
"name": "evt",
"type": "object",
"description": "JS event object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted after component has triggered show()",
"doc-url": "https://quasar.dev"
},
{
"name": "before-show",
"arguments": [
{
"name": "evt",
"type": "object",
"description": "JS event object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when component triggers show() but before it finishes doing it",
"doc-url": "https://quasar.dev"
},
{
"name": "hide",
"arguments": [
{
"name": "evt",
"type": "object",
"description": "JS event object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted after component has triggered hide()",
"doc-url": "https://quasar.dev"
},
{
"name": "before-hide",
"arguments": [
{
"name": "evt",
"type": "object",
"description": "JS event object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when component triggers hide() but before it finishes doing it",
"doc-url": "https://quasar.dev"
}
],
"slots": [
{
"name": "default",
"description": "Slot used for expansion item's content",
"doc-url": "https://quasar.dev"
},
{
"name": "header",
"description": "Slot used for overriding default header",
"doc-url": "https://quasar.dev"
}
],
"description": "QExpansionItem - Quasar component",
"doc-url": "https://quasar.dev",
"vue-model": {
"prop": "value",
"event": "input"
}
},
{
"name": "QItem",
"source": {
"module": "quasar",
"symbol": "QItem"
},
"attributes": [
{
"name": "to",
"value": {
"kind": "expression",
"type": "string|object"
},
"description": "Equivalent to Vue Router 'to' property\n\nExamples:\n/home/dashboard\n:to=\"{ name: 'my-route-name' }\"",
"doc-url": "https://quasar.dev"
},
{
"name": "exact",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Equivalent to Vue Router 'exact' property",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "append",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Equivalent to Vue Router 'append' property",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "replace",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Equivalent to Vue Router 'replace' property",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "active-class",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Equivalent to Vue Router 'active-class' property\n\nExamples:\nmy-active-class",
"doc-url": "https://quasar.dev"
},
{
"name": "exact-active-class",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Equivalent to Vue Router 'active-class' property\n\nExamples:\nmy-exact-active-class",
"doc-url": "https://quasar.dev"
},
{
"name": "disable",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Put component in disabled mode",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "active",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Put item into 'active' state",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "dark",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Notify the component that the background is a dark color",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "clickable",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Is QItem clickable? If it's the case, then it will add hover effects and emit 'click' events",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "dense",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Dense mode; occupies less space",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "inset-level",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Apply an inset; Useful when avatar/left side is missing but you want to align content with other items that do have a left side, or when you're building a menu\n\nExamples:\n:inset-level=\"1\"",
"doc-url": "https://quasar.dev"
},
{
"name": "tabindex",
"value": {
"kind": "expression",
"type": "number|string"
},
"description": "Tabindex HTML attribute value\n\nExamples:\n0\n100",
"doc-url": "https://quasar.dev"
},
{
"name": "tag",
"value": {
"kind": "expression",
"type": "string"
},
"description": "HTML tag to render; Suggestion: use 'label' when encapsulating a QCheckbox/QRadio/QToggle so that when user clicks/taps on the whole item it will trigger a model change for the mentioned components\n\nExamples:\na\nlabel",
"doc-url": "https://quasar.dev",
"default": "\"div\""
},
{
"name": "manual-focus",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Put item into a manual focus state; Enables 'focused' prop which will determine if item is focused or not, rather than relying on native hover/focus states",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "focused",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Determines focus state, ONLY if 'manual-focus' is enabled / set to true",
"doc-url": "https://quasar.dev",
"type": "boolean"
}
],
"slots": [
{
"name": "default",
"description": "This is where QItem's content goes",
"doc-url": "https://quasar.dev"
}
],
"description": "QItem - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QItemLabel",
"source": {
"module": "quasar",
"symbol": "QItemLabel"
},
"attributes": [
{
"name": "overline",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Renders an overline label",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "caption",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Renders a caption label",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "header",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Renders a header label",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "lines",
"value": {
"kind": "expression",
"type": "number|string"
},
"description": "Apply ellipsis when there's not enough space to render on the specified number of lines; If more than one line specified, then it will only work on webkit browsers because it uses the '-webkit-line-clamp' CSS property!\n\nExamples:\n1\n3\n:lines=\"2\"",
"doc-url": "https://quasar.dev"
}
],
"slots": [
{
"name": "default",
"description": "The content of the label; Suggestion: text",
"doc-url": "https://quasar.dev"
}
],
"description": "QItemLabel - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QItemSection",
"source": {
"module": "quasar",
"symbol": "QItemSection"
},
"attributes": [
{
"name": "avatar",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Render an avatar item side (does not needs 'side' prop to be set)",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "thumbnail",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Render a thumbnail item side (does not needs 'side' prop to be set)",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "side",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Renders as a side of the item",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "top",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Align content to top (useful for multi-line items)",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "no-wrap",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Do not wrap text (useful for item's main content)",
"doc-url": "https://quasar.dev",
"type": "boolean"
}
],
"slots": [
{
"name": "default",
"description": "Section's actual content",
"doc-url": "https://quasar.dev"
}
],
"description": "QItemSection - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QList",
"source": {
"module": "quasar",
"symbol": "QList"
},
"attributes": [
{
"name": "bordered",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Applies a default border to the component",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "dense",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Dense mode; occupies less space",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "separator",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Applies a separator between contained items",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "dark",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Notify the component that the background is a dark color",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "padding",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Applies a material design-like padding on top and bottom",
"doc-url": "https://quasar.dev",
"type": "boolean"
}
],
"slots": [
{
"name": "default",
"description": "This is where the content goes; Suggestion: QItem, QExpansionItem, ...",
"doc-url": "https://quasar.dev"
}
],
"description": "QList - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QSlideItem",
"source": {
"module": "quasar",
"symbol": "QSlideItem"
},
"attributes": [
{
"name": "left-color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for left-side background from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://quasar.dev"
},
{
"name": "right-color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for right-side background from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://quasar.dev"
},
{
"name": "top-color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for top-side background from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://quasar.dev"
},
{
"name": "bottom-color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for bottom-side background from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://quasar.dev"
}
],
"events": [
{
"name": "left",
"arguments": [
{
"name": "details",
"type": "object",
"description": "Details",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when user finished sliding the item to the left",
"doc-url": "https://quasar.dev"
},
{
"name": "right",
"arguments": [
{
"name": "details",
"type": "object",
"description": "Details",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when user finished sliding the item to the right",
"doc-url": "https://quasar.dev"
},
{
"name": "top",
"arguments": [
{
"name": "details",
"type": "object",
"description": "Details",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when user finished sliding the item up",
"doc-url": "https://quasar.dev"
},
{
"name": "bottom",
"arguments": [
{
"name": "details",
"type": "object",
"description": "Details",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when user finished sliding the item down",
"doc-url": "https://quasar.dev"
},
{
"name": "action",
"arguments": [
{
"name": "details",
"type": "object",
"description": "Details",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when user finished sliding the item to either sides",
"doc-url": "https://quasar.dev"
}
],
"slots": [
{
"name": "default",
"description": "This is where item's sections go; Suggestion: QItemSection",
"doc-url": "https://quasar.dev"
},
{
"name": "left",
"description": "Left side content when sliding",
"doc-url": "https://quasar.dev"
},
{
"name": "right",
"description": "Right side content when sliding",
"doc-url": "https://quasar.dev"
},
{
"name": "top",
"description": "Top side content when sliding",
"doc-url": "https://quasar.dev"
},
{
"name": "bottom",
"description": "Bottom side content when sliding",
"doc-url": "https://quasar.dev"
}
],
"description": "QSlideItem - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QMenu",
"source": {
"module": "quasar",
"symbol": "QMenu"
},
"attributes": [
{
"name": "target",
"value": {
"kind": "expression",
"type": "boolean|string"
},
"description": "Configure a target element to trigger component toggle; 'true' means it enables the parent DOM element, 'false' means it disables attaching events to any DOM elements; By using a String (CSS selector) it attaches the events to the specified DOM element (if it exists)\n\nExamples:\n:target=\"false\"\ntarget=\".my-parent\"",
"doc-url": "https://quasar.dev",
"default": "true"
},
{
"name": "no-parent-event",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Skips attaching events to the target DOM element (that trigger the element to get shown)",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "context-menu",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Allows the component to behave like a context menu, which opens with a right mouse click (or long tap on mobile)",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "content-class",
"value": {
"kind": "expression",
"type": "any[]|string|object"
},
"description": "Class definitions to be attributed to the content\n\nExamples:\nmy-special-class\n:content-class=\"{ 'my-special-class': }\"",
"doc-url": "https://quasar.dev"
},
{
"name": "content-style",
"value": {
"kind": "expression",
"type": "any[]|string|object"
},
"description": "Style definitions to be attributed to the content\n\nExamples:\nbackground-color: #ff0000\n:content-style=\"{ color: '#ff0000' }\"",
"doc-url": "https://quasar.dev"
},
{
"name": "value",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Model of the component defining shown/hidden state; Either use this property (along with a listener for 'input' event) OR use v-model directive",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "fit",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Allows the menu to match at least the full width of its target",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "cover",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Allows the menu to cover its target. When used, the 'self' and 'fit' props are no longer effective",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "anchor",
"value": {
"kind": "expression",
"type": "'top left'|'top middle'|'top right'|'center left'|'center middle'|'center right'|'bottom left'|'bottom middle'|'bottom right'"
},
"description": "Two values setting the starting position or anchor point of the menu relative to its target\n\nExamples:\ntop left\nbottom right",
"doc-url": "https://quasar.dev"
},
{
"name": "self",
"value": {
"kind": "expression",
"type": "'top left'|'top middle'|'top right'|'center left'|'center middle'|'center right'|'bottom left'|'bottom middle'|'bottom right'"
},
"description": "Two values setting the menu's own position relative to its target\n\nExamples:\ntop left\nbottom right",
"doc-url": "https://quasar.dev"
},
{
"name": "offset",
"value": {
"kind": "expression",
"type": "any[]"
},
"description": "An array of two numbers to offset the menu horizontally and vertically in pixels\n\nExamples:\n[8, 8]\n[5, 10]",
"doc-url": "https://quasar.dev"
},
{
"name": "touch-position",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Allows for the target position to be set by the mouse position, when the target of the menu is either clicked or touched",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "persistent",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "auto-close",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Allows any click/tap in the menu to close it; Useful instead of attaching events to each menu item that should close the menu on click/tap",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "separate-close-popup",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Separate from parent menu, marking it as a separate closing point for v-close-popup (without this, chained menus close all together)",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "square",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Forces content to have squared borders",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "no-refocus",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "(Accessibility) When Menu gets hidden, do not refocus on the DOM element that previously had focus",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "no-focus",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "(Accessibility) When Menu gets shown, do not switch focus on it",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "max-height",
"value": {
"kind": "expression",
"type": "string"
},
"description": "The maximimum height of the menu; Size in CSS units, including unit name\n\nExamples:\n16px\n2rem",
"doc-url": "https://quasar.dev"
},
{
"name": "max-width",
"value": {
"kind": "expression",
"type": "string"
},
"description": "The maximimum width of the menu; Size in CSS units, including unit name\n\nExamples:\n16px\n2rem",
"doc-url": "https://quasar.dev"
},
{
"name": "transition-show",
"value": {
"kind": "expression",
"type": "string"
},
"description": "One of Quasar's embedded transitions\n\nExamples:\nfade\nslide-down",
"doc-url": "https://quasar.dev",
"default": "\"fade\""
},
{
"name": "transition-hide",
"value": {
"kind": "expression",
"type": "string"
},
"description": "One of Quasar's embedded transitions\n\nExamples:\nfade\nslide-down",
"doc-url": "https://quasar.dev",
"default": "\"fade\""
}
],
"events": [
{
"name": "input",
"arguments": [
{
"name": "value",
"type": "boolean",
"description": "New state (showing/hidden)",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when showing/hidden state changes; Is also used by v-model",
"doc-url": "https://quasar.dev"
},
{
"name": "show",
"arguments": [
{
"name": "evt",
"type": "object",
"description": "JS event object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted after component has triggered show()",
"doc-url": "https://quasar.dev"
},
{
"name": "before-show",
"arguments": [
{
"name": "evt",
"type": "object",
"description": "JS event object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when component triggers show() but before it finishes doing it",
"doc-url": "https://quasar.dev"
},
{
"name": "hide",
"arguments": [
{
"name": "evt",
"type": "object",
"description": "JS event object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted after component has triggered hide()",
"doc-url": "https://quasar.dev"
},
{
"name": "before-hide",
"arguments": [
{
"name": "evt",
"type": "object",
"description": "JS event object",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when component triggers hide() but before it finishes doing it",
"doc-url": "https://quasar.dev"
},
{
"name": "escape-key",
"description": "Emitted when ESC key is pressed; Does not gets emitted if Menu is 'persistent'",
"doc-url": "https://quasar.dev"
}
],
"slots": [
{
"name": "default",
"description": "Default slot in the devland unslotted content of the component",
"doc-url": "https://quasar.dev"
}
],
"description": "QMenu - Quasar component",
"doc-url": "https://quasar.dev",
"vue-model": {
"prop": "value",
"event": "input"
}
},
{
"name": "QNoSsr",
"source": {
"module": "quasar",
"symbol": "QNoSsr"
},
"attributes": [
{
"name": "tag",
"value": {
"kind": "expression",
"type": "string"
},
"description": "HTML tag to render\n\nExamples:\nspan\nblockquote",
"doc-url": "https://quasar.dev",
"default": "\"div\""
},
{
"name": "placeholder",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Text to display on server-side render (unless using 'placeholder' slot)\n\nExamples:\nThis is server-side only",
"doc-url": "https://quasar.dev"
}
],
"slots": [
{
"name": "default",
"description": "Default slot is used to render content on client-side",
"doc-url": "https://quasar.dev"
},
{
"name": "placeholder",
"description": "Slot used as placeholder on server-side render, which gets replaced by the default slot on client-side; overrides 'placeholder' prop",
"doc-url": "https://quasar.dev"
}
],
"description": "QNoSsr - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QResizeObserver",
"source": {
"module": "quasar",
"symbol": "QResizeObserver"
},
"attributes": [
{
"name": "debounce",
"value": {
"kind": "expression",
"type": "string|number"
},
"description": "Debounce amount (in milliseconds)\n\nExamples:\n0\n530",
"doc-url": "https://quasar.dev",
"default": "100"
}
],
"events": [
{
"name": "resize",
"arguments": [
{
"name": "size",
"type": "object",
"description": "New size",
"doc-url": "https://quasar.dev"
}
],
"description": "Parent element has resized (width or height changed)",
"doc-url": "https://quasar.dev"
}
],
"slots": [],
"description": "QResizeObserver - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QScrollObserver",
"source": {
"module": "quasar",
"symbol": "QScrollObserver"
},
"attributes": [
{
"name": "debounce",
"value": {
"kind": "expression",
"type": "string|number"
},
"description": "Debounce amount (in milliseconds)\n\nExamples:\n0\n530",
"doc-url": "https://quasar.dev"
},
{
"name": "horizontal",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Register for horizontal scroll instead of vertical (which is default)",
"doc-url": "https://quasar.dev",
"type": "boolean"
}
],
"events": [
{
"name": "scroll",
"arguments": [
{
"name": "details",
"type": "object",
"description": "Scroll details",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when scroll position changes",
"doc-url": "https://quasar.dev"
}
],
"slots": [],
"description": "QScrollObserver - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QOptionGroup",
"source": {
"module": "quasar",
"symbol": "QOptionGroup"
},
"attributes": [
{
"name": "value",
"value": {
"kind": "expression",
"type": "any"
},
"description": "Model of the component; Either use this property (along with a listener for 'input' event) OR use v-model directive\n\nExamples:\nv-model=\"group\"",
"doc-url": "https://quasar.dev"
},
{
"name": "options",
"value": {
"kind": "expression",
"type": "any[]"
},
"description": "Array of objects with value and label props. The binary components will be created according to this array\n\nExamples:\n:options=\"[ { label: 'Option 1', value: 'op1' }, { label: 'Option 2', value: 'op2' }, { label: 'Option 3', value: 'op3' } ]\"",
"doc-url": "https://quasar.dev"
},
{
"name": "type",
"value": {
"kind": "expression",
"type": "'radio'|'checkbox'|'toggle'"
},
"description": "The type of input component to be used\n\nExamples:\ncheckbox",
"doc-url": "https://quasar.dev",
"default": "\"radio\""
},
{
"name": "color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for component from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://quasar.dev"
},
{
"name": "keep-color",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Should the color (if specified any) be kept when input components are unticked?",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "dark",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Notify the component that the background is a dark color",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "dense",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Dense mode; occupies less space",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "left-label",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Label (if any specified) should be displayed on the left side of the input components",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "inline",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Show input components as inline-block rather than each having their own row",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "disable",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Put component in disabled mode",
"doc-url": "https://quasar.dev",
"type": "boolean"
}
],
"events": [
{
"name": "input",
"arguments": [
{
"name": "value",
"type": "any",
"description": "New model value",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when the component needs to change the model; Is also used by v-model",
"doc-url": "https://quasar.dev"
}
],
"slots": [],
"description": "QOptionGroup - Quasar component",
"doc-url": "https://quasar.dev",
"vue-model": {
"prop": "value",
"event": "input"
}
},
{
"name": "QPageScroller",
"source": {
"module": "quasar",
"symbol": "QPageScroller"
},
"attributes": [
{
"name": "position",
"value": {
"kind": "expression",
"type": "'top-right'|'top-left'|'bottom-right'|'bottom-left'|'top'|'right'|'bottom'|'left'"
},
"description": "Page side/corner to stick to\n\nExamples:\ntop-right",
"doc-url": "https://quasar.dev",
"default": "\"bottom-right\""
},
{
"name": "offset",
"value": {
"kind": "expression",
"type": "any[]"
},
"description": "An array of two numbers to offset the component horizontally and vertically in pixels\n\nExamples:\n[8, 8]\n[5, 10]",
"doc-url": "https://quasar.dev",
"default": "[18,18]"
},
{
"name": "expand",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "By default the component shrinks to content's size; By using this prop you make the component fully expand horizontally or vertically, based on 'position' prop",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "scroll-offset",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Scroll offset (in pixels) from which point the component is shown on page\n\nExamples:\n550",
"doc-url": "https://quasar.dev",
"default": "1000"
},
{
"name": "duration",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Duration (in milliseconds) of the scrolling until it reaches its target\n\nExamples:\n500",
"doc-url": "https://quasar.dev",
"default": "300"
}
],
"slots": [
{
"name": "default",
"description": "Default slot in the devland unslotted content of the component",
"doc-url": "https://quasar.dev"
}
],
"description": "QPageScroller - Quasar component",
"doc-url": "https://quasar.dev"
},
{
"name": "QPagination",
"source": {
"module": "quasar",
"symbol": "QPagination"
},
"attributes": [
{
"name": "value",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Current page (must be between min/max)\n\nExamples:\n3",
"doc-url": "https://quasar.dev",
"required": true
},
{
"name": "min",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Minimum page (must be lower than 'max')\n\nExamples:\n3",
"doc-url": "https://quasar.dev",
"default": "1"
},
{
"name": "max",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Number of last page (must be higher than 'min')\n\nExamples:\n10",
"doc-url": "https://quasar.dev",
"required": true,
"default": "100"
},
{
"name": "color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for component from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://quasar.dev",
"default": "\"primary\""
},
{
"name": "text-color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Overrides text color (if needed); color name from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://quasar.dev"
},
{
"name": "input-style",
"value": {
"kind": "expression",
"type": "any[]|string|object"
},
"description": "Style definitions to be attributed to the input (if using one)\n\nExamples:\nbackground-color: #ff0000\n:input-style=\"{ backgroundColor: '#ff0000' }\"",
"doc-url": "https://quasar.dev"
},
{
"name": "input-class",
"value": {
"kind": "expression",
"type": "any[]|string|object"
},
"description": "Class definitions to be attributed to the input (if using one)\n\nExamples:\nmy-special-class\n:input-class=\"{ 'my-special-class': }\"",
"doc-url": "https://quasar.dev"
},
{
"name": "size",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Button size in CSS units, including unit name\n\nExamples:\n20px",
"doc-url": "https://quasar.dev"
},
{
"name": "disable",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Put component in disabled mode",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "input",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Use an input instead of buttons",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "boundary-links",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Show boundary button links",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "boundary-numbers",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Always show first and last page buttons (if not using 'input')",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "direction-links",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Show direction buttons",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "ellipses",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Show ellipses (...) when pages are available",
"doc-url": "https://quasar.dev",
"type": "boolean"
},
{
"name": "max-pages",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Maximum number of page links to display at a time; 0 means Infinite\n\nExamples:\n5",
"doc-url": "https://quasar.dev"
}
],
"events": [
{
"name": "input",
"arguments": [
{
"name": "value",
"type": "string",
"description": "New model value",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when the component needs to change the model; Is also used by v-model",
"doc-url": "https://quasar.dev"
}
],
"slots": [],
"description": "QPagination - Quasar component",
"doc-url": "https://quasar.dev",
"vue-model": {
"prop": "value",
"event": "input"
}
},
{
"name": "QParallax",
"source": {
"module": "quasar",
"symbol": "QParallax"
},
"attributes": [
{
"name": "src",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Path to image (unless a 'media' slot is used)\n\nExamples:\n(statics folder) statics/img/something.png\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) https://some-site.net/some-img.jpg",
"doc-url": "https://quasar.dev"
},
{
"name": "height",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Height of component (in pixels)\n\nExamples:\n:height=\"1000\"",
"doc-url": "https://quasar.dev",
"default": "500"
},
{
"name": "speed",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Speed of parallax effect (0.0 < x < 1.0)\n\nExamples:\n:speed=\"0.24\"",
"doc-url": "https://quasar.dev"
}
],
"events": [
{
"name": "scroll",
"arguments": [
{
"name": "percentage",
"type": "number",
"description": "Number between 0.0 and 1.0 defining the scrolled percentage of the component\n\nExamples:\n0.234",
"doc-url": "https://quasar.dev"
}
],
"description": "Emitted when scrolling occurs",
"doc-url": "https://quasar.dev"
}
],
"slots": [
{
"name": "default",
"description": "Default slot can be used for content that gets displayed on top of the component",
"doc-url": "https://quasar.dev"
},
{
"name": "media",
"description": "Slot for describing ![]()
or