quasar
Version:
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
1,312 lines • 232 kB
JSON
{
"q-ajax-bar/position": {
"type": "string",
"description": "Position within window of where QAjaxBar should be displayed"
},
"q-ajax-bar/size": {
"type": "string",
"description": "Size in CSS units, including unit name"
},
"q-ajax-bar/color": {
"type": "string",
"description": "Color name for component from the Quasar Color Palette"
},
"q-ajax-bar/reverse": {
"type": "boolean",
"description": "Reverse direction of progress"
},
"q-ajax-bar/skip-hijack": {
"type": "boolean",
"description": "Skip Ajax hijacking (not a reactive prop)"
},
"q-ajax-bar/hijack-filter": {
"type": "function",
"description": "Filter which URL should trigger start() + stop()"
},
"q-avatar/size": {
"type": "string",
"description": "Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)"
},
"q-avatar/font-size": {
"type": "string",
"description": "The size in CSS units, including unit name, of the content (icon, text)"
},
"q-avatar/color": {
"type": "string",
"description": "Color name for component from the Quasar Color Palette"
},
"q-avatar/text-color": {
"type": "string",
"description": "Overrides text color (if needed); Color name from the Quasar Color Palette"
},
"q-avatar/icon": {
"type": "string",
"description": "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)"
},
"q-avatar/square": {
"type": "boolean",
"description": "Removes border-radius so borders are squared"
},
"q-avatar/rounded": {
"type": "boolean",
"description": "Applies a small standard border-radius for a squared shape of the component"
},
"q-badge/color": {
"type": "string",
"description": "Color name for component from the Quasar Color Palette"
},
"q-badge/text-color": {
"type": "string",
"description": "Overrides text color (if needed); Color name from the Quasar Color Palette"
},
"q-badge/floating": {
"type": "boolean",
"description": "Tell QBadge if it should float to the top right side of the relative positioned parent element or not"
},
"q-badge/transparent": {
"type": "boolean",
"description": "Applies a 0.8 opacity; Useful especially for floating QBadge"
},
"q-badge/multi-line": {
"type": "boolean",
"description": "Content can wrap to multiple lines"
},
"q-badge/label": {
"type": "string|number",
"description": "Badge's content as string; overrides default slot if specified"
},
"q-badge/align": {
"type": "string",
"description": "Sets vertical-align CSS prop"
},
"q-badge/outline": {
"type": "boolean",
"description": "Use 'outline' design (colored text and borders only)"
},
"q-badge/rounded": {
"type": "boolean",
"description": "Makes a rounded shaped badge"
},
"q-banner/inline-actions": {
"type": "boolean",
"description": "Display actions on same row as content"
},
"q-banner/dense": {
"type": "boolean",
"description": "Dense mode; occupies less space"
},
"q-banner/rounded": {
"type": "boolean",
"description": "Applies a small standard border-radius for a squared shape of the component"
},
"q-banner/dark": {
"type": "boolean",
"description": "Notify the component that the background is a dark color"
},
"q-bar/dense": {
"type": "boolean",
"description": "Dense mode; occupies less space"
},
"q-bar/dark": {
"type": "boolean",
"description": "The component background color lights up the parent's background (as opposed to default behavior which is to darken it); Works unless you specify a CSS background color for it"
},
"q-breadcrumbs/separator": {
"type": "string",
"description": "The string used to separate the breadcrumbs"
},
"q-breadcrumbs/active-color": {
"type": "string",
"description": "The color of the active breadcrumb, which can be any color from the Quasar Color Palette"
},
"q-breadcrumbs/gutter": {
"type": "string",
"description": "The gutter value allows you control over the space between the breadcrumb elements."
},
"q-breadcrumbs/separator-color": {
"type": "string",
"description": "The color used to color the separator, which can be any color from the Quasar Color Palette"
},
"q-breadcrumbs/align": {
"type": "string",
"description": "Specify how to align the breadcrumbs horizontally"
},
"q-breadcrumbs-el/to": {
"type": "string|object",
"description": "Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used"
},
"q-breadcrumbs-el/exact": {
"type": "boolean",
"description": "Equivalent to Vue Router <router-link> 'exact' property; Superseded by 'href' prop if used"
},
"q-breadcrumbs-el/replace": {
"type": "boolean",
"description": "Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used"
},
"q-breadcrumbs-el/active-class": {
"type": "string",
"description": "Equivalent to Vue Router <router-link> 'active-class' property; Superseded by 'href' prop if used"
},
"q-breadcrumbs-el/exact-active-class": {
"type": "string",
"description": "Equivalent to Vue Router <router-link> 'active-class' property; Superseded by 'href' prop if used"
},
"q-breadcrumbs-el/href": {
"type": "string",
"description": "Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props"
},
"q-breadcrumbs-el/target": {
"type": "string",
"description": "Native <a> link target attribute; Use it only along with 'href' prop; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props"
},
"q-breadcrumbs-el/disable": {
"type": "boolean",
"description": "Put component in disabled mode"
},
"q-breadcrumbs-el/label": {
"type": "string",
"description": "The label text for the breadcrumb"
},
"q-breadcrumbs-el/icon": {
"type": "string",
"description": "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)"
},
"q-breadcrumbs-el/tag": {
"type": "string",
"description": "HTML tag to use"
},
"q-btn/size": {
"type": "string",
"description": "Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)"
},
"q-btn/type": {
"type": "string",
"description": "1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag"
},
"q-btn/to": {
"type": "string|object",
"description": "Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used"
},
"q-btn/replace": {
"type": "boolean",
"description": "Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used"
},
"q-btn/href": {
"type": "string",
"description": "Native <a> link href attribute; Has priority over the 'to' and 'replace' props"
},
"q-btn/target": {
"type": "string",
"description": "Native <a> link target attribute; Use it only with 'to' or 'href' props"
},
"q-btn/label": {
"type": "string|number",
"description": "The text that will be shown on the button"
},
"q-btn/icon": {
"type": "string",
"description": "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)"
},
"q-btn/icon-right": {
"type": "string",
"description": "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)"
},
"q-btn/outline": {
"type": "boolean",
"description": "Use 'outline' design"
},
"q-btn/flat": {
"type": "boolean",
"description": "Use 'flat' design"
},
"q-btn/unelevated": {
"type": "boolean",
"description": "Remove shadow"
},
"q-btn/rounded": {
"type": "boolean",
"description": "Applies a more prominent border-radius for a squared shape button"
},
"q-btn/push": {
"type": "boolean",
"description": "Use 'push' design"
},
"q-btn/square": {
"type": "boolean",
"description": "Removes border-radius so borders are squared"
},
"q-btn/glossy": {
"type": "boolean",
"description": "Applies a glossy effect"
},
"q-btn/fab": {
"type": "boolean",
"description": "Makes button size and shape to fit a Floating Action Button"
},
"q-btn/fab-mini": {
"type": "boolean",
"description": "Makes button size and shape to fit a small Floating Action Button"
},
"q-btn/padding": {
"type": "string",
"description": "Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set"
},
"q-btn/color": {
"type": "string",
"description": "Color name for component from the Quasar Color Palette"
},
"q-btn/text-color": {
"type": "string",
"description": "Overrides text color (if needed); Color name from the Quasar Color Palette"
},
"q-btn/no-caps": {
"type": "boolean",
"description": "Avoid turning label text into caps (which happens by default)"
},
"q-btn/no-wrap": {
"type": "boolean",
"description": "Avoid label text wrapping"
},
"q-btn/dense": {
"type": "boolean",
"description": "Dense mode; occupies less space"
},
"q-btn/ripple": {
"type": "boolean|object",
"description": "Configure material ripple (disable it by setting it to 'false' or supply a config object)"
},
"q-btn/tabindex": {
"type": "number|string",
"description": "Tabindex HTML attribute value"
},
"q-btn/align": {
"type": "string",
"description": "Label or content alignment"
},
"q-btn/stack": {
"type": "boolean",
"description": "Stack icon and label vertically instead of on same line (like it is by default)"
},
"q-btn/stretch": {
"type": "boolean",
"description": "When used on flexbox parent, button will stretch to parent's height"
},
"q-btn/loading": {
"type": "boolean",
"description": "Put button into loading state (displays a QSpinner -- can be overridden by using a 'loading' slot)"
},
"q-btn/disable": {
"type": "boolean",
"description": "Put component in disabled mode"
},
"q-btn/round": {
"type": "boolean",
"description": "Makes a circle shaped button"
},
"q-btn/percentage": {
"type": "number",
"description": "Percentage (0.0 < x < 100.0); To be used along 'loading' prop; Display a progress bar on the background"
},
"q-btn/dark-percentage": {
"type": "boolean",
"description": "Progress bar on the background should have dark color; To be used along with 'percentage' and 'loading' props"
},
"q-btn-dropdown/transition-show": {
"type": "string",
"description": "One of Quasar's embedded transitions"
},
"q-btn-dropdown/transition-hide": {
"type": "string",
"description": "One of Quasar's embedded transitions"
},
"q-btn-dropdown/transition-duration": {
"type": "string|number",
"description": "Transition duration (in milliseconds, without unit)"
},
"q-btn-dropdown/model-value": {
"type": "boolean",
"description": "Controls Menu show/hidden state; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive"
},
"q-btn-dropdown/size": {
"type": "string",
"description": "Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)"
},
"q-btn-dropdown/type": {
"type": "string",
"description": "1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag"
},
"q-btn-dropdown/to": {
"type": "string|object",
"description": "Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used"
},
"q-btn-dropdown/replace": {
"type": "boolean",
"description": "Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used"
},
"q-btn-dropdown/href": {
"type": "string",
"description": "Native <a> link href attribute; Has priority over the 'to' and 'replace' props"
},
"q-btn-dropdown/target": {
"type": "string",
"description": "Native <a> link target attribute; Use it only with 'to' or 'href' props"
},
"q-btn-dropdown/label": {
"type": "string|number",
"description": "The text that will be shown on the button"
},
"q-btn-dropdown/icon": {
"type": "string",
"description": "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)"
},
"q-btn-dropdown/icon-right": {
"type": "string",
"description": "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)"
},
"q-btn-dropdown/outline": {
"type": "boolean",
"description": "Use 'outline' design"
},
"q-btn-dropdown/flat": {
"type": "boolean",
"description": "Use 'flat' design"
},
"q-btn-dropdown/unelevated": {
"type": "boolean",
"description": "Remove shadow"
},
"q-btn-dropdown/rounded": {
"type": "boolean",
"description": "Applies a more prominent border-radius for a squared shape button"
},
"q-btn-dropdown/push": {
"type": "boolean",
"description": "Use 'push' design"
},
"q-btn-dropdown/square": {
"type": "boolean",
"description": "Removes border-radius so borders are squared"
},
"q-btn-dropdown/glossy": {
"type": "boolean",
"description": "Applies a glossy effect"
},
"q-btn-dropdown/fab": {
"type": "boolean",
"description": "Makes button size and shape to fit a Floating Action Button"
},
"q-btn-dropdown/fab-mini": {
"type": "boolean",
"description": "Makes button size and shape to fit a small Floating Action Button"
},
"q-btn-dropdown/padding": {
"type": "string",
"description": "Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set"
},
"q-btn-dropdown/color": {
"type": "string",
"description": "Color name for component from the Quasar Color Palette"
},
"q-btn-dropdown/text-color": {
"type": "string",
"description": "Overrides text color (if needed); Color name from the Quasar Color Palette"
},
"q-btn-dropdown/no-caps": {
"type": "boolean",
"description": "Avoid turning label text into caps (which happens by default)"
},
"q-btn-dropdown/no-wrap": {
"type": "boolean",
"description": "Avoid label text wrapping"
},
"q-btn-dropdown/dense": {
"type": "boolean",
"description": "Dense mode; occupies less space"
},
"q-btn-dropdown/ripple": {
"type": "boolean|object",
"description": "Configure material ripple (disable it by setting it to 'false' or supply a config object)"
},
"q-btn-dropdown/tabindex": {
"type": "number|string",
"description": "Tabindex HTML attribute value"
},
"q-btn-dropdown/align": {
"type": "string",
"description": "Label or content alignment"
},
"q-btn-dropdown/stack": {
"type": "boolean",
"description": "Stack icon and label vertically instead of on same line (like it is by default)"
},
"q-btn-dropdown/stretch": {
"type": "boolean",
"description": "When used on flexbox parent, button will stretch to parent's height"
},
"q-btn-dropdown/loading": {
"type": "boolean",
"description": "Put button into loading state (displays a QSpinner -- can be overridden by using a 'loading' slot)"
},
"q-btn-dropdown/disable": {
"type": "boolean",
"description": "Put component in disabled mode"
},
"q-btn-dropdown/split": {
"type": "boolean",
"description": "Split dropdown icon into its own button"
},
"q-btn-dropdown/dropdown-icon": {
"type": "string",
"description": "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)"
},
"q-btn-dropdown/disable-main-btn": {
"type": "boolean",
"description": "Disable main button (useful along with 'split' prop)"
},
"q-btn-dropdown/disable-dropdown": {
"type": "boolean",
"description": "Disables dropdown (dropdown button if using along 'split' prop)"
},
"q-btn-dropdown/no-icon-animation": {
"type": "boolean",
"description": "Disables the rotation of the dropdown icon when state is toggled"
},
"q-btn-dropdown/content-style": {
"type": "string|array|object",
"description": "Style definitions to be attributed to the menu"
},
"q-btn-dropdown/content-class": {
"type": "string|array|object",
"description": "Class definitions to be attributed to the menu"
},
"q-btn-dropdown/cover": {
"type": "boolean",
"description": "Allows the menu to cover the button. When used, the 'menu-self' and 'menu-fit' props are no longer effective"
},
"q-btn-dropdown/persistent": {
"type": "boolean",
"description": "Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key"
},
"q-btn-dropdown/no-route-dismiss": {
"type": "boolean",
"description": "Changing route app won't dismiss the popup; No need to set it if 'persistent' prop is also set"
},
"q-btn-dropdown/auto-close": {
"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"
},
"q-btn-dropdown/menu-anchor": {
"type": "string",
"description": "Two values setting the starting position or anchor point of the menu relative to its target"
},
"q-btn-dropdown/menu-self": {
"type": "string",
"description": "Two values setting the menu's own position relative to its target"
},
"q-btn-dropdown/menu-offset": {
"type": "array",
"description": "An array of two numbers to offset the menu horizontally and vertically in pixels"
},
"q-btn-dropdown/toggle-aria-label": {
"type": "string",
"description": "aria-label to be used on the dropdown toggle element"
},
"q-btn-group/spread": {
"type": "boolean",
"description": "Spread horizontally to all available space"
},
"q-btn-group/outline": {
"type": "boolean",
"description": "Use 'outline' design for buttons"
},
"q-btn-group/flat": {
"type": "boolean",
"description": "Use 'flat' design for buttons"
},
"q-btn-group/unelevated": {
"type": "boolean",
"description": "Remove shadow on buttons"
},
"q-btn-group/rounded": {
"type": "boolean",
"description": "Applies a more prominent border-radius for squared shape buttons"
},
"q-btn-group/square": {
"type": "boolean",
"description": "Removes border-radius so borders are squared"
},
"q-btn-group/push": {
"type": "boolean",
"description": "Use 'push' design for buttons"
},
"q-btn-group/stretch": {
"type": "boolean",
"description": "When used on flexbox parent, buttons will stretch to parent's height"
},
"q-btn-group/glossy": {
"type": "boolean",
"description": "Applies a glossy effect"
},
"q-btn-toggle/name": {
"type": "string",
"description": "Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL"
},
"q-btn-toggle/model-value": {
"type": "any",
"description": "Model of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive"
},
"q-btn-toggle/options": {
"type": "array",
"description": "Array of Objects defining each option"
},
"q-btn-toggle/color": {
"type": "string",
"description": "Color name for component from the Quasar Color Palette"
},
"q-btn-toggle/text-color": {
"type": "string",
"description": "Overrides text color (if needed); Color name from the Quasar Color Palette"
},
"q-btn-toggle/toggle-color": {
"type": "string",
"description": "Color name for component from the Quasar Color Palette"
},
"q-btn-toggle/toggle-text-color": {
"type": "string",
"description": "Overrides text color (if needed); Color name from the Quasar Color Palette"
},
"q-btn-toggle/spread": {
"type": "boolean",
"description": "Spread horizontally to all available space"
},
"q-btn-toggle/outline": {
"type": "boolean",
"description": "Use 'outline' design"
},
"q-btn-toggle/flat": {
"type": "boolean",
"description": "Use 'flat' design"
},
"q-btn-toggle/unelevated": {
"type": "boolean",
"description": "Remove shadow"
},
"q-btn-toggle/rounded": {
"type": "boolean",
"description": "Applies a more prominent border-radius for a squared shape button"
},
"q-btn-toggle/push": {
"type": "boolean",
"description": "Use 'push' design"
},
"q-btn-toggle/glossy": {
"type": "boolean",
"description": "Applies a glossy effect"
},
"q-btn-toggle/size": {
"type": "string",
"description": "Button size name or a CSS unit including unit name"
},
"q-btn-toggle/padding": {
"type": "string",
"description": "Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set"
},
"q-btn-toggle/no-caps": {
"type": "boolean",
"description": "Avoid turning label text into caps (which happens by default)"
},
"q-btn-toggle/no-wrap": {
"type": "boolean",
"description": "Avoid label text wrapping"
},
"q-btn-toggle/ripple": {
"type": "boolean|object",
"description": "Configure material ripple (disable it by setting it to 'false' or supply a config object)"
},
"q-btn-toggle/dense": {
"type": "boolean",
"description": "Dense mode; occupies less space"
},
"q-btn-toggle/readonly": {
"type": "boolean",
"description": "Put component in readonly mode"
},
"q-btn-toggle/disable": {
"type": "boolean",
"description": "Put component in disabled mode"
},
"q-btn-toggle/stack": {
"type": "boolean",
"description": "Stack icon and label vertically instead of on same line (like it is by default)"
},
"q-btn-toggle/stretch": {
"type": "boolean",
"description": "When used on flexbox parent, button will stretch to parent's height"
},
"q-btn-toggle/clearable": {
"type": "boolean",
"description": "Clears model on click of the already selected button"
},
"q-card/dark": {
"type": "boolean",
"description": "Notify the component that the background is a dark color"
},
"q-card/square": {
"type": "boolean",
"description": "Removes border-radius so borders are squared"
},
"q-card/flat": {
"type": "boolean",
"description": "Applies a 'flat' design (no default shadow)"
},
"q-card/bordered": {
"type": "boolean",
"description": "Applies a default border to the component"
},
"q-card/tag": {
"type": "string",
"description": "HTML tag to use"
},
"q-card-actions/align": {
"type": "string",
"description": "Specify how to align the actions"
},
"q-card-actions/vertical": {
"type": "boolean",
"description": "Display actions one below the other"
},
"q-card-section/horizontal": {
"type": "boolean",
"description": "Display a horizontal section (will have no padding and can contain other QCardSection)"
},
"q-card-section/tag": {
"type": "string",
"description": "HTML tag to use"
},
"q-carousel/fullscreen": {
"type": "boolean",
"description": "Fullscreen mode"
},
"q-carousel/no-route-fullscreen-exit": {
"type": "boolean",
"description": "Changing route app won't exit fullscreen"
},
"q-carousel/model-value": {
"type": "any",
"description": "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."
},
"q-carousel/keep-alive": {
"type": "boolean",
"description": "Equivalent to using Vue's native <keep-alive> component on the content"
},
"q-carousel/keep-alive-include": {
"type": "string|array|regexp",
"description": "Equivalent to using Vue's native include prop for <keep-alive>; Values must be valid Vue component names"
},
"q-carousel/keep-alive-exclude": {
"type": "string|array|regexp",
"description": "Equivalent to using Vue's native exclude prop for <keep-alive>; Values must be valid Vue component names"
},
"q-carousel/keep-alive-max": {
"type": "number",
"description": "Equivalent to using Vue's native max prop for <keep-alive>"
},
"q-carousel/animated": {
"type": "boolean",
"description": "Enable transitions between panel (also see 'transition-prev' and 'transition-next' props)"
},
"q-carousel/infinite": {
"type": "boolean",
"description": "Makes component appear as infinite (when reaching last panel, next one will become the first one)"
},
"q-carousel/swipeable": {
"type": "boolean",
"description": "Enable swipe events (may interfere with content's touch/mouse events)"
},
"q-carousel/vertical": {
"type": "boolean",
"description": "Default transitions and swipe actions will be on the vertical axis"
},
"q-carousel/transition-prev": {
"type": "string",
"description": "One of Quasar's embedded transitions (has effect only if 'animated' prop is set)"
},
"q-carousel/transition-next": {
"type": "string",
"description": "One of Quasar's embedded transitions (has effect only if 'animated' prop is set)"
},
"q-carousel/transition-duration": {
"type": "string|number",
"description": "Transition duration (in milliseconds, without unit)"
},
"q-carousel/dark": {
"type": "boolean",
"description": "Notify the component that the background is a dark color"
},
"q-carousel/height": {
"type": "string",
"description": "Height of Carousel in CSS units, including unit name"
},
"q-carousel/padding": {
"type": "boolean",
"description": "Applies a default padding to each slide, according to the usage of 'arrows' and 'navigation' props"
},
"q-carousel/control-color": {
"type": "string",
"description": "Color name for QCarousel button controls (arrows, navigation) from the Quasar Color Palette"
},
"q-carousel/control-text-color": {
"type": "string",
"description": "Color name for text color of QCarousel button controls (arrows, navigation) from the Quasar Color Palette"
},
"q-carousel/control-type": {
"type": "string",
"description": "Type of button to use for controls (arrows, navigation)"
},
"q-carousel/autoplay": {
"type": "number|boolean",
"description": "Jump to next slide (if 'true' or val > 0) or previous slide (if val < 0) at fixed time intervals (in milliseconds); 'false' disables autoplay, 'true' enables it for 5000ms intervals"
},
"q-carousel/arrows": {
"type": "boolean",
"description": "Show navigation arrow buttons"
},
"q-carousel/prev-icon": {
"type": "string",
"description": "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)"
},
"q-carousel/next-icon": {
"type": "string",
"description": "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)"
},
"q-carousel/navigation": {
"type": "boolean",
"description": "Show navigation dots"
},
"q-carousel/navigation-position": {
"type": "string",
"description": "Side to stick navigation to"
},
"q-carousel/navigation-icon": {
"type": "string",
"description": "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)"
},
"q-carousel/navigation-active-icon": {
"type": "string",
"description": "Icon name following Quasar convention for the active (current slide) navigation icon; Make sure you have the icon library installed unless you are using 'img:' prefix"
},
"q-carousel/thumbnails": {
"type": "boolean",
"description": "Show thumbnails"
},
"q-carousel-control/position": {
"type": "string",
"description": "Side/corner to stick to"
},
"q-carousel-control/offset": {
"type": "array",
"description": "An array of two numbers to offset the component horizontally and vertically (in pixels)"
},
"q-carousel-slide/name": {
"type": "any",
"description": "Slide name"
},
"q-carousel-slide/disable": {
"type": "boolean",
"description": "Put component in disabled mode"
},
"q-carousel-slide/img-src": {
"type": "string",
"description": "URL pointing to a slide background image (use public folder)"
},
"q-chat-message/sent": {
"type": "boolean",
"description": "Render as a sent message (so from current user)"
},
"q-chat-message/label": {
"type": "string",
"description": "Renders a label header/section only"
},
"q-chat-message/bg-color": {
"type": "string",
"description": "Color name (from the Quasar Color Palette) for chat bubble background"
},
"q-chat-message/text-color": {
"type": "string",
"description": "Color name (from the Quasar Color Palette) for chat bubble text"
},
"q-chat-message/name": {
"type": "string",
"description": "Author's name"
},
"q-chat-message/avatar": {
"type": "string",
"description": "URL to the avatar image of the author"
},
"q-chat-message/text": {
"type": "array",
"description": "Array of strings that are the message body. Strings are not sanitized (see details in docs)"
},
"q-chat-message/stamp": {
"type": "string",
"description": "Creation timestamp"
},
"q-chat-message/size": {
"type": "string",
"description": "1-12 out of 12 (same as col-*)"
},
"q-chat-message/label-html": {
"type": "boolean",
"description": "Render the label as HTML; This can lead to XSS attacks so make sure that you sanitize the message first"
},
"q-chat-message/name-html": {
"type": "boolean",
"description": "Render the name as HTML; This can lead to XSS attacks so make sure that you sanitize the message first"
},
"q-chat-message/text-html": {
"type": "boolean",
"description": "Render the text as HTML; This can lead to XSS attacks so make sure that you sanitize the message first"
},
"q-chat-message/stamp-html": {
"type": "boolean",
"description": "Render the stamp as HTML; This can lead to XSS attacks so make sure that you sanitize the message first"
},
"q-checkbox/name": {
"type": "string",
"description": "Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL"
},
"q-checkbox/size": {
"type": "string",
"description": "Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)"
},
"q-checkbox/model-value": {
"type": "any|array",
"description": "Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive"
},
"q-checkbox/val": {
"type": "any",
"description": "Works when model ('value') is Array. It tells the component which value should add/remove when ticked/unticked"
},
"q-checkbox/true-value": {
"type": "any",
"description": "What model value should be considered as checked/ticked/on?"
},
"q-checkbox/false-value": {
"type": "any",
"description": "What model value should be considered as unchecked/unticked/off?"
},
"q-checkbox/indeterminate-value": {
"type": "any",
"description": "What model value should be considered as 'indeterminate'?"
},
"q-checkbox/toggle-order": {
"type": "string",
"description": "Determines toggle order of the two states ('t' stands for state of true, 'f' for state of false); If 'toggle-indeterminate' is true, then the order is: indet -> first state -> second state -> indet (and repeat), otherwise: indet -> first state -> second state -> first state -> second state -> ..."
},
"q-checkbox/toggle-indeterminate": {
"type": "boolean",
"description": "When user clicks/taps on the component, should we toggle through the indeterminate state too?"
},
"q-checkbox/label": {
"type": "string",
"description": "Label to display along the component (or use the default slot instead of this prop)"
},
"q-checkbox/left-label": {
"type": "boolean",
"description": "Label (if any specified) should be displayed on the left side of the component"
},
"q-checkbox/checked-icon": {
"type": "string",
"description": "The icon to be used when the model is truthy (instead of the default design)"
},
"q-checkbox/unchecked-icon": {
"type": "string",
"description": "The icon to be used when the toggle is falsy (instead of the default design)"
},
"q-checkbox/indeterminate-icon": {
"type": "string",
"description": "The icon to be used when the model is indeterminate (instead of the default design)"
},
"q-checkbox/color": {
"type": "string",
"description": "Color name for component from the Quasar Color Palette"
},
"q-checkbox/keep-color": {
"type": "boolean",
"description": "Should the color (if specified any) be kept when the component is unticked/ off?"
},
"q-checkbox/dark": {
"type": "boolean",
"description": "Notify the component that the background is a dark color"
},
"q-checkbox/dense": {
"type": "boolean",
"description": "Dense mode; occupies less space"
},
"q-checkbox/disable": {
"type": "boolean",
"description": "Put component in disabled mode"
},
"q-checkbox/tabindex": {
"type": "number|string",
"description": "Tabindex HTML attribute value"
},
"q-chip/dense": {
"type": "boolean",
"description": "Dense mode; occupies less space"
},
"q-chip/size": {
"type": "string",
"description": "QChip size name or a CSS unit including unit name"
},
"q-chip/dark": {
"type": "boolean",
"description": "Notify the component that the background is a dark color"
},
"q-chip/icon": {
"type": "string",
"description": "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)"
},
"q-chip/icon-right": {
"type": "string",
"description": "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)"
},
"q-chip/icon-remove": {
"type": "string",
"description": "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)"
},
"q-chip/icon-selected": {
"type": "string",
"description": "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)"
},
"q-chip/label": {
"type": "string|number",
"description": "Chip's content as string; overrides default slot if specified"
},
"q-chip/color": {
"type": "string",
"description": "Color name for component from the Quasar Color Palette"
},
"q-chip/text-color": {
"type": "string",
"description": "Overrides text color (if needed); Color name from the Quasar Color Palette"
},
"q-chip/model-value": {
"type": "boolean",
"description": "Model of the component determining if QChip should be rendered or not"
},
"q-chip/selected": {
"type": "boolean",
"description": "Model for QChip if it's selected or not"
},
"q-chip/square": {
"type": "boolean",
"description": "Sets a low value for border-radius instead of the default one, making it close to a square"
},
"q-chip/outline": {
"type": "boolean",
"description": "Display using the 'outline' design"
},
"q-chip/clickable": {
"type": "boolean",
"description": "Is QChip clickable? If it's the case, then it will add hover effects and emit 'click' events"
},
"q-chip/removable": {
"type": "boolean",
"description": "If set, then it displays a 'remove' icon that when clicked the QChip emits 'remove' event"
},
"q-chip/ripple": {
"type": "boolean|object",
"description": "Configure material ripple (disable it by setting it to 'false' or supply a config object)"
},
"q-chip/remove-aria-label": {
"type": "string",
"description": "aria-label to be used on the remove icon"
},
"q-chip/tabindex": {
"type": "number|string",
"description": "Tabindex HTML attribute value"
},
"q-chip/disable": {
"type": "boolean",
"description": "Put component in disabled mode"
},
"q-circular-progress/size": {
"type": "string",
"description": "Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)"
},
"q-circular-progress/value": {
"type": "number",
"description": "Current progress (must be between min/max)"
},
"q-circular-progress/min": {
"type": "number",
"description": "Minimum value defining 'no progress' (must be lower than 'max')"
},
"q-circular-progress/max": {
"type": "number",
"description": "Maximum value defining 100% progress made (must be higher than 'min')"
},
"q-circular-progress/color": {
"type": "string",
"description": "Color name for the arc progress from the Quasar Color Palette"
},
"q-circular-progress/center-color": {
"type": "string",
"description": "Color name for the center part of the component from the Quasar Color Palette"
},
"q-circular-progress/track-color": {
"type": "string",
"description": "Color name for the track of the component from the Quasar Color Palette"
},
"q-circular-progress/font-size": {
"type": "string",
"description": "Size of text in CSS units, including unit name. Suggestion: use 'em' units to sync with component size"
},
"q-circular-progress/rounded": {
"type": "boolean",
"description": "Rounding the arc of progress"
},
"q-circular-progress/thickness": {
"type": "number",
"description": "Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size"
},
"q-circular-progress/angle": {
"type": "number",
"description": "Angle to rotate progress arc by"
},
"q-circular-progress/indeterminate": {
"type": "boolean",
"description": "Put component into 'indeterminate' state; Ignores 'value' prop"
},
"q-circular-progress/show-value": {
"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"
},
"q-circular-progress/reverse": {
"type": "boolean",
"description": "Reverses the direction of progress; Only for determined state"
},
"q-circular-progress/instant-feedback": {
"type": "boolean",
"description": "No animation when model changes"
},
"q-circular-progress/animation-speed": {
"type": "string|number",
"description": "Animation speed (in milliseconds, without unit)"
},
"q-color/name": {
"type": "string",
"description": "Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL"
},
"q-color/model-value": {
"type": "string|null|undefined",
"description": "Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive"
},
"q-color/default-value": {
"type": "string",
"description": "The default value to show when the model doesn't have one"
},
"q-color/default-view": {
"type": "string",
"description": "The default view of the picker"
},
"q-color/format-model": {
"type": "string",
"description": "Forces a certain model format upon the model"
},
"q-color/palette": {
"type": "array",
"description": "Use a custom palette of colors for the palette tab"
},
"q-color/square": {
"type": "boolean",
"description": "Removes border-radius so borders are squared"
},
"q-color/flat": {
"type": "boolean",
"description": "Applies a 'flat' design (no default shadow)"
},
"q-color/bordered": {
"type": "boolean",
"description": "Applies a default border to the component"
},
"q-color/no-header": {
"type": "boolean",
"description": "Do not render header"
},
"q-color/no-header-tabs": {
"type": "boolean",
"description": "Do not render header tabs (only the input)"
},
"q-color/no-footer": {
"type": "boolean",
"description": "Do not render footer; Useful when you want a specific view ('default-view' prop) and don't want the user to be able to switch it"
},
"q-color/disable": {
"type": "boolean",
"description": "Put component in disabled mode"
},
"q-color/readonly": {
"type": "boolean",
"description": "Put component in readonly mode"
},
"q-color/dark": {
"type": "boolean",
"description": "Notify the component that the background is a dark color"
},
"q-date/name": {
"type": "string",
"description": "Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL"
},
"q-date/landscape": {
"type": "boolean",
"description": "Display the component in landscape mode"
},
"q-date/mask": {
"type": "string",
"description": "Mask (formatting string) used for parsing and formatting value"
},
"q-date/locale": {
"type": "object",
"description": "Locale formatting options"
},
"q-date/calendar": {
"type": "string",
"description": "Specify calendar type"
},
"q-date/color": {
"type": "string",
"description": "Color name for component from the Quasar Color Palette"
},
"q-date/text-color": {
"type": "string",
"description": "Overrides text color (if needed); Color name from the Quasar Color Palette"
},
"q-date/dark": {
"type": "boolean",
"description": "Notify the component that the background is a dark color"
},
"q-date/square": {
"type": "boolean",
"description": "Removes border-radius so borders are squared"
},
"q-date/flat": {
"type": "boolean",
"description": "Applies a 'flat' design (no default shadow)"
},
"q-date/bordered": {
"type": "boolean",
"description": "Applies a default border to the component"
},
"q-date/readonly": {
"type": "boolean",
"description": "Put component in readonly mode"
},
"q-date/disable": {
"type": "boolean",
"description": "Put component in disabled mode"
},
"q-date/model-value": {
"type": "string|array|object|null|undefined",
"description": "Date(s) of the component; Must be Array if using 'multiple' prop; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive"
},
"q-date/title": {
"type": "string",
"description": "When specified, it overrides the default header title; Makes sense when not in 'minimal' mode"
},
"q-date/subtitle": {
"type": "string",
"description": "When specified, it overrides the default header subtitle; Makes sense when not in 'minimal' mode"
},
"q-date/default-year-month": {
"type": "string",
"description": "The default year and month to display (in YYYY/MM format) when model is unfilled (undefined or null); Please ensure it is within the navigation min/max year-month (if using them)"
},
"q-date/default-view": {
"type": "string",
"description": "The view which will be displayed by default"
},
"q-date/years-in-month-view": {
"type": "boolean",
"description": "Show the years selector in months view"
},
"q-date/events": {
"type": "array|function",
"description": "A list of events to highlight on the calendar; If using a function, it receives the date as a String and must return a Boolean (matches or not); If using a function then for best performance, reference it from your scope and do not define it inline"
},
"q-date/event-color": {
"type": "string|function",
"description": "Color name (from the Quasar Color Palette); If using a function, it receives the date as a String and must return a String (color for the received date); If using a function then for best performance, reference it from your scope and do not define it inline"
},
"q-date/options": {
"type": "array|function",
"description": "Optionally configure the days that are selectable; If using a function, it receives the date as a String and must return a Boolean (is date acceptable or not); If using a function then for best performance, reference it from your scope and do not define it inline; Incompatible with 'range' prop"
},
"q-date/navigation-min-year-month": {
"type": "string",
"description": "Lock user from navigating below a specific year+month (in YYYY/MM format); This prop is not used to correct the model; You might want to also use 'default-year-month' prop"
},
"q-date/navigation-max-year-month": {
"type": "string",
"description": "Lock user from navigating above a specific year+month (in YYYY/MM format); This prop is not used to correct the model; You might want to also use 'default-year-month' prop"
},
"q-date/no-unset": {
"type": "boolean",
"description": "Remove ability to unselect a date; It does not apply to selecting a range over already selected dates"
},
"q-date/first-day-of-week": {
"type": "string|number",
"description": "Sets the day of the week that is considered the first day (0 - Sunday, 1 - Monday, ...); This day will show in the left-most column of the calendar"
},
"q-date/today-btn": {
"type": "boolean",
"description": "Display a button that selects the current day"
},
"q-date/minimal": {
"type": "boolean",
"description": "Don’t display the header"
},
"q-date/multiple": {
"type": "boolean",
"description": "Allow multiple selection; Model must be Array"
},
"q-date/range": {
"type": "boolean",
"description": "Allow range selection; Partial compatibility with 'options' prop: selected ranges might also include 'unselectable' days"
},
"q-date/emit-immediately": {
"type": "boolean",
"description": "Emit model when user browses month and year too; ONLY for single selection (non-multiple, non-range)"
},
"q-dialog/transition-show": {
"type": "string",
"description": "One of Quasar's embedded transitions"
},
"q-dialog/transition-hide": {
"type": "string",
"description": "One of Quasar's embedded transitions"
},
"q-dialog/transition-duration": {
"type": "string|number",
"description": "Transition duration (in milliseconds, without unit)"
},
"q-dialog/model-value": {
"type": "boolean",
"description": "Model of the component defining shown/hidden state; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive"
},
"q-dialog/persistent": {
"type": "boolean",
"description": "User cannot dismiss Dialog if clicking outside of it or hitting ESC key; Also, an app route change won't dismiss it"
},
"q-dialog/no-esc-dismiss": {
"type": "boolean",
"description": "User cannot dismiss Dialog by hitting ESC key; No need to set it if 'persistent' prop is also set"
},
"q-dialog/no-backdrop-dismiss": {
"type": "boolean",
"description": "User cannot dismiss Dialog by clicking outside of it; No need to set it if 'persistent' prop is also set"
},
"q-dialog/no-route-dismiss": {
"type": "boolean",
"description": "Changing route app won't dismiss Di