quasar
Version:
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
1,216 lines • 815 kB
JSON
{
"$schema": "",
"framework": "vue",
"name": "quasar",
"version": "2.11.9",
"contributions": {
"html": {
"types-syntax": "typescript",
"tags": [
{
"name": "QAjaxBar",
"source": {
"module": "quasar",
"symbol": "QAjaxBar"
},
"attributes": [
{
"name": "position",
"value": {
"kind": "expression",
"type": "'top'|'right'|'bottom'|'left'"
},
"description": "Position within window of where QAjaxBar should be displayed",
"doc-url": "https://v2.quasar.dev/vue-components/ajax-bar",
"default": "\"top\""
},
{
"name": "size",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Size in CSS units, including unit name\n\nExamples:\n16px\n2rem",
"doc-url": "https://v2.quasar.dev/vue-components/ajax-bar",
"default": "\"2px\""
},
{
"name": "color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for component from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://v2.quasar.dev/vue-components/ajax-bar"
},
{
"name": "reverse",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Reverse direction of progress",
"doc-url": "https://v2.quasar.dev/vue-components/ajax-bar",
"type": "boolean"
},
{
"name": "skip-hijack",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Skip Ajax hijacking (not a reactive prop)",
"doc-url": "https://v2.quasar.dev/vue-components/ajax-bar",
"type": "boolean"
},
{
"name": "hijack-filter",
"value": {
"kind": "expression",
"type": "Function"
},
"description": "Filter which URL should trigger start() + stop()",
"doc-url": "https://v2.quasar.dev/vue-components/ajax-bar"
}
],
"events": [
{
"name": "start",
"description": "Emitted when bar is triggered to appear",
"doc-url": "https://v2.quasar.dev/vue-components/ajax-bar"
},
{
"name": "stop",
"description": "Emitted when bar has finished its job",
"doc-url": "https://v2.quasar.dev/vue-components/ajax-bar"
}
],
"slots": [],
"description": "QAjaxBar - Quasar component",
"doc-url": "https://v2.quasar.dev/vue-components/ajax-bar"
},
{
"name": "QAvatar",
"source": {
"module": "quasar",
"symbol": "QAvatar"
},
"attributes": [
{
"name": "size",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)\n\nExamples:\n16px\n2rem\nxs\nmd",
"doc-url": "https://v2.quasar.dev/vue-components/avatar"
},
{
"name": "font-size",
"value": {
"kind": "expression",
"type": "string"
},
"description": "The size in CSS units, including unit name, of the content (icon, text)\n\nExamples:\n18px\n2rem",
"doc-url": "https://v2.quasar.dev/vue-components/avatar"
},
{
"name": "color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for component from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://v2.quasar.dev/vue-components/avatar"
},
{
"name": "text-color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Overrides text color (if needed); Color name from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://v2.quasar.dev/vue-components/avatar"
},
{
"name": "icon",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)\n\nExamples:\nmap\nion-add\nimg:https://cdn.quasar.dev/logo-v2/svg/logo.svg\nimg:path/to/some_image.png",
"doc-url": "https://v2.quasar.dev/vue-components/avatar"
},
{
"name": "square",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Removes border-radius so borders are squared",
"doc-url": "https://v2.quasar.dev/vue-components/avatar",
"type": "boolean"
},
{
"name": "rounded",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Applies a small standard border-radius for a squared shape of the component",
"doc-url": "https://v2.quasar.dev/vue-components/avatar",
"type": "boolean"
}
],
"slots": [
{
"name": "default",
"description": "Optional; Suggestions: one character string, <img> tag",
"doc-url": "https://v2.quasar.dev/vue-components/avatar"
}
],
"description": "QAvatar - Quasar component",
"doc-url": "https://v2.quasar.dev/vue-components/avatar"
},
{
"name": "QBadge",
"source": {
"module": "quasar",
"symbol": "QBadge"
},
"attributes": [
{
"name": "color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for component from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://v2.quasar.dev/vue-components/badge"
},
{
"name": "text-color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Overrides text color (if needed); Color name from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://v2.quasar.dev/vue-components/badge"
},
{
"name": "floating",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Tell QBadge if it should float to the top right side of the relative positioned parent element or not",
"doc-url": "https://v2.quasar.dev/vue-components/badge",
"type": "boolean"
},
{
"name": "transparent",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Applies a 0.8 opacity; Useful especially for floating QBadge",
"doc-url": "https://v2.quasar.dev/vue-components/badge",
"type": "boolean"
},
{
"name": "multi-line",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Content can wrap to multiple lines",
"doc-url": "https://v2.quasar.dev/vue-components/badge",
"type": "boolean"
},
{
"name": "label",
"value": {
"kind": "expression",
"type": "string|number"
},
"description": "Badge's content as string; overrides default slot if specified\n\nExamples:\nJohn Doe\n22",
"doc-url": "https://v2.quasar.dev/vue-components/badge"
},
{
"name": "align",
"value": {
"kind": "expression",
"type": "'top'|'middle'|'bottom'"
},
"description": "Sets vertical-align CSS prop",
"doc-url": "https://v2.quasar.dev/vue-components/badge"
},
{
"name": "outline",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Use 'outline' design (colored text and borders only)",
"doc-url": "https://v2.quasar.dev/vue-components/badge",
"type": "boolean"
},
{
"name": "rounded",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Makes a rounded shaped badge",
"doc-url": "https://v2.quasar.dev/vue-components/badge",
"type": "boolean"
}
],
"slots": [
{
"name": "default",
"description": "This is where QBadge content goes, if not using 'label' property",
"doc-url": "https://v2.quasar.dev/vue-components/badge"
}
],
"description": "QBadge - Quasar component",
"doc-url": "https://v2.quasar.dev/vue-components/badge"
},
{
"name": "QBanner",
"source": {
"module": "quasar",
"symbol": "QBanner"
},
"attributes": [
{
"name": "inline-actions",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Display actions on same row as content",
"doc-url": "https://v2.quasar.dev/vue-components/banner",
"type": "boolean"
},
{
"name": "dense",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Dense mode; occupies less space",
"doc-url": "https://v2.quasar.dev/vue-components/banner",
"type": "boolean"
},
{
"name": "rounded",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Applies a small standard border-radius for a squared shape of the component",
"doc-url": "https://v2.quasar.dev/vue-components/banner",
"type": "boolean"
},
{
"name": "dark",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Notify the component that the background is a dark color",
"doc-url": "https://v2.quasar.dev/vue-components/banner",
"type": "boolean"
}
],
"slots": [
{
"name": "default",
"description": "This is where Banner content goes",
"doc-url": "https://v2.quasar.dev/vue-components/banner"
},
{
"name": "avatar",
"description": "Slot for displaying an avatar (suggestions: QIcon, QAvatar)",
"doc-url": "https://v2.quasar.dev/vue-components/banner"
},
{
"name": "action",
"description": "Slot for Banner action (suggestions: QBtn)",
"doc-url": "https://v2.quasar.dev/vue-components/banner"
}
],
"description": "QBanner - Quasar component",
"doc-url": "https://v2.quasar.dev/vue-components/banner"
},
{
"name": "QBar",
"source": {
"module": "quasar",
"symbol": "QBar"
},
"attributes": [
{
"name": "dense",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Dense mode; occupies less space",
"doc-url": "https://v2.quasar.dev/vue-components/bar",
"type": "boolean"
},
{
"name": "dark",
"value": {
"kind": "expression",
"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",
"doc-url": "https://v2.quasar.dev/vue-components/bar",
"type": "boolean"
}
],
"slots": [
{
"name": "default",
"description": "Default slot in the devland unslotted content of the component",
"doc-url": "https://v2.quasar.dev/vue-components/bar"
}
],
"description": "QBar - Quasar component",
"doc-url": "https://v2.quasar.dev/vue-components/bar"
},
{
"name": "QBreadcrumbs",
"source": {
"module": "quasar",
"symbol": "QBreadcrumbs"
},
"attributes": [
{
"name": "separator",
"value": {
"kind": "expression",
"type": "string"
},
"description": "The string used to separate the breadcrumbs\n\nExamples:\n-\n|\n>",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs",
"default": "\"/\""
},
{
"name": "active-color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "The color of the active breadcrumb, which can be any color from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs",
"default": "\"primary\""
},
{
"name": "gutter",
"value": {
"kind": "expression",
"type": "'none'|'xs'|'sm'|'md'|'lg'|'xl'"
},
"description": "The gutter value allows you control over the space between the breadcrumb elements.",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs",
"default": "\"sm\""
},
{
"name": "separator-color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "The color used to color the separator, which can be any color from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs"
},
{
"name": "align",
"value": {
"kind": "expression",
"type": "'left'|'center'|'right'|'between'|'around'|'evenly'"
},
"description": "Specify how to align the breadcrumbs horizontally",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs",
"default": "\"left\""
}
],
"slots": [
{
"name": "default",
"description": "Default slot in the devland unslotted content of the component",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs"
},
{
"name": "separator",
"description": "HTML or component you can slot in to separate the breadcrumbs",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs"
}
],
"description": "QBreadcrumbs - Quasar component",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs"
},
{
"name": "QBreadcrumbsEl",
"source": {
"module": "quasar",
"symbol": "QBreadcrumbsEl"
},
"attributes": [
{
"name": "to",
"value": {
"kind": "expression",
"type": "string|object"
},
"description": "Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used\n\nExamples:\n/home/dashboard\n:to=\"{ name: 'my-route-name' }\"",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs"
},
{
"name": "exact",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Equivalent to Vue Router <router-link> 'exact' property; Superseded by 'href' prop if used",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs",
"type": "boolean"
},
{
"name": "replace",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs",
"type": "boolean"
},
{
"name": "active-class",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Equivalent to Vue Router <router-link> 'active-class' property; Superseded by 'href' prop if used\n\nExamples:\nmy-active-class",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs"
},
{
"name": "exact-active-class",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Equivalent to Vue Router <router-link> 'active-class' property; Superseded by 'href' prop if used\n\nExamples:\nmy-exact-active-class",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs"
},
{
"name": "href",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props\n\nExamples:\nhttps://quasar.dev",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs"
},
{
"name": "target",
"value": {
"kind": "expression",
"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\n\nExamples:\n_blank\n_self\n_parent\n_top",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs"
},
{
"name": "disable",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Put component in disabled mode",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs",
"type": "boolean"
},
{
"name": "label",
"value": {
"kind": "expression",
"type": "string"
},
"description": "The label text for the breadcrumb\n\nExamples:\nHome\nIndex",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs"
},
{
"name": "icon",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)\n\nExamples:\nmap\nion-add\nimg:https://cdn.quasar.dev/logo-v2/svg/logo.svg\nimg:path/to/some_image.png",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs"
},
{
"name": "tag",
"value": {
"kind": "expression",
"type": "string"
},
"description": "HTML tag to use\n\nExamples:\ndiv\nspan\ndiv\nspan",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs",
"default": "\"span\""
}
],
"events": [
{
"name": "click",
"arguments": [
{
"name": "evt",
"type": "Event",
"description": "JS event object; If you are using route navigation ('to'/'replace' props) and you want to cancel navigation then call evt.preventDefault() synchronously in your event handler",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs"
},
{
"name": "go",
"type": "Function",
"description": "Available ONLY if you are using route navigation ('to'/'replace' props); When you need to control the time at which the component should trigger the route navigation then call evt.preventDefault() synchronously and then call this function at your convenience; Useful if you have async work to be done before the actual route navigation or if you want to redirect somewhere else",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs"
}
],
"description": "Emitted when the component is clicked",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs"
}
],
"slots": [
{
"name": "default",
"description": "This is where custom content goes, unless 'icon' and 'label' props are not enough",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs"
}
],
"description": "QBreadcrumbsEl - Quasar component",
"doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs"
},
{
"name": "QBtn",
"source": {
"module": "quasar",
"symbol": "QBtn"
},
"attributes": [
{
"name": "size",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)\n\nExamples:\n16px\n2rem\nxs\nmd",
"doc-url": "https://v2.quasar.dev/vue-components/button"
},
{
"name": "type",
"value": {
"kind": "expression",
"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\n\nExamples:\na\nsubmit\nbutton\nreset\nimage/png\nhref=\"https://quasar.dev\" target=\"_blank\"",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"default": "\"button\""
},
{
"name": "to",
"value": {
"kind": "expression",
"type": "string|object"
},
"description": "Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used\n\nExamples:\n/home/dashboard\n:to=\"{ name: 'my-route-name' }\"",
"doc-url": "https://v2.quasar.dev/vue-components/button"
},
{
"name": "replace",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "href",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Native <a> link href attribute; Has priority over the 'to' and 'replace' props\n\nExamples:\nhttps://quasar.dev\nhref=\"https://quasar.dev\" target=\"_blank\"",
"doc-url": "https://v2.quasar.dev/vue-components/button"
},
{
"name": "target",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Native <a> link target attribute; Use it only with 'to' or 'href' props\n\nExamples:\n_blank\n_self\n_parent\n_top",
"doc-url": "https://v2.quasar.dev/vue-components/button"
},
{
"name": "label",
"value": {
"kind": "expression",
"type": "string|number"
},
"description": "The text that will be shown on the button\n\nExamples:\nButton Label",
"doc-url": "https://v2.quasar.dev/vue-components/button"
},
{
"name": "icon",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)\n\nExamples:\nmap\nion-add\nimg:https://cdn.quasar.dev/logo-v2/svg/logo.svg\nimg:path/to/some_image.png",
"doc-url": "https://v2.quasar.dev/vue-components/button"
},
{
"name": "icon-right",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)\n\nExamples:\nmap\nion-add\nimg:https://cdn.quasar.dev/logo-v2/svg/logo.svg\nimg:path/to/some_image.png",
"doc-url": "https://v2.quasar.dev/vue-components/button"
},
{
"name": "outline",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Use 'outline' design",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "flat",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Use 'flat' design",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "unelevated",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Remove shadow",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "rounded",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Applies a more prominent border-radius for a squared shape button",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "push",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Use 'push' design",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "square",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Removes border-radius so borders are squared",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "glossy",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Applies a glossy effect",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "fab",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Makes button size and shape to fit a Floating Action Button",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "fab-mini",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Makes button size and shape to fit a small Floating Action Button",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "padding",
"value": {
"kind": "expression",
"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\n\nExamples:\n16px\n10px 5px\n2rem\nxs\nmd lg\n2px 2px 5px 7px",
"doc-url": "https://v2.quasar.dev/vue-components/button"
},
{
"name": "color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for component from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://v2.quasar.dev/vue-components/button"
},
{
"name": "text-color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Overrides text color (if needed); Color name from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://v2.quasar.dev/vue-components/button"
},
{
"name": "no-caps",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Avoid turning label text into caps (which happens by default)",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "no-wrap",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Avoid label text wrapping",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "dense",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Dense mode; occupies less space",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "ripple",
"value": {
"kind": "expression",
"type": "boolean|object"
},
"description": "Configure material ripple (disable it by setting it to 'false' or supply a config object)\n\nExamples:\nfalse\n{ early: true, center: true, color: 'teal', keyCodes: [] }",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"default": "true"
},
{
"name": "tabindex",
"value": {
"kind": "expression",
"type": "number|string"
},
"description": "Tabindex HTML attribute value\n\nExamples:\n0\n100",
"doc-url": "https://v2.quasar.dev/vue-components/button"
},
{
"name": "align",
"value": {
"kind": "expression",
"type": "'left'|'right'|'center'|'around'|'between'|'evenly'"
},
"description": "Label or content alignment",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"default": "\"center\""
},
{
"name": "stack",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Stack icon and label vertically instead of on same line (like it is by default)",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "stretch",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "When used on flexbox parent, button will stretch to parent's height",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "loading",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Put button into loading state (displays a QSpinner -- can be overridden by using a 'loading' slot)",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "disable",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Put component in disabled mode",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "round",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Makes a circle shaped button",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
},
{
"name": "percentage",
"value": {
"kind": "expression",
"type": "number"
},
"description": "Percentage (0.0 < x < 100.0); To be used along 'loading' prop; Display a progress bar on the background",
"doc-url": "https://v2.quasar.dev/vue-components/button"
},
{
"name": "dark-percentage",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Progress bar on the background should have dark color; To be used along with 'percentage' and 'loading' props",
"doc-url": "https://v2.quasar.dev/vue-components/button",
"type": "boolean"
}
],
"events": [
{
"name": "click",
"arguments": [
{
"name": "evt",
"type": "Event",
"description": "JS event object; If you are using route navigation ('to'/'replace' props) and you want to cancel navigation then call evt.preventDefault() synchronously in your event handler",
"doc-url": "https://v2.quasar.dev/vue-components/button"
},
{
"name": "go",
"type": "Function",
"description": "Available ONLY if you are using route navigation ('to'/'replace' props); When you need to control the time at which the component should trigger the route navigation then call evt.preventDefault() synchronously and then call this function at your convenience; Useful if you have async work to be done before the actual route navigation or if you want to redirect somewhere else",
"doc-url": "https://v2.quasar.dev/vue-components/button"
}
],
"description": "Emitted when the component is clicked",
"doc-url": "https://v2.quasar.dev/vue-components/button"
}
],
"slots": [
{
"name": "default",
"description": "Use for custom content, instead of relying on 'icon' and 'label' props",
"doc-url": "https://v2.quasar.dev/vue-components/button"
},
{
"name": "loading",
"description": "Override the default QSpinner when in 'loading' state",
"doc-url": "https://v2.quasar.dev/vue-components/button"
}
],
"description": "QBtn - Quasar component",
"doc-url": "https://v2.quasar.dev/vue-components/button"
},
{
"name": "QBtnDropdown",
"source": {
"module": "quasar",
"symbol": "QBtnDropdown"
},
"attributes": [
{
"name": "transition-show",
"value": {
"kind": "expression",
"type": "string"
},
"description": "One of Quasar's embedded transitions\n\nExamples:\nfade\nslide-down",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
"default": "\"fade\""
},
{
"name": "transition-hide",
"value": {
"kind": "expression",
"type": "string"
},
"description": "One of Quasar's embedded transitions\n\nExamples:\nfade\nslide-down",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
"default": "\"fade\""
},
{
"name": "transition-duration",
"value": {
"kind": "expression",
"type": "string|number"
},
"description": "Transition duration (in milliseconds, without unit)",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
"default": "300"
},
{
"name": "model-value",
"value": {
"kind": "expression",
"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\n\nExamples:\nv-model=\"menuState\"",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
"type": "boolean"
},
{
"name": "size",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)\n\nExamples:\n16px\n2rem\nxs\nmd",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown"
},
{
"name": "type",
"value": {
"kind": "expression",
"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\n\nExamples:\na\nsubmit\nbutton\nreset\nimage/png\nhref=\"https://quasar.dev\" target=\"_blank\"",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
"default": "\"button\""
},
{
"name": "to",
"value": {
"kind": "expression",
"type": "string|object"
},
"description": "Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used\n\nExamples:\n/home/dashboard\n:to=\"{ name: 'my-route-name' }\"",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown"
},
{
"name": "replace",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
"type": "boolean"
},
{
"name": "href",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Native <a> link href attribute; Has priority over the 'to' and 'replace' props\n\nExamples:\nhttps://quasar.dev\nhref=\"https://quasar.dev\" target=\"_blank\"",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown"
},
{
"name": "target",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Native <a> link target attribute; Use it only with 'to' or 'href' props\n\nExamples:\n_blank\n_self\n_parent\n_top",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown"
},
{
"name": "label",
"value": {
"kind": "expression",
"type": "string|number"
},
"description": "The text that will be shown on the button\n\nExamples:\nButton Label",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown"
},
{
"name": "icon",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)\n\nExamples:\nmap\nion-add\nimg:https://cdn.quasar.dev/logo-v2/svg/logo.svg\nimg:path/to/some_image.png",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown"
},
{
"name": "icon-right",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)\n\nExamples:\nmap\nion-add\nimg:https://cdn.quasar.dev/logo-v2/svg/logo.svg\nimg:path/to/some_image.png",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown"
},
{
"name": "outline",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Use 'outline' design",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
"type": "boolean"
},
{
"name": "flat",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Use 'flat' design",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
"type": "boolean"
},
{
"name": "unelevated",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Remove shadow",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
"type": "boolean"
},
{
"name": "rounded",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Applies a more prominent border-radius for a squared shape button",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
"type": "boolean"
},
{
"name": "push",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Use 'push' design",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
"type": "boolean"
},
{
"name": "square",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Removes border-radius so borders are squared",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
"type": "boolean"
},
{
"name": "glossy",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Applies a glossy effect",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
"type": "boolean"
},
{
"name": "fab",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Makes button size and shape to fit a Floating Action Button",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
"type": "boolean"
},
{
"name": "fab-mini",
"value": {
"kind": "expression",
"type": "boolean"
},
"description": "Makes button size and shape to fit a small Floating Action Button",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
"type": "boolean"
},
{
"name": "padding",
"value": {
"kind": "expression",
"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\n\nExamples:\n16px\n10px 5px\n2rem\nxs\nmd lg\n2px 2px 5px 7px",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown"
},
{
"name": "color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Color name for component from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://v2.quasar.dev/vue-components/button-dropdown"
},
{
"name": "text-color",
"value": {
"kind": "expression",
"type": "string"
},
"description": "Overrides text color (if needed); Color name from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
"doc-url": "https://v2.quasar.d