quasar
Version:
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
1,452 lines • 147 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/skip-hijack": {
"type": "boolean",
"description": "Skip Ajax hijacking (not a reactive prop)"
},
"q-ajax-bar/reverse": {
"type": "boolean",
"description": "Reverse direction of progress"
},
"q-avatar/size": {
"type": "string",
"description": "Size in CSS units, including unit name"
},
"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"
},
"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 QBagde"
},
"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-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-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"
},
"q-breadcrumbs-el/exact": {
"type": "boolean",
"description": "Equivalent to Vue Router <router-link> 'exact' property"
},
"q-breadcrumbs-el/append": {
"type": "boolean",
"description": "Equivalent to Vue Router <router-link> 'append' property"
},
"q-breadcrumbs-el/replace": {
"type": "boolean",
"description": "Equivalent to Vue Router <router-link> 'replace' property"
},
"q-breadcrumbs-el/active-class": {
"type": "string",
"description": "Equivalent to Vue Router <router-link> 'active-class' property"
},
"q-breadcrumbs-el/exact-active-class": {
"type": "string",
"description": "Equivalent to Vue Router <router-link> 'active-class' property"
},
"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"
},
"q-btn/ripple": {
"type": "boolean|object",
"description": "Configure material ripple (disable it by setting it to 'false' or supply a config object)"
},
"q-btn/type": {
"type": "string",
"description": "Define the button HTML DOM type"
},
"q-btn/to": {
"type": "string|object",
"description": "Equivalent to Vue Router <router-link> 'to' property"
},
"q-btn/replace": {
"type": "boolean",
"description": "Equivalent to Vue Router <router-link> 'replace' property"
},
"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"
},
"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"
},
"q-btn/round": {
"type": "boolean",
"description": "Makes a circle shaped button"
},
"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/glossy": {
"type": "boolean",
"description": "Applies a glossy effect"
},
"q-btn/size": {
"type": "string",
"description": "Button size name or a CSS unit including unit name"
},
"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/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/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 overriden by using a 'loading' slot)"
},
"q-btn/disable": {
"type": "boolean",
"description": "Put component in disabled mode"
},
"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/value": {
"type": "boolean",
"description": "Controls Menu show/hidden state; Either use this property (along with a listener for 'input' event) OR use v-model directive"
},
"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/type": {
"type": "string",
"description": "Define the button HTML DOM type"
},
"q-btn-dropdown/to": {
"type": "string|object",
"description": "Equivalent to Vue Router <router-link> 'to' property"
},
"q-btn-dropdown/replace": {
"type": "boolean",
"description": "Equivalent to Vue Router <router-link> 'replace' property"
},
"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"
},
"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"
},
"q-btn-dropdown/round": {
"type": "boolean",
"description": "Makes a circle shaped button"
},
"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/glossy": {
"type": "boolean",
"description": "Applies a glossy effect"
},
"q-btn-dropdown/size": {
"type": "string",
"description": "Button size name or a CSS unit including unit name"
},
"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/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/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 overriden 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/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/content-style": {
"type": "array|string|object",
"description": "Style definitions to be attributed to the menu"
},
"q-btn-dropdown/content-class": {
"type": "array|string|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/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-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/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/ripple": {
"type": "boolean|object",
"description": "Configure material ripple (disable it by setting it to 'false' or supply a config object)"
},
"q-btn-toggle/value": {
"type": "any",
"description": "Model of the component; Either use this property (along with a listener for 'input' 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/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/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-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-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-carousel/fullscreen": {
"type": "boolean",
"description": "Fullscreen mode"
},
"q-carousel/value": {
"type": "any",
"description": "Model of the component defining current panel's name; If used as Number, it does not defines panel index though but slide name's which may be an Integer; Either use this property (along with a listener for 'input' event) OR use v-model directive"
},
"q-carousel/keep-alive": {
"type": "boolean",
"description": "Equivalent to using Vue's native <keep-alive> component on the content"
},
"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/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/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 component from the Quasar Color Palette"
},
"q-carousel/autoplay": {
"type": "number|boolean",
"description": "Jump to next slide 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"
},
"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"
},
"q-carousel/navigation": {
"type": "boolean",
"description": "Show navigation dots"
},
"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"
},
"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 statics 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; Suggestion: use a static resource"
},
"q-chat-message/text": {
"type": "string",
"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-sanitize": {
"type": "boolean",
"description": "Force use of textContent instead of innerHTML to render label; Use it when the label might be unsafe (from user input)"
},
"q-chat-message/name-sanitize": {
"type": "boolean",
"description": "Force use of textContent instead of innerHTML to render name; Use it when the name might be unsafe (from user input)"
},
"q-chat-message/text-sanitize": {
"type": "boolean",
"description": "Force use of textContent instead of innerHTML to render text; Use it when the text might be unsafe (from user input)"
},
"q-chat-message/stamp-sanitize": {
"type": "boolean",
"description": "Force use of textContent instead of innerHTML to render stamp; Use it when the stamp might be unsafe (from user input)"
},
"q-checkbox/value": {
"type": "any|array",
"description": "Model of the component; Either use this property (along with a listener for 'input' 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/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/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-checkbox/indeterminate-value": {
"type": "any",
"description": "What model value should be considered as 'indeterminate'?"
},
"q-checkbox/toggle-indeterminate": {
"type": "boolean",
"description": "When user clicks/taps on the component, should we toggle through the indeterminate state too?"
},
"q-chip/ripple": {
"type": "boolean|object",
"description": "Configure material ripple (disable it by setting it to 'false' or supply a config object)"
},
"q-chip/dense": {
"type": "boolean",
"description": "Dense mode; occupies less space"
},
"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"
},
"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"
},
"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/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/tabindex": {
"type": "number|string",
"description": "Tabindex HTML attribute value"
},
"q-chip/disable": {
"type": "boolean",
"description": "Put component in disabled mode"
},
"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/size": {
"type": "string",
"description": "Size in CSS units, including unit name"
},
"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/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-color/value": {
"type": "string",
"description": "Model of the component; Either use this property (along with a listener for 'input' 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/no-header": {
"type": "boolean",
"description": "Do not render header"
},
"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/value": {
"type": "string",
"description": "Date of the component; Either use this property (along with a listener for 'input' event) OR use v-model directive"
},
"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/readonly": {
"type": "boolean",
"description": "Put component in readonly mode"
},
"q-date/disable": {
"type": "boolean",
"description": "Put component in disabled mode"
},
"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/emit-immediately": {
"type": "boolean",
"description": "Emit model when user browses month and year too"
},
"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)"
},
"q-date/default-view": {
"type": "string",
"description": "The view which will be displayed by default"
},
"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)"
},
"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)"
},
"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)"
},
"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-time/value": {
"type": "string",
"description": "Time of the component; Either use this property (along with a listener for 'input' event) OR use v-model directive"
},
"q-time/landscape": {
"type": "boolean",
"description": "Display the component in landscape mode"
},
"q-time/mask": {
"type": "string",
"description": "Mask (formatting string) used for parsing and formatting value"
},
"q-time/locale": {
"type": "object",
"description": "Locale formatting options"
},
"q-time/calendar": {
"type": "string",
"description": "Specify calendar type"
},
"q-time/color": {
"type": "string",
"description": "Color name for component from the Quasar Color Palette"
},
"q-time/text-color": {
"type": "string",
"description": "Overrides text color (if needed); color name from the Quasar Color Palette"
},
"q-time/dark": {
"type": "boolean",
"description": "Notify the component that the background is a dark color"
},
"q-time/readonly": {
"type": "boolean",
"description": "Put component in readonly mode"
},
"q-time/disable": {
"type": "boolean",
"description": "Put component in disabled mode"
},
"q-time/format24h": {
"type": "boolean",
"description": "Forces 24 hour time display instead of AM/PM system"
},
"q-time/options": {
"type": "function",
"description": "Optionally configure what time is the user allowed to set; Overriden by 'hour-options', 'minute-options' and 'second-options' if those are set"
},
"q-time/hour-options": {
"type": "array",
"description": "Optionally configure what hours is the user allowed to set; Overrides 'options' prop if that is also set"
},
"q-time/minute-options": {
"type": "array",
"description": "Optionally configure what minutes is the user allowed to set; Overrides 'options' prop if that is also set"
},
"q-time/second-options": {
"type": "array",
"description": "Optionally configure what seconds is the user allowed to set; Overrides 'options' prop if that is also set"
},
"q-time/with-seconds": {
"type": "boolean",
"description": "Allow the time to be set with seconds"
},
"q-time/now-btn": {
"type": "boolean",
"description": "Display a button that selects the current time"
},
"q-dialog/content-class": {
"type": "array|string|object",
"description": "Class definitions to be attributed to the content"
},
"q-dialog/content-style": {
"type": "array|string|object",
"description": "Style definitions to be attributed to the content"
},
"q-dialog/value": {
"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"
},
"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 Dialog; No need to set it if 'persistent' prop is also set"
},
"q-dialog/auto-close": {
"type": "boolean",
"description": "Any click/tap inside of the dialog will close it"
},
"q-dialog/seamless": {
"type": "boolean",
"description": "Put Dialog into seamless mode; Does not use a backdrop so user is able to interact with the rest of the page too"
},
"q-dialog/maximized": {
"type": "boolean",
"description": "Put Dialog into maximized mode"
},
"q-dialog/full-width": {
"type": "boolean",
"description": "Dialog will try to render with same width as the window"
},
"q-dialog/full-height": {
"type": "boolean",
"description": "Dialog will try to render with same height as the window"
},
"q-dialog/position": {
"type": "string",
"description": "Stick dialog to one of the sides (top, right, bottom or left)"
},
"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/square": {
"type": "boolean",
"description": "Forces content to have squared borders"
},
"q-dialog/no-refocus": {
"type": "boolean",
"description": "(Accessibility) When Dialog gets hidden, do not refocus on the DOM element that previously had focus"
},
"q-dialog/no-focus": {
"type": "boolean",
"description": "(Accessibility) When Dialog gets shown, do not switch focus on it"
},
"q-editor/fullscreen": {
"type": "boolean",
"description": "Fullscreen mode"
},
"q-editor/value": {
"type": "string",
"description": "Model of the component; Either use this property (along with a listener for 'input' event) OR use v-model directive"
},
"q-editor/readonly": {
"type": "boolean",
"description": "Put component in readonly mode"
},
"q-editor/square": {
"type": "boolean",
"description": "Removes border-radius so borders are squared"
},
"q-editor/flat": {
"type": "boolean",
"description": "Applies a 'flat' design (no borders)"
},
"q-editor/dense": {
"type": "boolean",
"description": "Dense mode; toolbar buttons are shown on one-line only"
},
"q-editor/disable": {
"type": "boolean",
"description": "Put component in disabled mode"
},
"q-editor/min-height": {
"type": "string",
"description": "CSS unit for the minimum height of the editable area"
},
"q-editor/max-height": {
"type": "string",
"description": "CSS unit for maximum height of the input area"
},
"q-editor/height": {
"type": "string",
"description": "CSS value to set the height of the editable area"
},
"q-editor/definitions": {
"type": "object",
"description": "Definition of commands and their buttons to be included in the 'toolbar' prop"
},
"q-editor/fonts": {
"type": "object",
"description": "Object with definitions of fonts"
},
"q-editor/toolbar": {
"type": "array",
"description": "An array of arrays of Objects/Strings that you use to define the construction of the elements and commands available in the toolbar"
},
"q-editor/toolbar-color": {
"type": "string",
"description": "Font color (from the Quasar Palette) of buttons and text in the toolbar"
},
"q-editor/toolbar-text-color": {
"type": "string",
"description": "Text color (from the Quasar Palette) of toolbar commands"
},
"q-editor/toolbar-toggle-color": {
"type": "string",
"description": "Choose the active color (from the Quasar Palette) of toolbar commands button"
},
"q-editor/toolbar-bg": {
"type": "string",
"description": "Toolbar background color (from Quasar Palette)"
},
"q-editor/toolbar-outline": {
"type": "boolean",
"description": "Toolbar buttons are rendered \"outlined\""
},
"q-editor/toolbar-push": {
"type": "boolean",
"description": "Toolbar buttons are rendered as a \"push-button\" type"
},
"q-editor/toolbar-rounded": {
"type": "boolean",
"description": "Toolbar buttons are rendered \"rounded\""
},
"q-editor/content-style": {
"type": "object",
"description": "Object with CSS properties and values for styling the container of QEditor"
},
"q-editor/content-class": {
"type": "object|array|string",
"description": "CSS classes for the input area"
},
"q-fab/value": {
"type": "boolean",
"description": "Controls state of fab actions (showing/hidden); Works best with v-model directive, otherwise use along listening to 'input' event"
},
"q-fab/icon": {
"type": "string",
"description": "Icon name following Quasar convention; make sure you have the icon library installed unless you are using 'img:' prefix"
},
"q-fab/active-icon": {
"type": "string",
"description": "Icon name following Quasar convention; make sure you have the icon library installed unless you are using 'img:' prefix"
},
"q-fab/disable": {
"type": "boolean",
"description": "Put component in disabled mode"
},
"q-fab/direction": {
"type": "string",
"description": "Direction to expand Fab Actions to"
},
"q-fab/persistent": {
"type": "boolean",
"description": "By default, Fab Actions are hidden when user navigates to another route and this prop disables this behavior"
},
"q-fab/type": {
"type": "string",
"description": "Define the button HTML DOM type"
},
"q-fab/outline": {
"type": "boolean",
"description": "Use 'outline' design for Fab button"
},
"q-fab/push": {
"type": "boolean",
"description": "Use 'push' design for Fab button"
},
"q-fab/flat": {
"type": "boolean",
"description": "Use 'flat' design for Fab button"
},
"q-fab/color": {
"type": "string",
"description": "Color name for component from the Quasar Color Palette"
},
"q-fab/text-color": {
"type": "string",
"description": "Overrides text color (if needed); color name from the Quasar Color Palette"
},
"q-fab/glossy": {
"type": "boolean",
"description": "Apply the glossy effect over the button"
},
"q-fab-action/disable": {
"type": "boolean",
"description": "Put component in disabled mode"
},
"q-fab-action/icon": {
"type": "string",
"description": "Icon name following Quasar convention; make sure you have the icon library installed unless you are using 'img:' prefix"
},
"q-fab-action/type": {
"type": "string",
"description": "Define the button HTML DOM type"
},
"q-fab-action/outline": {
"type": "boolean",
"description": "Use 'outline' design for Fab button"
},
"q-fab-action/push": {
"type": "boolean",
"description": "Use 'push' design for Fab button"
},
"q-fab-action/flat": {
"type": "boolean",
"description": "Use 'flat' design for Fab button"
},
"q-fab-action/color": {
"type": "string",
"description": "Color name for component from the Quasar Color Palette"
},
"q-fab-action/text-color": {
"type": "string",
"description": "Overrides text color (if needed); color name from the Quasar Color Palette"
},
"q-fab-action/glossy": {
"type": "boolean",
"description": "Apply the glossy effect over the button"
},
"q-fab-action/to": {
"type": "string|object",
"description": "Equivalent to Vue Router <router-link> 'to' property"
},
"q-fab-action/replace": {
"type": "boolean",
"description": "Equivalent to Vue Router <router-link> 'replace' property"
},
"q-field/error": {
"type": "boolean",
"description": "Does field have validation errors?"
},
"q-field/error-message": {
"type": "string",
"description": "Validation error message (gets displayed only if 'error' is set to 'true')"
},
"q-field/no-error-icon": {
"type": "boolean",
"description": "Hide error icon when there is an error"
},
"q-field/rules": {
"type": "array",
"description": "Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules"
},
"q-field/lazy-rules": {
"type": "boolean",
"description": "Check validation status against the 'rules' only after field loses focus for first time"
},
"q-field/label": {
"type": "string",
"description": "A text label that will “float” up above the input field, once the field gets focus"
},
"q-field/stack-label": {
"type": "boolean",
"description": "Label will be always shown above the field regardless of field content (if any)"
},
"q-field/hint": {
"type": "string",
"description": "Helper (hint) text which gets placed below your wrapped form component"
},
"q-field/hide-hint": {
"type": "boolean",
"description": "Hide the helper (hint) text when field doesn't have focus"
},
"q-field/prefix": {
"type": "string",
"description": "Prefix"
},
"q-field/suffix": {
"type": "string",
"description": "Suffix"
},
"q-field/color": {
"type": "string",
"description": "Color name for component from the Quasar Color Palette"
},
"q-field/bg-color": {
"type": "string",
"description": "Color name for component from the Quasar Color Palette"
},
"q-field/dark": {
"type": "boolean",
"description": "Notify the component that the background is a dark color"
},
"q-field/loading": {
"type": "boolean",
"description": "Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the 'loading' slot."
},
"q-field/clearable": {
"type": "boolean",
"description": "Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null"
},
"q-field/clear-icon": {
"type": "string",
"description": "Custom icon to use for the clear button when using along with 'clearable' prop"
},
"q-field/filled": {
"type": "boolean",
"description": "Use 'filled' design for the field"
},
"q-field/outlined": {
"type": "boolean",
"description": "Use 'outlined' design for the field"
},
"q-field/borderless": {
"type": "boolean",
"description": "Use 'borderless' design for the field"
},
"q-field/standout": {
"type": "boolean|string",
"description": "Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones)"
},
"q-field/bottom-slots": {
"type": "boolean",
"description": "Enables bottom slots ('error', 'hint', 'counter')"
},
"q-field/hide-bottom-space": {
"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"
},
"q-field/counter": {
"type": "boolean",
"description": "Show an automatic counter on bottom right"
},
"q-field/rounded": {
"type": "boolean",
"description": "Applies a small standard border-radius for a squared shape of the component"
},
"q-field/square": {
"type": "boolean",
"description": "Remove border-radius so borders are squared; Overrides 'rounded' prop"
},
"q-field/dense": {
"type": "boolean",
"description": "Dense mode; occupies less space"
},
"q-field/items-aligned": {
"type": "boolean",
"description": "Align content to match QItem"
},
"q-field/disable": {
"type": "boolean",
"description": "Put component in disabled mode"
},
"q-field/readonly": {
"type": "boolean",
"descri