UNPKG

quasar

Version:

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

1,312 lines 232 kB
{ "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